ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。
ちなみにブログカスタマイズの記事まとめは4回目です。
これまでのまとめ記事はこちら。
直近のブログカスタマイズはCSS、HTML、JavaScriptと、多岐にわたる感じになりました。
ということで、投稿した記事をまとめていきます。
CSS、HTML、JavaScript関連
画像を縁取りする（影を付ける）
こちらは、ブログに貼った画像を縁取りする（影を付ける）ように対応した記事です。
この対応をする前は画像1つ1つを加工して縁取りしていたので、けっこうな手間でした。
作業自体は単純だったのですが、単純だったために退屈な作業でした。
また、画像を縁取りしないとブログの文章部分と画像部分の境目がなくて分かりにくくなってしまいます。
上記のような状況を、ちょっとしたCSS対応で解消できて良かったです。
今適用している影を付けた縁取りのデザイン、けっこう気に入っています。
記事に見送った案（クッキリした枠線）も残していますが、今のデザインを継続で。
追従する目次をサイドバーに表示する
こちらは、追従する目次をサイドバーに表示するように対応した記事です。
この対応は参考サイトを見たりネットで調べつつも、JavaScript・CSSそれぞれ自力で実装しました。
コード量もぼちぼちあるので、適用までけっこう時間を要しました。
苦労の甲斐あって、この機能はけっこう便利に活用できています。
目次がついてくるので、ブログの下書きの時やブログの内容を見返す時に、全体を見渡しやすくて便利です。
目次のリンク先とグローバルナビゲーションが被るので対策
こちらは、目次のリンク先とグローバルナビゲーションが被らないように対策した記事です。
目次のリンク先とグローバルナビゲーションが被っていたのは、先ほど紹介した「追従する目次をサイドバーに表示する」の対応中に気づきました。
この対策は最終的にCSSプロパティ（scroll-padding）を設定するだけで解消できました。
ですが実は、その対策に辿り着くまでけっこう右往左往してました。
ネットで調べても「scroll-padding」の存在にすぐには辿りつけず、他の対策案をアレコレ試行錯誤していました。
色んなページを渡り歩いて、たまたま「scroll-padding」の存在を知り、最終的に「scroll-padding」を設定してサクッと対応できました。
最終的に、拍子抜けするほど簡単な対応になりました。
「うまく検索できていれば、こんなに右往左往することもなかったのに…」という感じでした。
スマホ版のグローバルナビゲーションを変更してみる
こちらは、スマホ版のグローバルナビゲーションを変更してみた記事です。
おそらく、これまでのブログカスタマイズの中で一番コード量が多いかなと思います。
この対応はスマホのみに適用されるカスタマイズです。
普段はPCからブログを書いているので変化を感じないのですが、たまにスマホからブログを確認すると変化を実感します。
やはりメニューは上でなく下にあった方が操作しやすいなと。
とりあえずは凝りすぎず、シンプルなデザインで適用してみました。
あとは使っていって、デザイン調整したり、機能追加したりしていこうかなと思います。
はてなブログ関連
Canvaで作成したアイキャッチ画像を保存して使いまわす
こちらは、Canvaで作成したアイキャッチ画像を保存して使いまわす方法を手順化した記事です。
Canvaとはてなブログの連携の流れがちょっと独特に感じたため、手順化してみた感じです。
自分用のアイキャッチ画像が何個か決まってきたので、またしばらくしたらマンネリを感じそうです。
もしそうなったら、改めてCanvaのテンプレートから探してアレンジしてみようと思います。
おわりに
ということで、ブログカスタマイズの記事まとめでした。
ブログカスタマイズ関連の記事は合計で20記事書きました。（まとめ記事は除く）
もう少し、ブログカスタマイズの記事は書きそうな気がします。
またなにかしら変更したら引き続き記事にします。
関連記事
これまでのブログカスタマイズまとめ記事をリストにしました。
気になる記事があればぜひ。
