WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?

      2021/02/16   1146文字

今回は、このサイトとかでも使っているwebサイト作成ツール『wordpress(WordPress )』で、デザイン上気になった点を修正できたお話をいたします。
201608051
恐らく、各種ブログサービスに変わって、(web業界以外でも)主流になるかもしれないツールですが、デザイン変更の難易度はどうでしょうか?さっそく見ていきます。

作業実施前の、管理人のWordPress の問題点ってどこだったの?

大抵のWordPress テーマ(ブログでいう、テンプレート)って、サイドカラムに月ごとのアーカイブが標示されるんですが、
201608052
記事が増えてくるとこのように下に長くなり、見栄え的に微妙。これをどうにかして短くしたいと思います。(少し、CSSやPHPの知識が必要になる部分があります)

ではアーカイブのデザインを短く調整!今回は『CSSオーバーフロー』&『PHPアーカイブ出力タグ』を使用するよ

この記事で、管理人が使った方法は、わりと簡単かもしれません。テーマは『スティンガー』ですけど、他のテーマでも『sidebar PHP』というファイルはあると思うので、できそうです。

まずは、サイドバーウィジェットから、アーカイブをはずしておきます

201608053
なぜかというと、今回やる方法でやった場合、『CSSがサイドウィジェット全体に適応された』というのがあるからです。アーカイブだけ独立してやれるように、外してあとから出力します。

アーカイブのレイアウトを制御するclassを指定して、CSSを書きます

201608054
縦の長さ(height)を決めて、はみ出る分はオーバーフロー(scroll またはauto)で。
archive-overflowクラスに、height:400px; background-color:#f0f8ff; overflow:auto;と書きました。

sidebar PHPにさっき書いたCSS対応のclassを入れ、そこにアーカイブ出力タグを入れます

201608055
これで、サイドバーウィジェットから独立して、アーカイブにCSS適応できるようになります。
(<?php wp_get_archives(‘type=monthly’); ?>と書きました。これが月別アーカイブを出力するタグです。ちなみにかっこの部分は特殊文字になってます。)

結果は・・・
201608056
短くなりました。リストの横丸が必要ない場合は、これもCSSでエディットしてください。他にも効率のよいやり方があるかもしれませんが、これは結構簡単にできました。


【カテゴリ】 - CSS, webサイト制作関連
【タグ】 -

  関連記事

【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単
WPカスタムフィールド~記事にthe_metaでフィールド出力&評価つける・get_post_metaとの違い
【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok
【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法
ランキングサイト:ブログ村で、複数のブログをひとつのアカウントで管理する方法
【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい
スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)
bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える
ワードプレスホームページ制作『ブログ記事投稿ページ・固定ページ』使い分け