Similar Posts ”Output template:”（出力テンプレート）HTML CSS (スタイルシート)コード設定

出力テンプレート：html/CSS

「Similar Postsから出力される関連記事にサムネイル画像を表示させる。」で、Similar Posts の 関連記事をサムネイル画像と一緒に出力できた。この”Output template:”（出力テンプレート）へ設定した、 html,CSS (スタイルシート)コードについて、半年後の（忘れている）自分への覚え書きにしておく。

htmlコードにCSSをインラインで一緒に設定している。cssファイルへ定義することもできるが、プラグインから使ってるhtmlなので、おのおののファイル関係がわかりにくくなる。一緒に書いておいた方が保守しやすい。それでは、詳しい設定を見ていく。

html/CSSコード

下が設定したhtml/CSSコード全体だ。

<div>タグで２つに分けてある。

• 画像レイアウト設定のhtml・css
• 記事タイトル・最終更新日レイアウトのhtml・css

画像とタイトルの部分を分けて書くことで、微調整をやりやすくした。
それでは、おのおのの内容を見ていく。

画像レイアウト設定

1:<div style=”height:60px;width:70px;border:0px;padding:2px ;float:left;margin:0px 10px 5px 10px;”>
2:    <img style=”max-height: 60px ;max-width: 60px;margin:0 0 0 0;　padding:0 0 0 0;” src={imagesrc}>
3:</div>

一行目は画像の配置領域のレイアウトをスタイルシートで定義している。設定内容は下の通り。

1:<div style=”height:60px;width:70px;border:0px;padding:2px ;float:left;margin:0px 10px 5px 10px;”>

• height:60px;
  • 領域の高さを60px
• width:70px;
  • 領域の幅を70px
• border:0px;
  • 領域の枠線を書かない設定
• padding:2px ;
  • 内側余白を2px設定
• float:left;
  • 画像をフロートとし、文字が右側に回り込む設定
• margin:0px 10px 5px 10px;
  • マージンを上0、下10px、左5px、右10px に設定。下は10pxで次のリストとの間隔を、右は10pxで記事タイトル部との間隔を調整している。画像と記事タイトルの位置関係を微調整した。

2:    <img style=”max-height: 60px ;max-width: 60px;margin:0 0 0 0;　padding:0 0 0 0;” src={imagesrc}> 

２行目は画像自体をスタイルシートで定義している。設定内容は下の通り。

• max-height: 60px
  • 画像最大高さを60pxにする。
• max-width: 60px
  • 画像最大幅を60pxにする。
• margin:0 0 0 0
  • マージンを0pxにするように明示した。設定しないとテーマのスタイルシート設定が有効となり、画像位置がずれる。
• padding:0 0 0 0
  • 内側余白を0pxにするように明示した。設定しないとテーマのスタイルシート設定が有効となり、画像位置がずれる。
• src={imagesrc}
  • Similar Postsの専用タグ{imagesrc}で画像URLを取得し、imgタグに渡している。

3:</div>

• 1行目のスタイルシート有効範囲 終了。

 記事タイトル・最終更新日レイアウト

4:<div style=”height:60px;border:0px;padding:2px ;margin:0px 10px 5px 10px;”>
5:        <div style=”padding:0px 0 0 0;”>
6:        {link}
7:        </div>
8:    {date}
9:</div>

4行目は記事タイトル・最終更新日の領域をスタイルシートで定義している。

4:<div style=”height:60px;border:0px;padding:2px ;margin:0px 10px 5px 10px;”>

• height:60px
  • 領域高さを60pxに設定
• border:0px
  • 領域の枠線を書かない設定
• padding:2px
  • 四方の内側余白を2pxに設定。文字配置を微調整した。
• margin:0px 10px 5px 10px
  • マージンを上0、下10px、左5px、右10px に設定。画像領域と同じ配置になるように設定した。

5行目は記事タイトルの位置を微調整するための行。何度も試したが内側余白を0pxにした時が良かった。再調整することを考えてコードは残してある。また、コードを削除すると、このzbenchテーマの場合はテーマに設定されているCSSの影響を受けて位置がずれた。

5:        <div style=”padding:0px 0 0 0;”>

6行目はSimilar Postsの専用タグ{link}で記事タイトルおよびリンクを取得。
6:        {link}

5行目のスタイルシート有効範囲 終了。
7:        </div>

8行目はSimilar Postsの専用タグ{date}で最終更新日を取得。
8:    {date}

4行目のスタイルシート有効範囲 終了。
9:</div> 

以上が設定したhtml・CSSコード。画像サイズやテキスト配置は好みも有るだろう。

• height
• width
• padding
• margin

CSSを使っており自由に配置できる。これらのパラメータで調整できるので、繰り返し調整してお気に入りの配置を見つけてほしい。

プラグインの標準設定のままだと、テキストリンクだけになる。サムネイル画像を一緒に表示しても、しなくても機能的には変わらない。しかし、読んでもらっている人へのアピール効果は大きく違うだろう。目に留めてもらってこそSimilar Postsの機能だ。上手にプラグインが持つ力を使っていきたい。