どうも、ゴトーだ。
はてなブログを初めて今日で3週間になるが、そろそろブログのカスタマイズをしてみようと思って色々をいじってみた。
もしかしたら誰も気づいていないかもしれないが、テンプレートを変えたりレイアウトをいじったりしてみたので、そこで行なったことをまとめて、これからカスタマイズをしようとしている人の参考になればと思っている。
テーマを変更する
大きな所から着手していくのが良いだろうということで、まずはテーマを変更することにした。
これまで公式のテーマ以外のものが使えるということすら知らなかったので、もしかしたら俺のようにテンプレートのインストールができることを知らない人がいるかもしれない。
そんな人はこちらのテーマストアの人気順に並べて、良さげなテーマをプレビューでチェックして、好みのものが見つかればそれを適用するといいだろう。
ちなみに自分の場合はレスポンシブデザインのものに限定して調べて、結果的にInnocentというテーマにした。
レスポンシブデザインって？
そもそもレスポンシブデザインという用語が分からない人がいるかもしれない。
レスポンシブデザインとは、画面の幅に応じてスタイルを変更するもので、例えばPCで見た時とスマホで見た時に、同じテンプレートを使っているのにどちらの画面にも最適化される状況を作り出すことができる。
試しにこのブログをPCで見ている人はウインドウをだんだん縮めていってもらえれば、タブレット・スマホに特化した画面に切り替わっていくのが分かると思う。
レスポンシブデザインではない場合は、PCとスマホ画面の両方のカスタマイズをしなければならないのが面倒だったので、レスポンシブデザインのものに絞った。レスポンシブかどうかはテーマの画像の部分に「RESPONSIVE」というラベルがあるかどうかで判別できるので、ラベルがあるものから選べば良い。
両方の画面で設定を行うぜという人はレスポンシブにこだわる必要はないので、全てのテーマの中から厳選することができる。
レスポンシブ適用を忘れずに！
レスポンシブテーマをインストールしただけでは、スマホで見た時にそのテンプレートが適用されておらずこれまでのものが表示されてしまう。
適用するためには、以下の手順で行う。
まず管理画面の「デザイン」項目からスマホアイコンを選択する。するとこのような画面が表示される。
ここで「詳細設定」の項目から「レスポンシブデザイン」にチェックを入れて保存ボタンをクリックすれば完了だ。
もしかしたらProでないとできないかもしれないので、通常会員の人でできなかったら申し訳ない。
広告はどうなるの？
レスポンシブデザインにすると広告がPCとスマホでサイズが変わってしまうのではないかと俺も最初は案じたが、Google Adsenseではレスポンシブ広告というユニットが用意されているので、そのユニットを使えば問題ない。
その他の広告媒体の場合はレスポンシブユニットがないかもしれないので、各自確認して欲しい。
目次の追加
他のブログを見ていたら見出しごとに目次が付けられているものがあって、どうすればつくのかと調べたら簡単に付けられるようだ。
はてな記法を使っている場合、
[:contnets]を目次を追加したい箇所につければ、勝手に目次を追加してくれる。
「続きを読む」の追加
トップページなど一覧で表示する場合、記事の全文を表示させる必要はないと思い、「続きを読む」を導入した。
やり方は簡単で、はてな記法を使っている場合、下の画像のフォーカスされているエディタアイコンをクリックすれば「続きを読む」が実装される。
「====」をはてな記法の中に挿入しても同じことなので、それで代用しても良い。
プロフィールにTwitterフォローボタンを追加する
管理画面の「デザイン」の項目から「カスタマイズ」アイコンをクリックして、「サイドバー」→「プロフィール」を選択。
すると以下のような画面が表示される。
ここで「フォローボタン」にチェックを入れれば、プロフィールにTwitterのフォローボタンが表示される。
記事中に広告を挿入する
このブログでは試験的に広告を4つ掲載しており、それぞれ「サイドバー」「記事上」「記事中」「記事下」となっている。
サイドバーと記事上下に関しては簡単に設置できるのだが、記事中に関してはちょっと一手間が必要だ。
一番簡単なのは記事のHTMLに直接広告埋め込んでしまうことなんだが、広告ユニットを変更したかったり、一時的にBANされたときなどに全記事を修正しなければならなくなるので、自動化したい所だ。
そんな時にこのブログを見つけて、その通りにやればすぐに動作したので、それを紹介したい。
このブログの「設定方法」の項目に書かれているソースコードが該当箇所だ。(ソースは元記事を参照して欲しい)
このソースコードをデザインのカスタマイズから「記事下」のところに貼り付ければ良い。
各自の設定によって厳密には内容が異なるが、自分のブログの場合はこのようになっている。
画像を見ると「記事上」にかかれているように見えるが、実際には「記事下」なので注意してほしい。
ちなみにこのサイトの通りやっても自分の場合は上手く動かなくて、少しつまずいてしまった。
少しだけカスタマイズ
どうやらこのソースの原理としては見出しの数をカウントして、その中間部分に広告のソースを挿入するというものなのだが、見出しのタグが「h3,h4,h5」のいずれかのみが対象となっていて、「h2」タグしか含まれていない記事は記事下に押し出されてしまう。
そのためさらにカスタマイズして、h2タグを含めるようにした。その場合のソースはこのようになる。
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h2,h3,h4,h5');
$target.eq(Math.floor($target.size() / 2)).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p>広告</p>
<!--ここに自分のアドセンスのコード-->
<p> </p>
</div>このソースを追加すればh2の見出ししか含まれていない記事でも、いい感じに中央に来てくれた。
俺はまだ試していないが、上の方に表示したい場合は「$target.size() / 2」の部分を「$target.size() / 3」など割り算の数を大きくすれば上の方に来てくれると思う。
レイアウトのカスタマイズ
これはInnocentというテンプレートを使っている場合のみに関係する話なので詳しくは省略するが、以下のようなカスタマイズを行なった。
これらは全てCSSの設定を上書きすることで実現できる。
- スマホ版の記事の余白を小さくした
- サイドバーの余白を小さくした
- スマホ版の引用の余白が大きくて、収まる文字が少なくなってしまうので小さくした
- PC版の画像の最大幅を小さくした
- aboutページの読者アイコンに余計な余白が合って崩れていたので修正した
- PC版の広告を728pxのものを標示させたかったので、本文の領域を728px以上まで引き伸ばした(結構苦戦した…orz)
最も苦労したところといえば、レスポンシブデザインなので、CSSを全体に適用させるとPCとスマホ両方切り替わってしまうので、Media QueriesというCSSのルールを勉強しなければならなかったことだ。
ただ、原理的にはすごく簡単なのでCSSをかじっていれば数十分で理解できるものだと思う。
あとがき
実ははてなブログに来る前にWordPressを初めてインストールしたことがあるのだが、それと比べるとはてなブログは随分カスタマイズが楽だし、テンプレートもオシャレなものが揃っているので、はてなブログの優秀さを痛感した。
それと、まだカスタマイズは初めて行なったばかりで、ソーシャルボタンのカスタマイズなどやりたいことがあるので、また後日網羅的なカスタマイズ記事も作成していきたいと思う。(この記事から検索流入していればリライトにするかもしれない)