はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ

サイト内の調整をしました

記事名と
URLをコピー

サイトの細かい部分の調整をしました。

今後、サイトデザインを変えた時などに、再修正の必要があるかもしれないため、備忘録的に記事として残しておくこととします。

 バックアップとテスト用サイトを作成

ブログのバックアップをエクスポートしました。設定変更などでうっかり消えたりレイアウトが崩れたりしたら怖いので、こまめに取っておくと安心ですね。

また、デザイン変更のお試しができたらいいのにな、と思っていたら、テスト用サイトを作ればいい、と書いてあったので、やってみました。バックアップしたデータをインポートして、非公開サイトを作りました。

方法は、以下のサイトを参照しました。

romita.hatenablog.com

私がやってみた手順を画像付きで記事にまとめてみました。詳しくは以下の記事をご覧ください。

yaanon.hatenablog.com

スマホでの記事一覧の表示数を変更

アーカイブやカテゴリーなどを一覧にした際、スマホでは表示される記事の数が多いと読みづらい。そこで、表示数を減らすように調整しました。

こちらは、以下のサイトを参考にしました。

blog.wackwack.net

上記のサイトでは、トップページへ行かせず、自動でアーカイブ(記事一覧)へ飛ぶよう設定していますが、私はそれは必要ないと判断したため、後半の記事数を減らす部分だけ適用しました。(上記リンクの「アーカイブページをアーカイブします。」以下だけ適用。)

なお、一覧へ行かせるのが必要ないと判断した理由は、私の記事には都度「続きを読む」を付けているからです。いちいち付けるのは面倒ですが、好きな場所で区切れるので、私は手動で設定する方を選びました。

また、「もっと表示」と「次のページ」が紛らわしいと書いてあったので、私は「他の記事も表示する」に変えてみました。

f:id:yaanon:20201204175017j:plain

上の画像は、カスタマイズ後、スマホで5記事表示した後の状態です。

「他の記事も表示する」は、同じページ内に追加で記事が表示され、「次のページ」は、更新してから他の記事を表示する、という違いがあります。正直なところ、「次のページ」ボタンだけでも私は良いのですが…、あまりいじり過ぎずそのままにしました。 

カテゴリー記事一覧の見出し表示を変更

記事には、カテゴリー分類用のタグをつけています。ですが、一覧を表示させた際の見出しが無愛想。そこで、見出しを見出しらしくすべく、CSSを調整してみました。

参考にしたのは以下のサイトです。

focus3.hatenablog.com

ただ、このままでは私のサイトのフォントの都合上、フォルダアイコンは表示されないため、アイコンの部分だけ削除しました。また、下線の色のコードを濃い青のものに変更して、サイトタイトルの色と揃えてみました。

f:id:yaanon:20201204182157p:plain
f:id:yaanon:20201204182212p:plain
(左)ビフォー(右)アフター

最後に

いやぁ、細かいけれど色々変えました。見やすいサイトに少しは近づいたでしょうか。

記事が長くなりましたが、引用ばかりだから項目ごとにページを分けるのが申し訳なく。あと、やるなら一気にやってしまいたかったので、まとめてやって書きました。

さて、今回参考にさせていただいたブログの先輩方、ありがとうございます!私はコードの書き方は無知ですが、過去の記録がたくさん残っていて助かります。

カスタマイズの元ブログを辿っていくと、数年前のものに行き着いたり。こうして脈々と受け継がれるのだな、と感心するとともに、検索で見てもらえる役に立てる記事が書けていいな、と羨ましく思えました。

ただ私のサイト、様々なカスタマイズでCSSがごちゃついてきたので(苦笑)、追々デザイン変更をしてもいいかも…と考えています。表示を軽くしたい💦

そして、記事内にCSSを張り付けたかったのですが、うまくいかず。記事の記述方式を変更すればできるようですが、今回はCSS表記なしで公開することにしました。頑張ってみたけど無念。記述法は以下の記事で見ました。

greenkour.hateblo.jp

引き続きできることが増えるよう、調べながらやっていきます。

ここまで読んでくださりありがとうございます!

※2020年12月6日:バックアップ手順の自分の記事を追記しました。