webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/02/16

今回は、このサイトとかでも使っている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で車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも

今回は、もはや何でもある感じのWordPressプラグインで、『 ...

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示

今回は、WPのカスタムフィールドを、実践的に取り扱ってみます。ま ...