おはようございます!自分のはてなブログをガシガシ弄りたいけど、どちらかといえば会社ブログの WordPress をガシガシ弄っている @sys_nakamura です。ようやく少しはてなブログの見た目カスタマイズに着手することができました。
なので今回の記事はカスタマイズしたことについて書きたいと思います。
今回紹介したいのは「グローバルヘッダーの色を変える」手順と「アイキャッチ画像を角丸にする」手順です。夜中にけっこういろいろな部分に手を加えたのですが、一気にやったので情報がまとまっていません。少し整理しながら小出しにカスタマイズ記事書いていきたいと思います。
グローバルヘッダーの色を変える
私が現在使っているテーマは Brooklyn というテーマです。白と黒が基調になっていてシンプルイズベストなテーマになっています。
それに合わせるようにはてなブログを表示した際に一番上に表示されるグローバルヘッダー (バー) の色も変更しました。表示自体を消すことも考えましたが、グローバルヘッダー自体は個人的に動線として役立っているので残しておくことにしました。
グローバルヘッダーの色変更手順
以下のコードを CSS に記述するだけで色変更することができます。
上記のコードをはてなブログの「ダッシュボード」→「デザイン設定」→「カスタマイズ」→「デザインCSS」に貼り付けます。
以上でグローバルヘッダーの色変更作業は完了です。
アイキャッチ画像を角丸にする
私は PC ビューでもスマホビューのように記事一覧とアイキャッチ画像がリストで表示されるようにトップページを開くと archive へリダイレクトするように設定しています。 (SEO 的にはよろしくないかもですがそうしています)
PC から見てもトップページはこのようにアイキャッチ画像 + 記事タイトル + 抜粋文だけが表示されるようにしています
トップページを記事一覧 (archive) 表示にする方法はこちらのブログ記事が参考になります。
上記のように PC ビューでもアイキャッチ画像をリストで表示していると感じるのですが、デフォルトではスマホビューと違ってアイキャッチ画像に丸みがないので少しゴツゴツした雰囲気になってしまいます。
なので CSS を少し弄って PC ビューでもアイキャッチ画像は角丸で表示されるようにしてみました。
アイキャッチ画像を角丸で表示するための手順
こちらの手順も以下のコードを CSS に記述するだけで変更することができます。
上記のコードをグローバルヘッダーの色変更と同じように、はてなブログの「ダッシュボード」→「デザイン設定」→「カスタマイズ」→「デザインCSS」に貼り付けます。
以上でアイキャッチ画像を角丸にする手順は完了です。少し丸みがでました。
まとめ
ようやく少しはてなブログのカスタマイズに着手することができました。まだまだ手付かずのところが多いですが、引き続きやれるときにカスタマイズして情報をじっくりまとめてカスタマイズ記事もしたためていきたいと思います。今回変更した箇所は細かい部分にはなりますが、そういった箇所を少し弄るだけでもサイト全体の印象はなんとなく変わるものですね。
こんな記事も書いています