オカンTECHロゴ
iPadほしい人!買う前に絶対見てほしい

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

 


この記事は「オカン はてな wordpress」で検索すると辿り着けます!

 

f:id:beaber:20210628164354p:plain













はてなブログのカスマタイズ記事を調べても紹介しているブログのようなデザインにならないのはなぜかしら?

f:id:beaber:20210628164402p:plain







元はてなブロガーがWordPressブログに引っ越してその記事が上位表示されている可能性が高いよ。

 

このページでは「現役はてなブロガーが紹介するブログカスタマイズ」を中心に紹介。

繰り返しますが、今もはてなブログを利用していますのでどのカスタマイズもはてなで実現可能です。

 

 

教えるのはこんな人
 

f:id:beaber:20211128071130p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • はてなブログでカスタマイズを楽しみたい
  • WordPressが気になっているはてなブロガー
  • はてなを調べているのにWordPressが上位表示されてがっかり

 

はじめに

このブログのコンセプトはオカンに伝わるITブログです。

 

そのため、専門用語など難しい言葉は最大限排除して紹介していきます。それでも分からない表現があれば、問合せフォームかTwitterよりご質問ください。

 

f:id:beaber:20210628164407p:plain







Twitter、コメント欄で感想などいただけると泣いて喜びます!

【問題】はてなのカスタマイズ記事なのにWordPressブログが多い

 

「はてなブログ カスマタイズ」

 

このキーワードでGoogle検索すると多くのおしゃれなブログがヒットします。

 

「はてなブログでこんなにおしゃれにできるんだ」

「自分もこのデザインにしたい」

 

そんな想いでページを読んだと思います。

しかし、検索で上位に表示される記事の多くがWordPressブログなのです。

 

はてなブログとWordPressを見分ける方法はいくつかありますが「はてなの読者登録ボタン」があるか?で判断するとわかりやすいです。

 

f:id:beaber:20211219064016p:plain
図:読者になる(デフォルト)

 

f:id:beaber:20211219064023p:plain
図:読者になる(デフォルト②)

f:id:beaber:20211219064045p:plain
図:読者になる(カスタマイズ※フジブロっ!さん)

 

こんな感じの読者登録ボタンがあるブログは間違いなくはてなブログです。

 

WordPressブログであることに気がつかずに

 

「この部分も真似したい」

 

と他のカスタマイズを参考にしようとしても、はてなブログでは実現が難しいカスタマイズも多いので要注意です。

 

トレンドは大きく分けて二つ

個人ブログの今のトレンドは「WordPressの有料テーマ」「SNS連携」です。

 

f:id:beaber:20211221231737p:plain

 

この記事では、はてなブログでこれらの二点のトレンドをおさえるデザインカスタマイズを紹介します。

 

トレンド①|WordPress有料テーマ

全世界のウェブサイトの1/3以上がWordPressで作られていると言われています。

 

f:id:beaber:20211221232013p:plain

 

日本でもWordPressは大変人気があり、たとえば以下のような有料テーマが日本の個人ブログでは人気があります。

  • SWELL
  • AFFINGER
  • JIN
  • SANGO

 

今回は、これらのWordPress有料テーマで採用されているデザインの一部をはてなブログで実現する方法を紹介します。

 

トレンド②|はてな×SNS連携

Googleの評価の指針に有名な「E-A-T」(Expertise(専門性)、Authoritativeness(権威性)、 Trustworthiness(信頼性))があります。

 

このうち、権威性は「誰が言っているのか」を重視しています。

この権威性を測るために、GoogleがSNSのフォロー関係(たとえばインフルエンサーからフォローされているかどうか)を見ている。という噂があります。

SNSの中にまでGoogleが踏み込んでいる場合、SNSのフォロー関係は権威性の一つになると考えられます。

 

また、流入経路をSEO一本に絞ってしまうと、SEOで上位表示されなくなった時に流入が途絶えるリスクがあります。

流入経路を増やすためにもSNSと連携し、フォロワーを獲得することは非常に有効です。

 

WordPress風にする方法5選

ヘッダー|お知らせバーの表示

まずはブログの上部から。

WordPressでよく見かけるお知らせバーです。

2021年人気が爆発した有料テーマ「SWELL」のデモサイトの画像を拝借します。

 

f:id:beaber:20211219232313p:plain

SWELLデモサイトより

 

グローバルメニューを追加しているはてなブログはよく見かけますが、お知らせバーの設置はあまり見かけません。

特に人気のグラデーションカラーのお知らせバーの設置手順を解説しています。

 

 

フォント|ストライプマーカーの設定

続いて記事内で文字を強調する「マーカー」です。

 

単純な単色のマーカーのカスタマイズはよく見かけますが、はてなブログでストライプマーカーを使っている方はあまり見かけません。

ご紹介する記事ではカラフルなマーカーの引き方を解説しています。

ただし、文字装飾を嫌う人も多いので乱用は厳禁です。

 

https://cdn-ak.f.st-hatena.com/images/fotolife/b/beaber/20211128/20211128070959.png

https://cdn-ak.f.st-hatena.com/images/fotolife/b/beaber/20211128/20211128071355.png

https://cdn-ak.f.st-hatena.com/images/fotolife/b/beaber/20211128/20211128071030.png

 

 

フォント|テキスト左右のおしゃれ横棒

おしゃれ横棒??何言ってるの??

 

そんな声が聞こえてきそうですが、これのことです。

 

https://cdn-ak.f.st-hatena.com/images/fotolife/b/beaber/20211130/20211130235238.jpg

 

WordPressブログのトップページでよく見かけるデザインです。

全体的なデザインがシンプルだと見出しにも使えそうです。

 

 

ボタン|定番ボタン・グラデーションボタンの設置

「定番ボタン」という緑色のボタンと「グラデーションボタン」という二つのボタンを紹介しています。

 

あまりこだわらない人が多いですが、実は超絶効果のある「マイクロコピー」についても少し解説しています。

 

f:id:beaber:20211221002220p:plain

 

番外編|はてなスターの非表示化

WordPressには「はてなスター」がありません。

表示するのに読み込む時間もかかるため、トップページから非表示にしてしまう方法を解説しています。

 

 

SNSと連携する方法4選

Twitter|フォロワー数の表示

権威性が特に重視される今の時代、Twitterで多くのフォロワーと繋がっていることをアピールすることは有効です。

 

 

 

Twitter|ツイートを記事やサイドバーに埋め込み

ブログと同じく文字で戦う要素が強く、ブログと相性の良いSNSとして名高いツイッター。

ツイートを記事に埋め込むことで以下のような効果が得られることがあります。

  • 情報の信頼性アピールになる
  • 他人にツイートを口コミとして利用できる
  • 画像や動画の埋め込みとして利用できる
記事内にもサイドバーにも自由に貼り付けられる方法を解説しています。
 

 

Instagram|フィード投稿をブログに埋め込み

f:id:beaber:20211221234000p:plain

ブログからインスタへの流入を狙うために「投稿一覧」を表示する有料サービスはおすすめできません。

当ブログでも採用中ですが、フィード投稿をサイドバーに埋め込むことで無料でインスタへの流入が可能です。

 

 

Pinterest|ピン保存ボタンを表示

日本での流行が比較的遅かったピンタレスト。

ブログ内のすべての画像をPinterestにワンクリックorワンタップで保存できてしまう機能を公式が公開しています。

 

f:id:beaber:20211221234230p:plain

 

はてなブログでこの機能を使用している方は少数ですが、WordPressと同様に使用することができます。

 

 

はてなブログでも収益化できる

よく「収益化を目指すならWordPress一択」といった意見を聞きます。

多分そういう方は、はてなブログをよく知らないんだろうなと思います。(それかサーバ代やテーマ代で儲けたい方ですね)

 

両者を知って、フラットな評価をすべきと思います。 

 

↓両方ためしてわかった「はてなブログの良さ」「WordPressの良さ」はそれぞれ以下の記事で紹介しています。

www.okan-tech.com

 

また、一度だけ書いた運営記録の記事も一緒に紹介させてください。

この時は「物販とアドセンスばかりだから次はASPだ」と意気込み、それからASPが売れるようになりました。

 

この頃のナマの声は初心者ブロガーの方には共感してもらえるのではと思います。

 

www.okan-tech.com

 

選択肢を増やすためにはPro版がおすすめ

はてなブログPeoを2年契約中です。

Pro版のメリットはいくつもありますが、一番を選ぶなら独自ドメインが利用できる点です。

 

はてなブログ無料版では独自ドメインが使えないため、仮にはてなブログのサービスが終了になるなどして「○○.hatenablog.com」のドメインが使用できなくなるとブログのSEO評価が失われます。

 

はてなブログProで独自ドメインを使っていれば、たとえばはてなブログのサービスがなくなっても同じドメインを別のWordPressなどのブログとして生き返ることができます。この時のSEO評価は引き継がれます。

 

\はてなブログProを試してみる!/

はてなブログPro

 

f:id:beaber:20210628164407p:plain





僕だったら何年も大事に育ててきたドメインが消えたら立ち直れません


おすすめのアフィリエイトサイト

当ブログの収益傾向を振り返ると、物販は「もしも」経由のAmazon or 楽天の物販、ASP案件は「A8」と言ったように 自分のブログにあったアフィリエイトサイトがだんだんわかってきます。

 

最初はとにかく手探りでも色々実験してみて、自分のブログに効果があるサービスを探していくことになります。

ちなみに僕が最初に登録したのは以下のサイトでした。

 

f:id:beaber:20210628164402p:plain





登録して損することはないので迷う暇があったらまずは登録した方が良いよ

 

まとめ

おさらいです。はてなブログをWordPress有料テーマ風にするカスタマイズ方法を紹介しました。

基本的なカスタマイズより少しだけ凝ったものを選定しました。

はてなブログのカスタマイズを紹介しているブログは、WordPress風と思いきやホンモノのWordPressだったということもあるので注意が必要です。

 

WordPress風にする方法5選
  • ヘッダー|お知らせバーの表示
  • フォント|ストライプマーカーの設定
  • フォント|テキスト左右のおしゃれ横棒
  • ボタン |定番ボタン・グラデーションボタンの設置
  • 番外編 |はてなスターの非表示化
 
続いて、SNS連携を強くする方法です。ただプロフィールページに置いておくだけでなく、いかに読者がSNSにスムーズに移動できるかを考えたカスタマイズを選定しています。
SNSと連携する方法4選
  • Twitter  |フォロワー数の表示
  • Twitter  |ツイートを記事やサイドバーに埋め込み
  • Instagram |フィード投稿をブログに埋め込み
  • Pinterest |ピン保存ボタンを表示

 

 

最後までありがとうございました。

 

ITハンドブック
初めてのオカンにはまずはこれ!

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック?

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック


入れておきたい定番スマホアプリ

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

インスタグラマー御用達!CanvaProの30日間無料トライアルの登録方法

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで解説

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで

実家のオカンに教えた得する情報

安過ぎて鼻血が出そうになる中古Apple製品買い方

安過ぎて鼻血が出そうになる中古Apple製品買い方

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

家事との相性バツグン!Audibleを使って読みたかった本を読破

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

オカンでも出来るインスタ攻略

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

Instagram片思いチェックアプリReports Followers

Instagram片思いチェックアプリReports Followers

人気記事

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

ブログ:オカンTECHの紹介

ーパソコンでわからないことがあるわ。息子が次に実家に帰ってきたら聞こう。
ースマホのプランを変えたいけどよくわからないわ。携帯ショップに問い合わせしよう。

このブログではこういった時に誰かに頼らずに自分で答えに辿り着けるオカンの「IT的自立」を目指します。


新着記事
オカンTECH

全国のオカンのITリテラシーを向上だ!

プライバシーポリシー
広告関係のお問合せはこちら

©️ 2022 オカンTECH Powered by Hatena Blog