1. プラグイン
  2. Similar Posts(関連記事表示プラグイン)のCSSカスタマイズ実例

Similar Posts(関連記事表示プラグイン)のCSSカスタマイズ実例

2011/5/1

Similar Posts」は、WordPressで関連記事を自動表示させるプラグインです。この記事は、「Similar Posts」で表示させた関連記事一覧部分のデザインをCSSカスタマイズした記録です。

「Similar Posts」の導入方法や基本的な設定方法・使い方については、下記を参考にしてください。日本語化の方法もご紹介しています。

Similar Posts のCSSカスタマイズ実例

「Similar Posts」のHTML記述内容の確認

「Similar Posts」が関連記事の表示部分に挿入するHTMLの内容は、下記手順で確認できます。

  1. WordPress管理画面[設定]>[Similar Posts]をクリック
  2. Similar Posts 設定画面の[配置設定(※日本語化していない場合は[Placement])]をクリック
  3. [記事の後の出力:(※Output after post:)]の[Parameters]の記述内容を確認

デフォルトでは、下記のコードが記述されています。

prefix=<h3>Similar Posts:</h3>
<ul class="similar-posts">&suffix=</ul>

さて、上記コードでは「Similar Posts」が表示するリスト(<ul>)タグのクラス指定に「similar-posts」というクラス名が指定されています。

当サイトでは、見出しとなる<h3>タグに対しても、他の見出しと区別ができるように「similar-posts」というクラス名を指定しました。また、1行目の「Similar Posts:」の部分を、「あわせてお読みください」に変更しています。

その結果、当サイトで設定しているHTMLは下記のようになりました。

prefix=<h3 class="similar-posts">あわせてお読みください</h3>
<ul class="similar-posts">&suffix=</ul>

このHTMLの記述内容に沿った、CSSカスタマイズの実例をご紹介します。CSSの初心者の方でもある程度基礎的な知識が理解できていれば簡単にできる内容です。

CSSのクラス指定とは?

CSSのクラス指定については、下記サイトがわかりやすいです。

CSSカスタマイズの実例

見出し部分のカスタマイズ

カスタマイズの前後でどのように変化したか、サンプルを表示させてみます。

カスタマイズ前の<h3>タグ・サンプル

カスタマイズ後の<h3>タグ・サンプル

変更した点は、次のとおりです。

  • アンダーラインを「無し」にした
  • 下パディングを「無し」にした
  • 関連記事見出し 背景画像左のような背景画像を追加した

以上の変更点を反映させるため、CSSは下記のようになりました。

h3.similar-posts {
	border: none;
	padding-bottom: 0;
	padding-left: 28px;
	background-image: url(画像の保存先);
	background-repeat: no-repeat;
	background-position: left center;
}

リスト部分のカスタマイズ

先ほど同様、カスタマイズの前後でどのように変化したか、サンプルを表示させてみます。

    カスタマイズ前のサンプル

  • 項目1
  • 項目2
  • 項目3
    カスタマイズ後のサンプル

  • 項目1
  • 項目2
  • 項目3

変更した点は、次のとおりです。

  • 背景色を変えた
  • リストごとの背景画像を変えた
ul.similar-posts {
	background-color: #FAFAD2;
}

ul.similar-posts li {
	background-image: url(画像の保存先);
	background-repeat:no-repeat;
	background-position:center left;
	padding-left: 26px;
	list-style:none;
}

以上、参考になれば幸いです。

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。