はてなブログカスタマイズの記録①～ヘッダー～
当ブログは新しいブログに移転しました。
5秒後に新しいブログに切り替わります。
今後とも引き続きよろしくお願いいたします。
simplecore.site
生業がWEBのデザイナーということもあって、HTMLとCSSは一般の方よりも知識があります。
このはてなブログを初めてまだ何日も経っていませんが、割りとカスタマイズ性が高いのに驚きました。僕が無料ブログをいじっていたのはもう何年も前ですし、それからはずっとWordpressやMovableTypeぱかり（仕事でですが）。昔の無料ブログってこんなに色々出来なかった気がするんですが。それだけ、WEB制作の敷居が低くなってきたということでしょうか。
それでも、やはり最後の微調整は’（多少とはいえ）専門的な知識が必要なのも事実。自分がやりたいこと、デザインしたいことはどのようにすれば実現できるのかわからない、だけどどのように調べたら良いのかもわからない、という方も意外といらっしゃるのではないでしょうか？
そんな方達の役に立つようなエントリーになれば良いと思います。まあ、もっとわかりやすく、詳しい説明は他にもたくさんありますが。
まずはヘッダーをカスタマイズすることに
多くのブログの場合、そのブログの顔と言っても過言でないヘッダー。特に無料ブログの場合ですと、ヘッダーとメインビジュアルを一緒にした場合が多いので、そのブログの印象を左右する重要な要素となります。
で、今回は手軽にそのヘッダーの雰囲気をカスタマイズする方法を。
ブログのカスタマイズというとやはりデザイン作業がメインになってくるかと思いますが、何も配色を考えたり、Photoshopでオシャレな画像を作ってヘッダーに配置したりするだけがデザインではありません。
現在の僕のブログは、はてなで用意しているテーマを選んで、背景色を変えて、タイトル周りのフォントを変えているだけです。それだけでもシンプルなデザインが好きな僕には充分なものが出来上がっています。
カスタマイズの方法
テーマはNaked というテーマで、「管理画面」の「デザイン」から背景色を選びます。
それがこの状態。
もちろん、この状態でも全く悪くありません。とてもキレイなデザインかと思います。
ただ、個人的にタイトルのフォントが少し気になったので、少し他のフォントを当てたパターンも見てみたいと思い、いくつか試してみました。
WEBフォントをつかって簡単にフォントを変えてみる
こんなとき便利なのがWEBフォント。特にGoogleからはきれいな日本語のWEBフォントも提供されているので、CSSを記述するだけで気軽に試すことが出来ます。
今回僕が選んだのは「さわらび明朝」というフォント。
まずは外部CSSの読み込み
適用方法は非常に簡単で、こちらのページの右下部分、HTMLと書かれた下にある
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
を全てコピー。
それを、はてなブログのダッシュボードから「設定」＞「詳細設定」と進んでいき、「検索エンジン最適化」という項目内の「headに要素を追加」とあるテキストボックスに貼り付けます。これで外部CSSの読み込みはOKです。
CSSでフォントの指定
次は、「このブログのタイトルの部分にはこのフォントをつかう」という指定をCSSで記述します。
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
を全てコピーし、ダッシュボードの「デザイン」>「カスタマイズ」>「デザインCSS」に貼り付けます。
ブログのタイトルのタグやid、classを調べる
これだけではタイトル周りのフォントは変わりません。先ほどコピペしたCSSをブログのタイトル周りに適用させてあげる作業が必要です。
ではどのように適用させるのか？
まずフォントを変えたい部分（今回の場合はタイトル周り）のタグやid、classを調べます。ちなみに、タグやid、classの説明は他のきちんとしたサイトがいくらでもあるので、そちらで調べた方が早いです。
僕はchromeの開発者ツールでサクッと調べます。開発者ツールの使い方も、丁寧に書かれたサイトが探せばいくらでも見つかると思います。例えばこんなの。
ちなみに、僕が選んだテーマでは、
タイトル（<h1>）のIDが
#title a
サブタイトル（<h2>）のIDが
#blog-description
だったので、先ほどのCSSを
#title a,
#blog-description{
font-family: "Sawarabi Mincho";
}
という風に修正します。
それを反映させたのがこちらになります。
どうでしょうか？だいぶ雰囲気が変わっているかと思います。ポップ寄りなシンプルから、少し大人シンプルな方向に転んだのではないでしょうか？
しっかりした無料ブログこそカスタマイズは簡単
と、まあ文章にすると結構長くなってしまうんですが、実際の作業時間は5分程度です。フォントを選ぶのに少し時間がかかったくらいでしょうか？たったこれだけでブログの雰囲気を変える事が出来ます。
ここで間違いなく言えるのは、はてなのようにしっかりしたブログサービスの場合は、カスタマイズも簡単ということです。
これからも少しずつ見た目に手を加えていくので、それらをまとめながら記事にしていければと思っています。
