Simplicityの関連記事はサムネイルを3列・4列に表示する機能が備わってます。その画像にタイトルを重ねると、スッキリして見えたのでSimplicity2仕様のスタイルをCSSだけで作成しました。
Simplicity2で関連記事の表示タイプを変更する設定
ダッシュボード『外観』より『カスタマイズ』を選択し、『レイアウト（投稿・固定ページ）』をクリックしたら、下へスクロール。
- 関連記事表示タイプ
- デフォルト
- サムネイル3列
- サムネイル4列
3列・4列にすると、画像の下に記事タイトルの文字列が表示されます。全文見えて内容がわかりやすいですが、スッキリさせ画像にタイトルを重ねて表示させました。
親テーマの更新を考えPHPファイルを一切触らずにできるところが便利ですよね。初期設定後あまりカスタマイザーを触らないので、気付きにくいかもしれません。
3列か4列、好みのサムネイルを選んだら、推奨表示数を変更してください。
3列なら12・9・6個など、4列なら12・8・4個と設定したら、『保存して公開』をクリックします。※記事数に応じ個数を選ぶと、ランダムに関連記事が表示される感じ。
画像上に重ねてタイトルor画像下の領域にタイトルを置くか。見た目の違いを比較
Simplicity2の3列
右上がonマウスしたものです。
上記画像のスタイル変更する際、画像上にタイトルを置くか、画像下の領域にタイトルを置いたほうが良いか、スタイルの違いを比べて好きなスタイルを使ってくださいね。
画像上にタイトルを重ねたスタイル
コチラは3列ですが、4列でも対応できます＾＾
画像下の領域にタイトルを置いたスタイル
onマウスした場合は右上。
実際のhoverアクションWindowsのChromeで見た画面での比較は次。
画像下に置いた場合、1列目と2列目にスペースがありますが、修正用のスタイルも準備してます。
画像にタイトルを重ねて置くカスタマイズ
Simplicity2では、3列の場合サムネイルの幅・高さとも200px。4列の場合は160pxと指定されてます。
その画像にタイトルをすべて表示すれば、せっかくの画像が隠れるので、画像の大きさに合わせ、タイトルを2行分だけ表示させるようにカスタマイズしました。※文字の大きさはデフォルトのままの16pxに合わせてます。
/*********************
関連記事
*********************/
/*各画像の領域の指定：大きな親要素*/
.related-entry-thumbnail {
position: relative;
height: 200px; /*4列のときは160pxで指定*/
margin-left: 13px; /*左外側余白*/
margin-right: 13px; /*右外側余白*/
}
/*各画像の領域指定：親要素*/
.related-entry-title {
width: 200px; /*4列の時は160pxに変更*/
height: auto;
position: absolute;
bottom: 0;
background: #000; /*タイトルの背景*/
line-height: 1.4;
opacity: 1; /*背景色を薄く画像を見せたいとき0.85など指定*/
margin-bottom: 0;
border-radius: 0 0 10px 10px; /*角丸指定*/
}
/*エントリータイトルのホバー色*/
.related-entry-title:hover {
background: #fff; /*タイトルにマウスを置いた時の色*/
opacity: 0.85; /*背景色を透明に：1が通常透明なし*/
}
/*エントリータイトルのリンク*/
.related-entry-title .related-entry-title-link {
margin-bottom: 0;
color: #fff !important; /*リンクの文字色*/
font-size: 0.8em; /*文字の大きさ：変更したら高さも変更する*/
display: block;
height: 2.2em; /*フォントサイズ・paddingにより指定変更すれば2行きれいに表示できる*/
padding: 0.5em 0.3em;
}
/*タイトルのリンクをonマウスした時の指定*/
.related-entry-title .related-entry-title-link:hover {
color: #000 !important; /*ONマウスで黒*/
font-weight: bold; /*フォントの太さ：太く*/
}
/*画像を囲む線の指定*/
#related-entries .thumbnail-entry-thumb-image,
#related-entries .thumbnail-entry-no-image {
border: 1px #000 solid; /*画像を囲む枠*/
}
表示は下記のとおりです。
上記コードで、PC：Chromeで見ると、このスタイルに。
CSSだけで、スマホビューでも3列で表示させたい
PC要素の検証で表示した横幅320px：iPhone
メディアクエリを使って、幅が狭い画面からみて2列、1列になっていくのがどうしても嫌だな。。ってことでしたら、スマホビューで3列に表示させる方法をご紹介。
※個人的には、画像・タイトルがみにくくなるのでオススメしませんが、需要があったので追記しますね＾＾
/*************************
3列専用：最大***pxの横幅指定
指定内容は、上記CSSにて説明
*************************/
@media screen and (max-width: 754px) {
.related-entry-thumbnail {
margin-left: 10px;
margin-right: 10px;
}
}
@media screen and (max-width: 716px) {
.related-entry-thumbnail {
margin-left: 3px;
margin-right: 3px;
}
}
@media screen and (max-width: 656px) {
.related-entry-thumbnail img {
width: 150px;
height: 150px;
}
.related-entry-thumbnail {
width: 150px;
height: 150px;
}
.related-entry-title {
width: 150px;
}
.related-entry-title .related-entry-title-link {
font-size: 0.7em;
height: 2.4em;
}
}
@media screen and (max-width: 506px) {
.related-entry-thumbnail img {
width: 140px;
height: 140px;
}
.related-entry-thumbnail {
width: 140px;
height: 140px;
}
.related-entry-title {
width: 140px;
}
.related-entry-title .related-entry-title-link {
font-size: 0.6em;
height: 2.3em;
}
}
@media screen and (max-width: 474px) {
#related-entries .related-entry-thumbnail {
margin-left: 5px;
}
.related-entry-thumbnail img {
width: 120px;
height: 120px;
}
.related-entry-thumbnail {
width: 120px;
height: 120px;
}
.related-entry-title {
width: 120px;
}
.related-entry-title .related-entry-title-link {
font-size: 0.5em;
word-break: break-all; /*長い英文などの文字を単語途中でも改行*/
}
}
@media screen and (max-width: 420px) {
#related-entries .related-entry-thumbnail {
margin-left: 1px;
}
}
@media screen and (max-width: 408px) {
.related-entry-thumbnail img {
width: 105px;
height: 105px;
}
#related-entries .related-entry-thumbnail {
width: 105px;
height: 105px;
}
.related-entry-title {
width: 105px;
}
}
@media screen and (max-width: 363px) {
.related-entry-thumbnail img {
width: 100px;
height: 100px;
}
#related-entries .related-entry-thumbnail,
.related-entry-thumb,
.related-entry-thumb a,
.thumbnail-entry-thumb-image,
.thumbnail-entry-no-image {
width: 100px;
height: 100px;
}
#related-entries .related-entry-title,
#related-entries .thumbnail-entry-thumb-image,
#related-entries .related-entry-content {
width: 100px;
}
}
@media screen and (max-width: 339px) {
.related-entry-thumbnail img {
width: 93px;
height: 93px;
}
#related-entries .related-entry-thumbnail,
.related-entry-thumb,
.related-entry-thumb a,
.thumbnail-entry-thumb-image,
.thumbnail-entry-no-image {
width: 93px;
height: 93px;
}
#related-entries .related-entry-title,
#related-entries .thumbnail-entry-thumb-image,
#related-entries .related-entry-content {
width: 93px;
}
}
上記のコードは、下記のように表示されます。※PCのChromeの環境のみ確認。他のデバイスでみれば違った表示になる場合も考えられる。
EdgeのPCで確認した画像の様子
モバイル横幅320pxが一番小さい幅です。※320以下はPC上では2カラムになる程度
PCで320px幅を指定した環境は、上記の通り。※テスト環境とこのブログでの表示例
関連記事の画像が右側に偏るときの対処
このカスタマイズを推奨していないのは、見にくい以外に3列専用で作っているわけではないからです。そのため、レスポンシブ使用に作られているコードを、強引に3列にしているから、右側に偏ります。※メディアクエリで（かなり）強引に表示させた感じ。
- ただし、細かく指定すれば修正が可能❦
エントリー画像の左右のmarginを同じサイズなどで指定してください。
その時、あなたのブラウザの横幅を指定しないと、全てズレますので、自分の使っている機種が何pxか検索必須
@media screen and (max-width: ***px) {
.related-entry-thumbnail {
margin-left: **px;
margin-right: **px;
}
}
- 1行目：機種の横幅pxを指定
- 3・4行目：任意のサイズ指定
全ての環境で同じ見た目にはなりません。別のデバイスで見ると違って見えることもあるので、メディアクエリで最大何pxか指定。
更新を行うと、古いスタイルが表示されるので、キャッシュを削除後、更新して確認を＾＾
また読まれたOS横幅によってことなるので、どのサイズ幅を指定するかは、下記のように指定します。
@media screen and (max-width: 740px) {
/*ここにスタイルを書く*/
}
@media screen and (max-width: 740px)など指定し、画面の真ん中に合うようmargin-left、margin-rightを指定するなど。
ユーザーさんがどの横幅での流入が多いか、アナリティクスで確認してみるのも良いかもしれませんね＾＾
画像下の領域にタイトルを置いたスタイル
画像上に重ねてタイトルを置くとシンプルな画像ならハエるけど、ばあいによって画像が見にくいと感じることもあるので、もう1つのスタイルを置いておきますねっ。
画像直下にタイトルバージョンです。
/*********************
関連記事
*********************/
.related-entry-thumbnail {
margin-left:13px;
margin-right: 13px;
}
.related-entry-thumb .thumbnail-entry-thumb-image,
.related-entry-thumb .no-image {
border-radius: 10px 10px 0 0; /*画像上のみ、角丸の指定*/
}
.related-entry-title {
background: #000;
line-height: 1.4;
opacity: 1; /*透かし必要なら0.8など指定*/
margin-bottom: 0;
border-radius: 0 0 10px 10px; /*タイトル下の角、丸く指定*/
margin-top: 10px; /*画像とタイトルをくっつける指定*/
}
.related-entry-title:hover {
background: #fff;
opacity: 1;
}
.related-entry-title .related-entry-title-link {
margin-bottom: 0;
color: #fff !important; /*リンクの色*/
font-size: 0.8em; /*リンクの文字の大きさ0.8文字分*/
display: block;
height: 2.2em; /*3.5emで3行、4.9emで4行表示*/
padding: 0.5em 0.3em; /*上下 左右の内側余白*/
}
.related-entry-title .related-entry-title-link:hover {
color: #000 !important;
font-weight: bold;
}
#related-entries .thumbnail-entry-thumb-image,
#related-entries .thumbnail-entry-no-image {
border: 1px #000 solid;
}
上記コードの見え方
画像下の領域にタイトルを置いたスタイル
画像＋タイトル下にある、スペースが気になる場合。下記を追記してください。元の高さは292px。2.2emの指定だから2.2×1文字分を292pxから引いた、だいたいの数字を指定すればいい感じになりますよ。
.related-entry-thumbnail {
height:256px; /*292-2.2×1文字の大きさ*/
}
追記した場合のスタイル。hoverアクションは右上
関連記事、リンクのフォントサイズ変更について
関連記事エントリータイトルのリンクの文字サイズを変更するなら、height・paddingを調整する必要があります。任意の数字を指定してください。見切れて良いなら省略可。
- 1文字が何pxかによって変わるので、文字とpaddingの単位を1em：1文字分を指定済みです。自分で計算を頑張るばあい。
- 画像サイズpx・画像のボーダー左右px・padding左右の指定em・文字サイズemの算数をする
- 実際数字を入れて見た目の確認をするなどの方法をとる。
反映しないときは、キャッシュの削除。それ以外の原因は下記をどうぞ。
.related-entry-title .related-entry-title-link {
color: #fff !important; /*リンクの色*/
font-size: 0.8em; /*リンクの文字の大きさ0.8文字分*/
height: 2.2em; /*3.5emで3行、4.9emで4行表示*/
padding: 0.5em 0.3em; /*上下 左右の内側余白*/
}
- フォントサイズや内側余白paddingを変更しなければ
関連記事のリンク表示行数、デフォルト2行を変更したい
行数の変更は可能で、上記コードと同じ場所の高さ指定を変更すれば反映します。文字数などのバランスを考えて1行でも何行でも指定してくださいねっ＾＾
.related-entry-title .related-entry-title-link {
height: 2.2em; /*3.5emで3行、4.9emで4行表示*/
}
height: 3.5em;と指定すれば3行、height: 4.9em;で4行。※文字の大きさはデフォルトのままの16pxに合わせてます。上述と同じ指定を変更した数値に適当にあわせて表示したらうまくできますよ！楽しんでカスタマイズしてくださいね❦
さいごに
関連記事のスタイル変更は、複数のPHPを編集しなきゃダメだ・・・。と思ってました。Simplicity2のカスタマイザーからの設定を眺めてたら、デフォルト以外に色んなスタイルがあらかじめ用意されてて、何て便利なの！っと驚きました＾＾
機能が多くどこにどんな機能があるか分かりにくいけど、見つけるとカスタマイズがほぼ完成してるので、助かりますよねっ。
ユーザーが見やすくなるよう様子を見て、また変更が必要なら説明をチェックしてカスタマイズしてください。
この記事の大元は、Simplicityのトピック『関連記事のカスタマイズについて』を見たことでした。ついアレコレと試してみたくなり、カスタマイズに時間をとりました。でも触ると勉強になるし、たのしいですね＾＾
それでは、かうたっくでした。
Comments