※デザインの方リニューアルしました！デザインはLOGzeudonさんから許可を頂き、ソースコードを参照させてもらい作成しました。過去の旧オモロクのデザインサンプルはこちら
あなたは、ブログカスタマイズを工夫すれば「読まれるブログ」を実現できると思いますか？
答えを言っておくと、ブログカスタマイズを整えるだけで、ある一定「読まれるブログ」を実現することができます。
一定のレベルまで、PVまたは、読者を獲得するには、デザイン、つまり「仕組み」を整えるのが近道です。仕組みとは、まさに今あなたが興味を持っている「ブログカスタマイズ」にあります。
この記事では、今まで私が初心者時代からコツコツ半年間で実装してきたブログカスタマイズを「何を考えて実装したのか」と「実施方法」と共にご紹介します。
1日1〜100PV時代から脱却するためには、それ相応の努力が必要であって、 イチからカスタマイズを工夫しようと思うと時間がかかります。ですが、私の長きに渡って考えた結論をあなたにお伝えすることで、あなたの記事を世の中に広めるスピードを加速できるはずです。
細かい部分から大きな動きまで、僕の実装してきた、すべてのカスタマイズをご紹介します。もし、あなたが求めている結果を出したいのであれば、迷わずに全部コピーしてやってください。
短期間で結果を出すには人の真似をするのが一番ですし、何よりブログカスタマイズは一度行えば永久に適応されるので効率が良いです。テーマから何まで全部、頭の中をさらけ出すので、ぜひ参考にしてみてください。
- TIPS1 | テーマはNakedが安定
- TIPS2 | ブログの顔となるヘッダー、メニューバー
- TIPS3 | シェアボタン 考え方・実装手順
- TIPS4 | 記事中の表現を工夫しよう
- TIPS5 | 記事下に網を。ユーザーをキャッチしよう
- TIPS6 | 神は細部に宿る！細かいカスタマイズ6選
- まとめ | ブログデザインってこり出すとキリがないよね
※初心者向けから、若干、玄人向けまで。初心者の方は全部オススメ。玄人の方は終盤がオススメ。超エキスパートの人にとって参考にならないかもしれませんが、それは、もうドンマイ俺。
TIPS1 | テーマはNakedが安定
はてなブログのテーマストアには、多種多様なテーマがあります。初心者は数が多すぎて、何を選べば良いか悩むと思いますが、中でも一番おすすめなのはNaked。僕が認識しているメリットをお伝えすると、
- 画像が大きめに表示される
- ヘッダーも初期設定で綺麗にハマる
- シンプルなのでコンテンツに集中してもらえる
- コンテンツマーケティングに成功しやすい
シンプルな上、画像が大きめに表示されるので、Nakedを使えば簡単にコンテンツが映えます。テーマの選定に迷っている方や、マンネリを感じている人はNakedオススメです！
実装方法
テーマストアNaked にてテーマをインストール
TIPS2 | ブログの顔となるヘッダー、メニューバー
脱初心者！簡単に実装できるのに結果が出るブログデザイン見せ方３選で書いた記事の２選でもお伝えしたのですが、ヘッダーと記事下のカスタマイズは読者を獲得するために必須です。理由としては大きく2つ。
- ブログの顔となるヘッダーは一番ユーザーの目に触れる
- メニューバーはユーザーが回遊させるための動線を作る
1のヘッダーデザイン次第では、覚えてもらいやすい印象を与え、固定読者を増やすことができます。2のメニューバーを設置すれば、動線ができ、1ユーザーあたりのPV数を増やすことができます。
どちらも実装するのにハードルはそこまで大きくないので、まずはこの２要素を固めることをお勧めします。簡単ですが長期的なブランディングにも成功します。
実装方法
1.ヘッダー画像差し替え
【デザイン】>>「カスタマイズ」>「ヘッダ」
→「タイトル画像」のファイル選択から希望のファイルをUP
※フォトショップやイラストレータを使えない場合 ココナラやクラウドソーシング を使用し、外注することをオススメします！
2.メニューバー設置（※オモロク風にする場合）
2-1.【デザイン】>> 「カスタマイズ」>「タイトル下」
→以下HTMLコードを記述
2-2.【デザイン】>> 「カスタマイズ」>「デザインCSS」
→以下CSSコードを記述
こちらユキヒーさんのメニューバーを改変して使用しました。上記のコードはオモロク使用なので、キモいと思う人は、ベースであるユキヒーさんの記事を参考にしてください。
TIPS3 | シェアボタン 考え方・実装手順
ブログで大きな拡散を呼ぶためには「シェアボタン」は欠かせません。はてなブログではデフォルトにシェアボタンの取り付けがデザイン設定画面で行えるのですが、表示速度が遅い印象があります。そのため、別のシェアボタン機能提供サイトを使って設定する方が表示速度も速く、デザインもクールなのでオススメです。
具体的には、忍者おまとめボタンを利用するのが一番簡単です。忍者ツールに登録する必要はありますが、忍者ツールのシステムでは解析機能があり「どれくらいシェアボタンがクリックされているのか？」を確認できるのが強みです。
シェアボタンを二階層、用意する
僕は、この「忍者おまとめ」シェアボタンに加えて、初期のはてなブックマークのボタンを1つだけ設置しています。基本的にはてなブログでは、ハテブからバズが起きる場合が多いので、できるだけ他のシェアボタンよりも優先してもらうという意図で設置していました。もちろん忍者おまとめツールでのハテブボタンはクリックされていますので、コンンテンツ次第である部分もあります。
したがって「忍者おまとめボタン＋初期設定のハテブボタン」の配置がバズを必ず起こすと、一概に言えないの部分はあります。ですが可能性を高める意味では、まあアリかなと。
とにかく、シェアボタンを設置していない人は至急取り付けることをオススメします！
実装方法
- 忍者おまとめボタンサイトからソースコードをコピー
- 【デザイン】>> 「カスタマイズ」>「記事上」「記事下」に、忍者おまとめボタンでコピーしたソースコードを挿入。
TIPS4 | 記事中の表現を工夫しよう
サンプル
- サンプル！
サンプル
ブログデザイン全体の体裁を整えるのも大事ですが、コンテンツの中身がユーザーが満足するものでなければ、大きな成果は期待でません。
そこで、僕は上記のような吹き出しのデザイン、見出しのデザインにこだわり、読みやすい記事の構成を心がけました。デザインはWEB系では有名なサイト「サルワカ」さんのリファレンスがオススメです。
伝わりやすい表現はサルワカくんがピカイチ
「伝わりやすい」という軸で記事中での表現におけるカスタマイズは、僕の大好きなサイトサルワカくんの以下の記事を参考にさせてもらいました。今っぽい可愛らしいデザインなので、とても使いやすいです。
サルワカ君には本当に感謝しております。リスペクトcatnoseパイセン。
実装方法
- 【記事編集画面】>>「HTML編集」にて上記記事を参考にHTMLコードを挿入。
- 「デザインCSS」にて上記記事を参考にCSSコードを挿入（こちらを設定しないと反映されないので注意）
TIPS5 | 記事下に網を。ユーザーをキャッチしよう
ユーザーが記事を読了した後に単に離脱されないように、次のアクションを起こしてもらえるように仕掛けを作っておく必要があります。仕掛けを設ける意図としては、大きく3つあります。
- シェアボタンを押してもらえるようにする
- 他の記事を見てもらえるようにする
- 読者になってもらえるようにする
1のシェアボタンは忍者おまとめボタンで設置したので、他2つの要素を考慮していきましょう。
1.他の記事を見てもらえるように動線を引く
1つの記事だけ閲覧しただけでブラウザバックされてしまうと、大きな機会損失になってしまいます。そうならないためには、今までストックしてきた記事もついでに読んでもらう工夫が必要です。僕の実装している解決策でいうと、記事下に、
- 「パンくずリスト」
- 「よく読まれている記事」
- 「ブログ集客メソッド」「ハテブがたくさんついてる記事のまとめ」
のリンクを張っています。
これにより、回遊率が高まります。デフォルトのままの人は、一度自分独自の「見てもらいたいリンク」を貼り付けてみましょう。設置するだけで、ユーザーへのアクションを適切に促すことができます。
パンくずリストの設定
パンくずリストはこちらの記事を参照してみてください。
2.読者になってもらえるように動線を引く
「読者ボタンを設置する」あるいは「SNSアカウントをフォローしてもらう」これ、結構重要です。なぜならユーザーが「この記事良いな」「このブログ良いな」と思ってくれる瞬間は一瞬だからです。
その５秒の好意の感情に合わせたボタンを設置しておく必要性はかなり高いと思いませんか？ もし、ボタンを設置していない場合、ブログを購読してくれる可能性があったユーザーを全員逃してしまうことになります。
そのこともあって、僕は記事下にLINE@とはてな読者登録のボタンを設置しています。
PC表示では、サイドバーをスクロールされても固定されるように設定し、興味を持ってくれたユーザーからのFeedlyやはてなブログ購読、twitterのフォローを促しています。
実装方法
1.【デザイン】>> 「カスタマイズ」>「記事下」
→以下HTMLコードを記述
2.【デザイン】>> 「カスタマイズ」>「デザインCSS」
→以下CSSコードを記述
※このままコピペすると当ブログと同じになります、ダサいので適宜改良して使ってください
TIPS6 | 神は細部に宿る！細かいカスタマイズ6選
最後に、細かい部分のカスタマイズを一挙ご紹介しておきます！案外、上級者ブロガーの人でも使っていないカスタマイズがあったりするので、参考にしてみてください！
1.サイドバー固定
２カラムレイアウト（基本ブログの形式はメインコンテンツとサイドバーの２列デザイン）なら、サイドバーの余白を有効活用するべきです。
実際に僕も、サイドバーにプロフィールを設置して、そこからFeedly登録やツイッターのフォローを促すことができました。意外と簡単にできるので、まだ実装していない人はぜひ取り入れると良いですよ！
2.はてなブログの見出しをSEO最適化へ h4→h3 h3→h2
SEO対策の一環として、hタグを一段階引き上げるスクリプトを導入していました。もちろん、効果があるか否かはグーグル先生のみぞ知るのみですが、やれることはやっていました。キーワード狙いにいった記事では、しっかりと上位に表示されているので、それなりに効果はあるかもしれません。
毎回毎回htmlタグをイジり、h3からh2に変換する作業を行っている方は、骨が折れると思うので、こちらのスクリプトを導入してみてはいかがでしょうか。
3.スマフォ時のレクタングルのグーグルアドセンス配置調整
PC表示時、記事下にアドセンスを２枚並列に並べていると、どうしてもスマフォ表示に不恰好になってしまいます。
PC表示
■■
スマフォ表示
■
■
※ ■はアドセンス広告
上記で紹介した記事の魔法のコードです。以下のように調整してくれます。
PC表示
■■
スマフォ表示
■
スマフォ時では、1つだけの表示になるのでユーザービリティが改善されました。
わらじさん、教えてくださりありがとうございました！
4.記事下のユーザー名、idの消去
細かいですが、僕はIDや何時間前といった情報はユーザーにとってあまり必要でないと考えています。（僕の書く記事は、ニュース系でないため）
必要の無いものは極力削る意味で、非表示にしています。
5.画像をクリックしても拡大しないようにする
スマフォで自分の記事を閲覧していて感じたのは、画像を誤クリックしてしまう多さ。大きく表示させたくも無い画像が、まるで広告のように表示されてしまうことに苛立ちを感じました。同じように感じるユーザーもいるかと思い、画像を拡大させないようにカスタマイズしました。
6.目次のいらない装飾を無くす
/* 目次のいらない部分削除 */
ul.table-of-contents {
list-style-type:none;
}
ul.table-of-contents ul {
list-style-type:none;
}
デフォルトだと、目次にリストタグのデザインが適応されてしまいます。（ゴマみたいな点がダサい）僕はこの小さな丸のデザインが気に入らなかっため、CSSで非表示にしています。ぶっちゃけ、これは好みの問題なので、どっちでも良いかと思いますが一応紹介しておきます。神は細部にやどru（言いたいだけ）
まとめ | ブログデザインってこり出すとキリがないよね
以上、長くなりましたが僕が今まで実装してきたブログデザインのまとめでした！
ブログデザイン。あまりこりすぎるのも良くないですが、最低限ユーザーに起こしてほしいアクションや、伝わりやすい記事にレベルアップさせるために、設定していて損はないかと思います。
冒頭にもありましたが、真似してもらって全然構いません！多分初心者の人にとっては、役に立つはずです。先人の方々、ありがとうございました。とても役にたったのでご紹介させて頂きました。問題があれば削除します。
今回はバーっと書きましたので情報量が多いかもしれませんが、
とにかく！
あなたのブログライフが、これらのカスタマイズによって楽しいものになれば幸いですっ！ブログ楽しみましょう！！！！（強引な締め）
サンプル