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

ブログ運営日記アイキャッチ

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

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

目次

最適化

  • 画像サイズが中途半端になっていたものを修正
  • 画像タグに width, height を記述(作業中)
    • 画像に loading="lazy" をつけているため、サイズを指定してないと画像が表示される瞬間に画像下コンテンツの移動が発生してしまう
    • 今まで面倒でサイズ書いてなかった
  • 画像タグに alt 属性を記述(作業中)
  • robots.txt に Disallow: /search/label/ を追加
    • ブログタイトル「リモスキブログ」で自分のブログを検索したら、6個中4個のサイトリンクに、すでに使っていないラベルのラベルページが表示されてた
    • クリックすると「(ラベル名)に一致する投稿はありませんでした」のページが表示される。なんてこった
    • とりあえず、使ってないラベルをすべて削除(下書き記事に設定されてた)
    • 上記の記述でラベルページへのクロールを拒否してみた
      →追記:存在しているラベルページは表示されても問題ないので、クロール拒否はやっぱり解除。Google Search Console で、使っていないラベルページを削除依頼。一週間ほどでサイトリンクは入れ替わっていた
    • 使ってない固定ページも念のため削除
  • body タグに ontouchstart="" を追加
  • hover のエフェクトをスマホでは active に変換
  • -webkit-text-size-adjust: 100%; を指定

高速化

デザイン

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

その他

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

ブログに画像を載せるときに知っておきたいこと

今回は、画像をブログに載せるときの注意点を紹介します。 画像を適切に載せることでページ表示速度の向上が見込めますし、SEO 効果も期待できます。

記事へのコメント・ご質問は こちら まで
NEXT PREV