テーマにちょい足しで自分流デザインに！
このブログのデザイン
デフォルトのSmooth使ってます。
シンプルだし、2カラム右メニューだし、レスポンシブデザインに対応しているし、コンテンツの文字幅も十分取れるのでこれに。
当初はヘッダ画像や背景などを設定した最小限のカスタマイズとしていました。
物足りない
書いて見ているうちに、シンプルすぎてモノタリナイキモチになってしまった。
他のテーマも見たみたけどしっくりこない。
全体的な話なので画像をどうこうして何とかなる感じでもない。
ならばカスタマイズだ！ということでカスタマイズを開始。
サイドバーの見出しに絵文字を入れてみた
PCやタブレット等の幅広環境ならコンテンツの右側、スマホ等ではコンテンツの下に表示されるサイドバー。
サイドバー内各要素のタイトルが文字サイズくらいしか違いが無かったので、頭に絵文字を入れてみた。
などなど。
文字だけなのでカスタマイズとしては簡単。
Windows 11なら「Windowsキー＋［.］キー」で絵文字入力できる。
絵文字は環境によって見た目が違うので絵柄よりも意味を重視して選ぶようにした方がいい。
まだ物足りない
絵文字で飾ったくらいではやはりモノタリナイ。
画像駆使して飾り立てるのはコストがかかりすぎるので、やはりCSSカスタマイズに手を出すことに。
この先はWeb開発についての知識がある程度必要なのでご注意！
とりあえず初期状態で設定されているデザインCSSをコピーしてバックアップ取っておこう。
戻せば戻る。
デザインCSSをいじくるための基礎知識
HTML Standard、CSS4（一部5）、ブラウザの開発者ツールを使える知識があればまあなんとかなる。
独自の知識としては「デザインCSSに最初から設定されている内容は必須項目なので残しておくこと」くらいなもんかな。
フォントを変えてみた
記事を眺めているうちに、フォントをもっと自分好みに変えてみたくなった。
Webフォントなら適用できるようなので早速探しに。
Webフォントを探す
まずはGoogle Fontsで自分好みのWebフォントを探す。
とは言っても日本語Webフォントは数が少ないので、言語を「Japanese」にして一覧から探す方が楽。
50種程度であればざーっと見れるので、行ったり来たりしながら見比べる。
ページ上のSentenceにテキスト入れればそれで表示されるので見比べやすい。
ぼくは「Kosugi Maru」が気に入ったのでクリックして選択。
まずは念のためライセンスを確認。
ページ右上の「About & license」をクリック。
Apache License v2なので、今回の利用パターンでは問題なしとぼくは判断。
気になる方はご自分で判断を。
Webフォントをリンクする
Webフォントをブログへ適用するためにはふたつの作業が必要。
ひとつ目の作業はWebフォントを利用できるようにブログへリンクする設定。
Webフォントのページ右側にある「Use on the web」の「To embed a font, copy the code into the <head> of your html」で「<link>」を選択し、その下に出てきたlinkタグ群をコピー。
次にブログの「設定 → 詳細設定」と進み、「<head>要素にメタデータを追加」の箇所に貼り付け。
ページ下部の「変更する」ボタンを押して確定。
これでWebフォントのリンク完了。
Webフォントを適用する箇所をCSSで指定する
ふたつ目の作業はWebフォントを適用する箇所のCSSを記述。
ブログのカスタマイズで「デザイン→カスタマイズ→デザインCSS」を展開し、下記のコードを追記。
.entry-title,#content,.hatena-module-title {
font-family: Kosugi Maru, sans-serif !important;
}すべてのフォントを変えてしまうのは何か違うと思うので、ブログコンテンツに絞って適用する形。
- クラス「entry-title」はブログの件名
- ID「content」はコンテンツ本文全体
- クラス「hatena-module-title」はサイドバーの見出し
これらのフォントが Kosugi Maru になるよう !important で強制設定するわけです。
クラスやIDはテーマによって違うかもしれないので適宜変更を。
まとめ
ちょっとしたアクセントなら絵文字を置くだけでもいいかも。
フォントはブログ全体の雰囲気に影響するので変更するとより自分らしく。
おかしくなってもいじった設定を変更前に戻せばいい。
次回以降では、よりCSSカスタマイズしたり、CDN使ったプラグインを利用したりな部分をまとめていこうかなと。
はてなブログは以前のWordPress.comよりも柔軟なカスタマイズができるんで楽しいです！
「このブログのデザインをカスタマイズしてみた件」まとめはこちら。
