WordPress Milliard関連記事プラグインのcssをカスタマイズ！記事幅を揃えてタイトルを全て表示！

このブログはMilliard関連ページプラグインを使用して、関連記事を表示しています。

オシャレにパネルで関連記事を表示してくれるので気に入っていますが、私のブログのアイキャッチ画像は、若干サイズがバラバラであるため、以下のように関連記事の幅が違っています。

いっそのことアイキャッチ画像の幅が全く違ったなら、ランダム表示されてかっこ良く見えるのに・・・若干のサイズのずれが、デザインをダサくしてしまっているように感じました。

そこで、記事幅を揃えるようにcssをカスタマイズしてみました！

また、タイトルも途中で切れてしまう関連記事が多かったので、全て表示するよう幅を調整しましたので、カスタマイズした内容を掲載したいと思います。

Contents

Milliard関連ページプラグインの設定
CSSの設定
- ちょっとだけ解説
変更後の関連記事の表示内容！

Milliard関連ページプラグインの設定

まずは、プラグインの設定をしていきます。

メニューから「プラグイン」－「Milliard Related Page」－「設定」から設定していきましょう。

まず、「PC／タブレット（640px以上）」を独自テンプレートにします。

挿入箇所のスクロール表示については賛否両論ありますが、今回は無効にするをチェックします。

表示件数は、記事幅によって3列表示・2列表示と自動に変更するように設定しましたので、見栄えを良くするため、2と3で割り切れる、6・12・18辺りから設定していきます。

今回は12に設定しました。

最後に、HTMLコードを入力します。カスタマイズ例を参考に設定しました。

以下のコードを挿入します。

<div class="articleContainer">
    <div class="contentContainer table">
        <div class="imgCell">
            <span class="imgContainer">
                <img class="ssImg" alt="" />
            </span>
            <div class="titleCell">
                <a class="ssTitleAnchor">
                    <span class="ssTitle">
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>

</span>

</span>

</a>

</div>

プラグインの設定は以上です。

CSSの設定

次に、CSSの設定をします。

style.cssに追記しますので、事前に子テーマのstyle.cssを用意しておきましょう。

子テーマstyle.cssの格納場所：public_html/wp-content/themes/子テーマ

追記したコードは以下のとおりです。

.imgCell{
	height:140px;/* 各記事のアイキャッチ画像を140pxに設定 */
	overflow:hidden;
}

.titleCell{
	position:absolute;bottom:0px;left:0px;/* タイトルの表示位置を設定 */
	/* 以下、タイトルに関する文字の大きさ、背景、余白等設定 */
	height:52px;
	line-height:18px;
	font-size:12px;
	padding:5px;
	background-color:rgba(68,68,68,0.8);
}

a.ssTitleAnchor{
	color: #fff;/* タイトル文字色 */
}

.ssPoweredBy a{
	padding:2px 0px !important;
}

.contentContainer:hover{
	opacity: 0.5;/* 透過率50% */
	transition: 0.2s;/* アニメーション */
	-webkit-transition: 0.2s;
}

/* 60em以下の場合 */
.contentContainer{
	width :49%; /* 記事幅を設定 横に２記事並べる */
	float:left;
	position:relative;
	border:1px white solid; /* 記事間のラインを白に */
}
/* 60em以上の場合 */
@media screen and (min-width: 60em) {
	.contentContainer{
		width :33%; /* 記事幅を設定 横に３記事並べる */
		float:left;
		position:relative;
		border:1px white solid; /* 記事間のラインを白に */
	}
}

.imgCell{

height:140px;/* 各記事のアイキャッチ画像を140pxに設定 */

overflow:hidden;

}

.titleCell{

position:absolute;bottom:0px;left:0px;/* タイトルの表示位置を設定 */

/* 以下、タイトルに関する文字の大きさ、背景、余白等設定 */

height:52px;

line-height:18px;

font-size:12px;

padding:5px;

background-color:rgba(68,68,68,0.8);

}

a.ssTitleAnchor{

color: #fff;/* タイトル文字色 */

}

.ssPoweredBy a{

padding:2px 0px !important;

}

.contentContainer:hover{

opacity: 0.5;/* 透過率50% */

transition: 0.2s;/* アニメーション */

-webkit-transition: 0.2s;

}

/* 60em以下の場合 */

.contentContainer{

width :49%; /* 記事幅を設定横に２記事並べる */

float:left;

position:relative;

border:1px white solid; /* 記事間のラインを白に */

}

/* 60em以上の場合 */

@media screen and (min-width: 60em) {

.contentContainer{

width :33%; /* 記事幅を設定横に３記事並べる */

float:left;

position:relative;

border:1px white solid; /* 記事間のラインを白に */

}

ちょっとだけ解説

cssのコードについてちょっとだけ解説します。

2行目で関連記事の画像の高さを140pxに統一しています。ブログに合わせて修正してください。
6行目から14行目までは、タイトルを表示する欄の設定をしています。タイトルが途中で切れてしまわないように、表示欄の高さを調整し、フォントサイズを小さくしました。タイトルはカスタマイズしないと2行の表示ですが、3行で表示されるようにしています。
21行目は「by Milliard」と表示される部分の余白を調整しました。文字サイズは変更できませんでした・・・。
24行目から28行目は、関連記事にマウスオーバーすると光るようにアニメーションを追加しています。
31行目から36行目はブラウザの幅が60em＝960px以下の場合の設定です。ブラウザの幅が狭くなると2列になるように設定しました。
38行目から45行目はブラウザの幅が60em＝960px以上の場合の設定です。ブラウザの幅が広くなると3列になるように設定しました。