ブログカスタマイズの雑談BLOG

記事にタグを設定した場合、そのタグをクリックすると「タグ一覧ページ」が開きます。
タグは記事に付けることができますが、画像にも付けることができます。



試しに画像にタグを付けてみました。
で、そのタグをクリックしてみたら、画像が並んだタグ一覧ページが表示されました。





これって画像にタグを付けなければ表示されないページなわけです。
並んでいる画像の右余白が気になりますね。
なんかもう、ヒドイですね（笑）



右余白は気になるんですが、もう色々と編集するのはやめにして（例えば「1行に4個のサムネイル画像を表示する」とHTML上には記述されていますが、それを5個にするとかそういう作業はやめて）、単純に画像のサイズを大きくすることで余白を埋めたいと思います。

タグ一覧ページのサムネイル画像サイズを変更する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「tag-photos__item」というclassを探します。この「tag-photos__item」一連が、タグ一覧ページのサムネイル画像部分です。
この中に「140px」と書かれた島が3つあります。





「140px」がサムネイル画像のサイズですので、左右の余白を見ながら適当に変更してください。
この数値を変更することで、画像のサイズを小さくしたり大きくしたり好きなようにできます。
色々とやってみましたが「160px」が丁度いい感じです。
ちょっと画像がデカいような気がするんですが（笑）、私は画像に対してタグを付ける予定はありませんので、もうこれでいいですｗ
「140px」という数値すべて（5個すべて）を、お好きなサイズに変更してください。

コード編集後のタグ一覧ページのサムネイル

次の記事の紹介

次の記事では、ページ案内リンク「もっと見る」の表記を変更する方法を説明します。