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>タグで2つに分けてある。

  • 画像レイアウト設定の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}> 

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

  • 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の機能だ。上手にプラグインが持つ力を使っていきたい。

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告