【初心者向け】無課金はてブロでできる、オススメのデザイン設定！（SEOと見た目を意識）
さて、はてなブログ初心者向けの最初の設定シリーズ最後の記事です。
この記事では、個人的にオススメの「はてなブログのデザイン設定」について記載していきます。
これまでの記事は割とキャプチャとか色々自分で用意して書いた割とオリジナルな記事でした。
この記事に関しては、僕自身がブログのデザイン設定を他のはてなブロガーさん達の記事を参考にしながら作ったのもあり、「自分が良いと思った設定が記載されている記事」をかいつまんで紹介するような内容になっています。
はてなブログのデザイン設定
1. デザインテーマを選ぶ
まずはここからです。
これは完全に好みで選べば良いと思います。
好み以外の観点としては、「レスポンシブHTTPS対応」のデザインテンプレートから選ぶのが良いです。
理由としては、スマホ側のデザインを大きく変えるにはそうするしかないからです。
Google Search Console を見ていると、検索流入ユーザーは結構多くがスマホからのアクセスでした。
Googleの検索アルゴリズムでもモバイルビューはかなり意識しているようです。
なので、「検索流入を増やして読者として定着させたい」のであればレスポンシブ対応のデザインを選ぶのは必須です。
なお、このブログでは Palette（パレット）というテーマを使わせていただいております。
僕自身は結構凝り性でこだわりも多分強い性格だと自覚しているのですが、このデザインテーマはかなり気に入っていて、ほぼ手を入れずに使わせてもらっています。
僕が気に入っているポイントとしては、1. 見やすい構成（これは好みですｗ）, 2. レスポンシブ対応, 3. 色をカスタマイズできるCSSテンプレートが公開されていてカスタマイズしやすい の3点です。
Paletteでは メインカラー, アクセントカラー, バックグラウンドカラー の3色を好きに設定することができます。
設定の仕方は、Paletteの生みの親である zuboraca さんがまとめてくれている記事が非常にわかりやすいです。
Paletteを導入するのであれば参考にしてみてください。
2. ブログ記事のカテゴリを、階層表示に変更する
これも、個人的には非常に重要です。
特に、テーマ特化型ではない雑記ブログの場合、複数のテーマの中で記事が増えていくので、この設定をしておくと非常にカテゴリが見やすくなります。
僕のブログの場合は、大きく 1. 株・投資, 2. ガジェットレビュー, 3. DApps, 4. 受験勉強系 が現状の大カテゴリなので、各カテゴリ内に小カテゴリを作るような整理をしています。
このカテゴリ整理、記事が多くなってから整理しようと大変なのでできるだけ早い内に手をつけられると良さそうです。
以下の記事で導入方法が大変分かりやすくまとまっているので参考に設定してみてください。（そして、作成ありがとうございました。）
3. 記事ページの設定を行う
これも、結構重要です。
折角記事を読んでもらったら、やっぱり読んで欲しいし拡散して欲しいというのが人間です。
この部分は人によって好みが別れるところだと思いますが、僕個人の現在の設定を紹介します。
ソーシャルパーツ:
「記事上下に表示」設定。
考え方としては、面白かったから SNS投稿/ブクマ する みたいなシーンの他に、以下のような利用シーンも想定できるためです。
・後で読みたいからとりあえずブクマしとく
・昨日読んだ記事をブラウザ履歴から探して思い出したようにSNSで共有
ただし、はてなブログの標準のソーシャルパーツが異様に重いので、カスタムなソーシャルパーツにしようと思って色々試していますが、ちょっとうまくいっていないのでうまくいったら記事にします。
（試しに今やっているカスタマイズだと、はてなブックマーク数とかがうまく読み込まれなくて永遠に読み込み中だったり、スマホから見ると記事下のレイアウトが崩れていたりしてしまっています。）
記事下のみに表示できるソーシャルパーツ:
なんとなく、はてなスターのみ「表示」設定にしています。
（動作が重くなるらしいので、はてなスターも外すかもしれません。）
関連記事:
「記事下に表示」設定に変更。
自分のブログ内の回遊が増える方が良いと思っています。
4. 記事ページの上下に読者ボタンとtwitterフォローボタンを表示するカスタマイズを行う
これは、複数の記事を読んだりして「この人は好みの記事を多く発信しそうだな」と思って読者登録とかフォローすることがあるのでは？（僕はそうです）という考え方で記事ページの上下に表示するようにしています。
これは意外と簡単で、読者になるボタンについては設定画面の「詳細設定」タブの中にある「読者になるボタン」の中身のコードをそのまま、記事上下のカスタマイズの中にある記事上, 記事下のコードを貼り付けられる部分にそれぞれ貼るだけです。
Twitterのフォローボタンも簡単です。
※以下の説明は、GoogleChromeを使っている前提で説明しています。
まずaboutページやプロフィールのTwitter連携を有効化します。
この状態で、aboutページやプロフィールを確認すると、サイト上に「twitterアカウントをフォローする」的なボタンが出ているはずなので、そのページでChromeのデベロッパーモードを起動します。
デベロッパーモードは「その他のツール」の中にあります。
※macなら「Command + Alt + I」 Windowsなら「Ctrl + Shift +I」でも起動します。
デベロッパーモードを開いたら、macならcommand+F, WindowsならCtrl+Fを押して検索モードに入ります。
その検索ボックスの中に、以下の文字を入力してEnterを押してください。
twitter-widget
それができたら、検索結果が黄色くなってコードが見つかるはずです。
見つかったところにマウスカーソルを合わせて右クリックし、[Copy] > [Copy element] でコピーできたコードをそのまま、記事上下のカスタマイズの中にある記事上, 記事下のコードを貼り付けられる場所に貼り付ければ完了です。
ちなみに、この<iframe ~>ってのをHTML編集モードで貼り付ければ、はてなブログの好きなところにTwitterのフォローボタンを設置できるので割と便利で、覚えておいて損はないです。
5. 記事ページの下部の読者ボタンとtwitterフォローボタンを広告より上に表示するカスタマイズを行う
記事ページの下に表示する設定にした読者ボタンとtwitterフォローボタンですが、そのままだと無料版はてなブログでデフォルト表示されるバナー広告の下に表示されてしまいます。
なので、記事直下に表示する設定を行います。
この設定も簡単で、記事上下のカスタマイズの記事下のコードを貼り付けられる部分のコードを以下のように修正するだけです。
<div id="my-footer">
※さっきの4で貼り付けた読者ボタン, twitterフォローボタンのコードがこの位置に来る
※ソーシャルボタンをカスタムで表示させるコードとか貼ってる人はそういうのもここに来ます。
</div>
<script>
var myFooter = document.getElementById("my-footer");
var temp = myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
ちなみに、この設定は以下の記事を参考に設定させていただきました。
6. サイドバーの設定とスマホのレスポンシブ設定を有効化する
ここは特に特殊な設定はしてません。
サイドバーを好きに編集してカスタマイズしましょう。
最後に、「スマホのレスポンシブ設定」の有効化を忘れずにやれば完了です。
デザインの中の一番右側の [スマートフォン] タブの中にある [詳細設定] でチェックを入れるだけでした。
まとめ
さて、自分自身のブログのデザイン設定を振り返ってみるとこんな感じでした。
はてなのデザイン設定については、勉強すればするだけ自在にカスタマイズできるようになっていくんだろうなぁと思います。
ググれば先人の知恵が詰まった記事がいっぱい出てくるものの、中々それらをまとめた記事が無かった気がしたので備忘録も兼ねて書いてみました。
今後、追加の設定やカスタマイズを作った際には、この記事に追記していこうと思っています。
それではまた～。
