サイトの細かい部分の調整をしました。
今後、サイトデザインを変えた時などに、再修正の必要があるかもしれないため、備忘録的に記事として残しておくこととします。
バックアップとテスト用サイトを作成
ブログのバックアップをエクスポートしました。設定変更などでうっかり消えたりレイアウトが崩れたりしたら怖いので、こまめに取っておくと安心ですね。
また、デザイン変更のお試しができたらいいのにな、と思っていたら、テスト用サイトを作ればいい、と書いてあったので、やってみました。バックアップしたデータをインポートして、非公開サイトを作りました。
方法は、以下のサイトを参照しました。
私がやってみた手順を画像付きで記事にまとめてみました。詳しくは以下の記事をご覧ください。
スマホでの記事一覧の表示数を変更
アーカイブやカテゴリーなどを一覧にした際、スマホでは表示される記事の数が多いと読みづらい。そこで、表示数を減らすように調整しました。
こちらは、以下のサイトを参考にしました。
上記のサイトでは、トップページへ行かせず、自動でアーカイブ（記事一覧）へ飛ぶよう設定していますが、私はそれは必要ないと判断したため、後半の記事数を減らす部分だけ適用しました。（上記リンクの「アーカイブページをアーカイブします。」以下だけ適用。）
なお、一覧へ行かせるのが必要ないと判断した理由は、私の記事には都度「続きを読む」を付けているからです。いちいち付けるのは面倒ですが、好きな場所で区切れるので、私は手動で設定する方を選びました。
また、「もっと表示」と「次のページ」が紛らわしいと書いてあったので、私は「他の記事も表示する」に変えてみました。
上の画像は、カスタマイズ後、スマホで5記事表示した後の状態です。
「他の記事も表示する」は、同じページ内に追加で記事が表示され、「次のページ」は、更新してから他の記事を表示する、という違いがあります。正直なところ、「次のページ」ボタンだけでも私は良いのですが…、あまりいじり過ぎずそのままにしました。
カテゴリー記事一覧の見出し表示を変更
記事には、カテゴリー分類用のタグをつけています。ですが、一覧を表示させた際の見出しが無愛想。そこで、見出しを見出しらしくすべく、CSSを調整してみました。
参考にしたのは以下のサイトです。
ただ、このままでは私のサイトのフォントの都合上、フォルダアイコンは表示されないため、アイコンの部分だけ削除しました。また、下線の色のコードを濃い青のものに変更して、サイトタイトルの色と揃えてみました。
最後に
いやぁ、細かいけれど色々変えました。見やすいサイトに少しは近づいたでしょうか。
記事が長くなりましたが、引用ばかりだから項目ごとにページを分けるのが申し訳なく。あと、やるなら一気にやってしまいたかったので、まとめてやって書きました。
さて、今回参考にさせていただいたブログの先輩方、ありがとうございます！私はコードの書き方は無知ですが、過去の記録がたくさん残っていて助かります。
カスタマイズの元ブログを辿っていくと、数年前のものに行き着いたり。こうして脈々と受け継がれるのだな、と感心するとともに、検索で見てもらえる役に立てる記事が書けていいな、と羨ましく思えました。
ただ私のサイト、様々なカスタマイズでCSSがごちゃついてきたので（苦笑）、追々デザイン変更をしてもいいかも…と考えています。表示を軽くしたい💦
そして、記事内にCSSを張り付けたかったのですが、うまくいかず。記事の記述方式を変更すればできるようですが、今回はCSS表記なしで公開することにしました。頑張ってみたけど無念。記述法は以下の記事で見ました。
引き続きできることが増えるよう、調べながらやっていきます。
ここまで読んでくださりありがとうございます！
ブログの設定を調整しました。
— やぁのん (@yaanon_21) December 4, 2020
バックアップとテスト用サイトを作成／スマホでの記事一覧の表示数を変更／カテゴリー記事一覧の見出し表示を変更
#はてなブログ
サイト内の調整をしました - はんこキャプターやぁのんhttps://t.co/f70z8ulCnS
※2020年12月6日：バックアップ手順の自分の記事を追記しました。
