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

LION BLOGカスタマイズ

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 タグで指定します。 widthheight を 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をいじってどんどん挑戦していきたいですね。

コメント

  1. 瀬戸なつめ より:

    こんにちは。
    Lionblog を使用しているので参考に書き換えをさせて頂きました。

    質問なんですが、もしよろしければサイドバーの最新記事も同じようなカスタマイズをしたいと思っているのですが、教えていただくことは可能でしょうか。

    • Leo より:

      当記事を参考にして頂き、ありがとうございます。
      「最近の投稿」は、元々アイキャッチ画像が左に小さく表示されているので、角丸と影を表示する方法でよろしいでしょうか?

      以下の記述を追加するとできます。
      ///////////////////////////////////////////////////
      /* 最近の投稿のアイキャッチ画像 */
      .imgListWidget__borderBox {
      overflow: inherit; /* 影 */
      }

      .imgListWidget__borderBox img {

      border-radius: 5px; /* 角丸 */
      box-shadow: 5px 5px 5px rgba(0,0,0,0.4); /* 影 */
      }
      ///////////////////////////////////////////////////

      ただし、これだけだと既存のアニメーションが邪魔になるので、以下のようにホバー時に拡大するように変更するといいと思います。
      ///////////////////////////////////////////////////
      .imgListWidget__borderBox img:hover {
      transform: scale(1.2); /* ホバー時に拡大 */
      }
      /* 既存のアニメーション無効 */
      .imgListWidget__borderBox:before,
      .imgListWidget__borderBox:after,
      .imgListWidget__borderBox > span:before,
      .imgListWidget__borderBox > span:after {
      content: none;
      }
      .imgListWidget__borderBox:hover:before,
      .imgListWidget__borderBox:hover:after,
      .imgListWidget__borderBox > span:hover:before,
      .imgListWidget__borderBox > span:hover:after {
      animation: none;
      }
      ///////////////////////////////////////////////////

      間違ってたらごめんなさい。

      他にも質問等ありましたら、遠慮なくコメントください。

タイトルとURLをコピーしました