ブログ運営日記 vol.6　この１ヶ月で実施したブログ工事の内容

８月から約１ヶ月間、時間をかけてブログに種々の変更を加えました。いやーなんか、ブログを始めてから今まで気づいてなかったこともたくさんあって勉強になりました。

以前の記事と一部重複する内容もありますが、一気にまとめておきます。

目次

• 最適化
• 高速化
• デザイン
• その他

最適化

• 画像サイズが中途半端になっていたものを修正
  • 参考：Google Chromeの画像ぼやけ問題を解決する。Blogger独自の解消法も。｜リモスキ！
• 画像タグに width, height を記述（作業中）
  • 画像に loading="lazy" をつけているため、サイズを指定してないと画像が表示される瞬間に画像下コンテンツの移動が発生してしまう
  • 今まで面倒でサイズ書いてなかった
• 画像タグに alt 属性を記述（作業中）
• robots.txt に Disallow: /search/label/ を追加
  • ブログタイトル「リモスキブログ」で自分のブログを検索したら、６個中４個のサイトリンクに、すでに使っていないラベルのラベルページが表示されてた
  • クリックすると「（ラベル名）に一致する投稿はありませんでした」のページが表示される。なんてこった
  • とりあえず、使ってないラベルをすべて削除（下書き記事に設定されてた）
  • 上記の記述でラベルページへのクロールを拒否してみた
    →追記：存在しているラベルページは表示されても問題ないので、クロール拒否はやっぱり解除。Google Search Console で、使っていないラベルページを削除依頼。一週間ほどでサイトリンクは入れ替わっていた
  • 使ってない固定ページも念のため削除
• body タグに ontouchstart="" を追加
• 参考：iphoneで2回タッチしないとリンクが飛ばない時の対処方法 | オランダで生きていく
• 自分のスマホ（iPhone）でブログ閲覧中、リンクを１回タップしただけじゃなぜか飛ばないときがたまにあった
  → 追記：当ブログのカスタマイズによるものだったため現在は解消。上記記述も削除
• この関連でスマホでも hover のエフェクトが効くようになり、タップ時の見た目の問題から transition をすべて削除
• hover のエフェクトをスマホでは active に変換
• 参考：CSSの擬似クラス :hover をスマホのときに :active に自動で変更するJavascript | Design Studio LEVEL.7
• スマホでの hover の挙動を調べていると、hover のエフェクトについてスマホでも有効にしたい派、スマホでは無効にしておくべき派、スマホでは active にした方が良い派があるようだった。何が最適か検討する間、とりあえず active にしてみる
• -webkit-text-size-adjust: 100%; を指定
  • 参考：text-size-adjust: 100%;を指定すればスマホを横向きにしても文字が大きくならなくなる - Qiita

高速化

• Font Awesome を SVG 化
  • 参考：FontAwesomeをSVGで使用する【JavaScriptなし】 - バグ取りの日々
• 記事一覧ページネーションのスクリプトを変更
  • 参考：【軽量＆高速】Blogger用ページネーションを作成しました | IB-Note
• 関連記事のスクリプトを変更
  • 参考：Blogger用の関連記事表示を改良しました | IB-Note
• 個別記事と記事以外で、ページごとに CSS を出し分け
  • 参考：ブログを高速化しました | ふじろじっく
• CSS、JavaScript を圧縮
• ShareThis のスクリプトを取り外し
• highlight.js をインライン化
  →追記：コード掲載ページは少ないので、highlight.js は思い切って取り外し

デザイン

• ブログタイトルのロゴを SVG 形式で作成
  • 参考：ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法｜リモスキ！
• サイドバーのプロフィールエリアの背景画像を SVG 形式で作成
• サイドバーのカテゴリーエリアをボックスナビに変更
• トップページ記事一覧・個別記事タイトル周りのデザインを変更
  • タイトル・ラベルを中央寄せにしてみた
  • hover のエフェクトも変更
• トップページ記事一覧のサムネイル画像を正方形に変更
  • 画像も１：１の比率で指定
  • １：１に指定すると、-p-k-no-nu がつく仕様になってる...（前から？ 前はそうじゃなかったような）。気に入らないけど１：１にした方が体感ページ表示が速い気がするのでとりあえずそうしておく
• 記事の見出し、サイドバーガジェットの見出しのデザイン変更
  • サイドバーの見出しにつけてた Font Awesome のアイコンは、SVG 化のときに面倒で取り外した
• 記事トップのアイキャッチ画像サイズを変更
• ブログカードのデザイン変更
• highlight.js で表示されるコードの色を変更
  →追記：highlight.js は取り外したので、ポイントとなるような箇所のみ手動で赤字でハイライトした
• リンク青文字色の変更
  • 参考：【2021年最新データ】主要サイトのテキストリンク色比較 - Naifix
• 外部リンクに自動でアイコンをつける
  • 参考：CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法 | 株式会社レクタス

その他

• 目次の自動表示スクリプトを取り外し
  • 目次表示までの時差を解消できず、手動で作成することにした（作業中）
  • 時差により目次表示時に本文がガクンと移動するのを避けたかった
• 目次クリック時のスムーススクロールを取り外し
  • ページ読み込み完了前に目次を押すと結局スムーススクロールが効いてなかったりしたので
• 特定ラベルの記事一覧ページを作成 → Blogger 関連の記事一覧
  • 参考：みんな忘れてしまうんだ: bloggerで特定ラベルの投稿一覧を出す version 2
  • 追記：テンプレートを変更したら動かなくなってしまったようなので、非表示にしました。
• 投稿日・更新日のスクリプトを変更
  • 参考：Bloggerに最終更新日を表示させる2020 [ for Widget version 1 ]-すたすた式
  • time タグが使われているのがなんか良さそうだった
• ナビゲーションのガジェットを「ページ」から「リンクリスト」に変更
  • 「ページ」ガジェットだと、固定ページに変更を加える度にガジェット内のページタイトルが書き換えられて不便だった
• all-head-content タグをカスタマイズして直接記述
  • 参考：head内のメタデータをカスタマイズ | ふじろじっく
  • OGP 画像のリサイズ目的で実施（all-head-content タグと入れ替える形にしないと効かない）
  • デフォルトだと OGP 画像の URL に自動的に w1200-h630-p-k-no-nu が追加されるが、この p のトリミングがまったく気に入らない！ 中央を意識してサムネイルをつくっても、トリミングが合ってないんだよ...
• 全記事を見直しながらリライト
  • 関連する内部リンクを設置
  • 画像のない記事に、画像を少し追加
  • 文字装飾を減らした。初期の記事で赤字と黄色マーカーが多用されてて読みにくかった