LION BLOGのstyle.cssをいじってデザインを変更する

WordPressでは「外観－テーマエディター」でCSSを変更して画面のデザインを変更することができます。

※2019/09/29 当サイトではCocoonのテーマを使用しています。

人気記事のアイキャッチ画像を小さく左に表示する

LION BLOGでは、サイドバーウィジェットに人気記事を設定するとアイキャッチ画像がワイドで大きく表示されます。ちょっとスペースがもったいない気がするので、最近の投稿のように小さく左に表示するように変更してみます。ついでに角丸と影も付けてみます。

/* アイキャッチ画像 */
.eyecatch{
	overflow:	inherit;	/* 画像の横に説明 */
}
.eyecatch img{
	border-radius:	5px;		/* 角丸 */	
	box-shadow:	5px 5px 5px rgba(0,0,0,0.4);	/* 影 */
}
/* 人気記事の行 */
.rankListWidget__item{
	display:	inline-block;	/* 1記事毎に改行 */
}

/* 人気記事のアイキャッチ画像 */
.rankListWidget__item img{
	width:		90px;		/* イメージの横幅 */
	height:		90px;		/* イメージの縦幅 */
	float:		left;		/* 左に整列 */
	object-fit:	cover;		/* 画像の縦横倍率維持*/
}

/* 記事のタイトル */
.rankListWidget__title a{
	width:		calc(100% - 10px);	/* 横幅 */
	float:		right;		/* 右寄せ */
}

/* 投稿日、カテゴリ */
.dateList.dateList-widget{
	margin-left:	100px;		/* 左位置 */
}
.dateList-widget .dateList__item{
	font-size:	1.1rem;		/* フォント */
}

アイキャッチ画像

.eyecatch はアイキャッチ画像全体のクラスなので、投稿ページなど他のアイキャッチ画像の表示にも影響します。人気記事だけにしたい場合は、 .eyecatch-widget の img タグに設定します。

画像の横に表示するために overflow を hidden から inherit にします。

img タグの border-radius で角丸、 box-shadow で影付きになります。

人気記事の行

.rankListWidget__item は人気記事の行全体のクラスです。1記事毎に改行するように display を inline-block にします。

アイキャッチ画像のサイズなどは img タグで指定します。 width、height を 90px 、左に整列するように float を left 、画像の縦横倍率を維持するために object-fit を cover にします。

記事の説明

.rankListWidget__title は記事のタイトルなど説明のクラスです。アイキャッチ画像と説明を 10px 離して横に表示するために、 width を calc(100% – 10px) に、 float を right にします。

投稿日とカテゴリも同じように表示するために、 .dateList.dateList-widget クラスの margin-left を 100px にします。

ついでに .dateList-widget .dateList__item クラスの font-size を 1.1rem にして少しフォントを小さくしました。

前次記事にも角丸と影付き

前次記事のアイキャッチ画像は .eyecatch クラスではなく .prevNext__imgLink クラスを使っているのでここで設定すると、前次記事も角丸、影付きになります。

/* 前次記事のアイキャッチ画像 */
.prevNext__imgLink{
	border-radius:	5px;	/* 角丸 */	
	box-shadow:	5px 5px 5px rgba(0,0,0,0.4);	/* 影 */
}

フッタの「Page to Top」を固定表示にカスタマイズする

次はフッターの「Page to Top」をカスタマイズします。LION BLOGではこの「Page to Top」ボタンでページの1番上に戻る事ができるのですが、フッタが表示されるまで出てこないので、常に右下に表示して操作性を向上させます。

/* フッタの「Page to Top」を固定表示 */
.pagetop{
	position:	fixed;
	width:		40px;
	height:		40px;
	line-height:	40px;
	right:		10px;
	bottom:		10px;
	border-radius:	5px;
	opacity:	0.6;
	color:		#0e3d69;
}
.pagetop:hover{
	opacity:	1;
}
.pagetop::before{
	top:		16px;
}
.pagetop:hover::before{
	top:		9px;
}
.pagetop__link::before{
	position:	absolute;
}

pagetopクラス

width、height、line-height、right、bottom で位置、サイズを指定、 border-radius で角丸、 opacity で透過にします。

color は「Back to Top」の文字を消すために背景と同じ色にしました。文字そのもを変更する場合は、 footer.php を子テーマにして変更する必要があります。

hover 疑似クラスでマウスオーバー時の透過を戻します。

before 疑似要素で上矢印の位置を指定します。

hover 疑似クラスの before 疑似要素でマウスオーバー時の上矢印の位置を指定します。

ちなみにスマホの場合は指を離したときに hover が作動します。なので一旦タップするとその後はずっと hover 状態になります。

できれば position sticky にしてスクロールに合わせて固定表示したいところですが、 Internet Explorer が未対応なので単純な固定表示の position fixed にしました。スクリプトを使う方法もありますが、 Internet Explorer のためだけに苦労する気がしないので、Microsoftさんが対応してくれるのを待ちます。

pagetop__linkクラス

a タグのクラスです。 before 疑似要素で position fixed になっていて画面全体にリンクが効いてしまうので absolute にします。

まとめ

ちょっとした変化かもしれませんが、これだけでもサイト全体の印象はずいぶん変わったと思います。他のサイトを参考に気になったレイアウトがあったら、CSSをいじってどんどん挑戦していきたいですね。