ブログをカスタマイズ　その２

以前、ブログをカスタマイズしたことを書きましたが、あれからかなり手を入れたのでまとめておこうと思います。

全体

Googleフォントの導入

Googleフォントのさわらびゴシックを導入しました。そのままコードを貼り付けるとエラーが出てしまったのですが、下記の記事を参考にして解決しました。

Font Awesomeの導入

アイコンフォントを使いたくて、Font Awesomeを導入しました。アニメーション用のスタイルシートもありますが、多分使わないので導入は見送りました。

ヘッダー

タイトルロゴ作成

ロゴメーカーを利用してタイトルロゴを作成しました。最初は自作しようと思ってたんですが、フォントをあれこれインストールするよりもこちらのほうが楽なので。作成したらヘッダーガジェットからロゴをアップロードして終了です。

記事一覧

サムネイルのサイズ変更

サムネイルが小さすぎると思ったのでサイズを変更しました。

投稿記事内容

文字のデザイン

見出し、リスト、引用、太字の見た目をCSSで整えました。例えば太字ならこんなふうになります。細かいところはちょこちょこ変えるかも。

目次自動生成

そんなに見出しつきの文章は書かないと思うので悩んだのですが、この記事のように全く書かないわけでもないので目次を自動生成するスクリプトを導入しました。参考にしたのは下記の記事です。

SNSシェアボタン

利用させて頂いてるテーマQooQでは、記事の上下にSNSシェアボタンがあります。そのうち上のシェアボタンを外して下だけにしました。また、シェアボタンのデザインもちょこっといじってます。

サイドバー

プロフィール

Bloggerには基本情報というプロフィール的なガジェットがあるのですが、そのままでは情報を追加できないのでHTML/JavaScriptガジェットを追加して、プロフィール用のHTMLを書きました。

アーカイブ

アーカイブをプルダウンメニューにしてCSSで見た目を整えました。階層やフラットリストだと、長くブログを続ければ続けるほどだらだら長いリストになってしまうので。

実はラベルもプルダウンにしようかどうか迷ったのですが、こちらはすべてのラベルが見えているほうが視認性が良いと思ったのでクラウド表示のままにしてます。

ブログ内検索

ブログ検索ガジェットを追加すれば簡単にブログ内検索フォームを追加できるのですが、CSSで見た目を整えようとしたら面倒くさかったのでHTML/JavaScriptガジェットに検索フォーム用のHTMLを書いて設置することにしました。一応検索は問題なくできているようなのでこれでいきます。

その他

ソースコードを書くときに見栄えを良くしてくれるhighlight.jsを導入するかどうかで迷ったのですが、書く機会ができたときでいいやということで今回は見送りました。これで大体カスタマイズは終わったかな。年内に終わって良かった…。実は某所で今年中にカスタマイズを終わらせる宣言してたので(汗)

追記

サイトマップ自動生成

記事一覧があれば便利かなということで、自動で記事一覧を生成してくれるウィジェットを使ってサイトマップの固定ページを作成しました。下記の記事にあるウィジェットをお借りして、見た目はCSSでちょこっといじってます。(2020.12.7追記)