Jetpack2.9で追加された「関連記事」をCSSで弄ってみた 1


所要時間: 7

Jetpack2.9で追加された「関連記事」をCSSで弄ってみた

こん**は、@wine_and_webことhirok-kです。

かゆいところに手が届くプラグインJetpack for WordPressが2.9にバージョンアップし、待望の関連記事機能が追加されました。デフォルトのままですと、いささか味気ないのでプラグインを直接触るのではなく、CSSでデザインを弄ってみることにしました。

デフォルトの「関連記事」での表示

この画像のように、タイトル画像、記事タイトル、カテゴリー名を1つにまとめとしたものが横に並ぶ形となっています。

Jetpackでの関連記事表示例

もちろんデフォルトのこのままでもOKなのですが、カテゴリー名を外したい、抜粋を入れたい、デザインを変えたいなどしたいですよね。

「関連記事」で追加されるソース

Jetpack2.9(以下単にJetpackと表記します)の「関連記事」をONにすると以下のようなJS/CSSとHTMLソースが自動で追加されます。

JS/CSSの指定

通常であれば、ヘッダ領域に次が追加されています。

HTMLコード

HTMLコードは投稿記事の末尾に追加されています。

生成されるHTMLコード

実際には以下のようなHTMLコードが生成されてます。

そこで、この生成されたHTMLとデフォルトのCSSを参考にこれをCSSで弄ることとします。

「関連記事」のデザインを変える

タイトルを変える

タイトルはデフォルトで「関連」としかされていないため、これを変更します。
幸いなことにemタグで囲まれているので、まずこれを消します。

次に表示したいタイトルをこれに加えます。

これで変更ができました。

もしタイトル前にアイコンフォントなどでアイコンを付けたい場合は、次のように指定したアイコンフォントを表示します。

WordPressで投稿が捗るプラグイン5つで紹介したTable of Contents Plusでは、Jetpackの関連記事機能で生成されるh3タグで囲まれた「関連」という文字列を拾ってしまうことがあります(設定によって異なります)。
そこでアドバンス設定でこれを除外設定にしておく必要があります。

TOC+での除外設定

記事ごとに装飾をする

幸いなことに各記事はdivで囲まれているため、それを使ってそのままボーダーをつけるなど装飾することが可能です。例えばこのサイトで使用しているものを例としてあげますと、こんな感じです。

注意すべき点が1つあります。
デフォルトのCSSでは、横幅が33%とパーセンテージ指定されているため、場合によってはサイトレイアウトとの兼ね合いがうまくいかない恐れがあります。
そこで幅を指定することになるのですが、レスポンシブテーマを使用している時にはそれが問題となる可能性もありますので、CSSで指定する際にはくれぐれもご注意ください。
もし問題がでた際には、下記をつかってでスマホやタブレット向けのCSSを記述してください。

画像のサイズを変更する

画像は一旦Jetpackの機能であるPhotonを通じて、サムネイルに指定した画像をもとに吐出されています。例えば、このような形です。

リサイズされるサイズは指定されてしまっているので、ここではCSSでのみ画像サイズを変更します。

幅、または高さのみ指定し、残りをautoに指定するとデフォルトのrelated-posts.cssではパーセンテージ指定されているためレイアウトが崩れる恐れがありますので、ご注意ください。
なおmin-widthは必要ない方もいらっしゃるでしょうが、念の為ここでは指定しています。

Jetpack Photonで使用できる引数

画像は一旦Jetpackの機能であるPhotonを通じて、サムネイルに指定した画像をもとに吐出されています。というのを見て、ピン!と来た方がいらっしゃるかもしれません。
そうです、Photonに渡す引数によって様々な画像を生成することが可能なのです。ここで脱線とはなりますが、その使用できる引数を簡単にご紹介します。

なお直接プラグインを編集せずにこの引数を使用するには、リアルタイム検索置換を行えるWordPressプラグインで紹介したReal-Time Find and Replaceを使用することで可能になります。

引数 説明
?w= 幅を指定します。
高さは、元画像の縦横比をくずさずに元画像の幅と同じ比率で自動設定されます。
指定できる数値は、デフォルトではピクセル(px)で単位は省略可能です。パーセンテージも使用可能ですが、使用する際は単位%を数値とともに明示する必要があります。
?h= 高さを指定します。
幅は、元画像の縦横比をくずさずに元画像の幅と同じ比率で自動設定されます。
指定できる数値は、デフォルトではピクセル(px)で単位は省略可能です。パーセンテージも使用可能ですが、使用する際は単位%を数値とともに明示する必要があります。
?crop=x,y,w,h 切り取りを指定します。
画像左上隅をx=0,y=0として切り取りスタート箇所をxとyで指定し、wとhで幅と高さを指定します。
指定できる数値は、デフォルトではパーセンテージ(%)で単位は省略可能です。ピクセル(px)も使用可能ですが、使用する際は単位pxを数値とともに明示する必要があります。
?resize=w,h リサイズを指定します。
元画像の縦横比に関係なく、画像全体を幅をw高さhで指定して大きさにリサイズします。
指定できる数値は、ピクセル(px)のみで単位は省略可能です。
?brightness= 輝度を指定します。
元画像の輝度を基準値0として、黒となる-255から白となる255の間の数値を指定します。
?contrast= コントラストを指定します。
元画像のコントラストを基準値0として、-100から100の間の数値を指定します。

この他にも様々な指定が可能で、詳しくはこちらのページをご覧ください。

抜粋を表示する

抜粋はデフォルトのrelated-posts.cssで消されてしまっているので、表示したい場合は、次のように指定します。

もちろんdisplayに使用できる他の値、例えばinlineなどを指定することも可能です。

カテゴリー名を消す

カテゴリー名はデフォルトでは表示されているので、これを消したい場合は次のように指定します。

まとめ

ただでさえ便利なJetpack for WordPressに関連記事機能が付加され、さらに至れり尽くせりのプラグインとなりましたが、プラグインを弄らなくてもかなりデザインを変えることが可能です。
ぜひ参考にしていただければ幸いです。

コメントを書いてみませんか?