NEW ARTICLE
illustratorブレンドツールは使い方次第でこんなにすごい！
  1. HOME
  2. Wordpress
  3. 【CSSコピペでOK】LION BLOGの記事ビューレイアウトをレスポンシブにカスタマイズ

【CSSコピペでOK】LION BLOGの記事ビューレイアウトをレスポンシブにカスタマイズ

【CSSコピペでOK】LION BLOGの記事ビューレイアウトをレスポンシブにカスタマイズ

当ブログはLION BLOGを使用しています。シンプルで見やすいのでとても気に入っています。しかし、記事ビューレイアウト設定のところで、eyecatch画像の配置を「ワイド(default)」にするか「画像レフト」にするか悩んでいました。
「ワイド(default）」にするとスマホでは画像が大きくて見やすいのですが、PCだと画像が大きすぎてスクロールが大変です。
「画像レフト」ではPC画面はすっきりしたが、スマホだと画像が小さすぎてよく分かりません。

 

LION BLOGの記事ビューレイアウト設定をレスポンシブにカスタマイズ
↑「ワイド(default）」設定のPCのトップ画面。eyecatch画像が大きすぎる。

 

 

LION BLOGの記事ビューレイアウト設定をレスポンシブにカスタマイズ
↑「画像レフト」設定のスマホのトップ画面。今度はeyecatch画像が小さすぎる。

 

 

PCでは「画像レフト」、スマホでは「ワイド(default)」に設定したかったのですが、どうも個別には設定できないみたいです。なので、今回はCSSを少しだけいじって記事ビューレイアウトをカスタマイズしてみました。

「画像レフト」を元にカスタマイズしています。この記事を参考にカスタマイズされるかたは、「基本設定 →　記事ビューレイアウト設定 →　画像レフト」に設定して行ってください。

 

Advertisement

 

目次

PC画面のeyecatch画像を少し大きくする

 

カスタマイズ前はこちら↓
LION BLOGの記事ビューレイアウト設定をレスポンシブにカスタマイズ PC画面

 

 

カスタマイズ後はこちら↓
LION BLOGの記事ビューレイアウト設定をレスポンシブにカスタマイズ PC画面

 

eyecatch画像を若干大きくして、タイトルをその上に左揃えで表示させました。

 

カスタマイズするには以下のCSSを「追加CSS」内にコピペしてください。

/* 記事ビューレイアウトPC表示は下記設定とする */
.heading.heading-leftImg {
width: calc( 100% );
margin-bottom: 25px;
}
.dateList.dateList-leftImg {
width: calc( 50% - 20px );
}
.archiveList__text.archiveList__text-leftImg {
width: calc( 50% - 20px );
}
.eyecatch.eyecatch-leftImg {
width: 50%;
}
.btn.btn-leftImg {
float: right;
width: calc( 100% - 20px );
}

それぞれwidthの%の数字を調整するだけでお好みの大きさに設定できます。

 

 

 

スマホ画面は「ワイド(default)」設定にする

 

カスタマイズ前はこちら↓
LION BLOGの記事ビューレイアウト設定をレスポンシブにカスタマイズ スマホ画面

 

 

カスタマイズ後はこちら↓
LION BLOGの記事ビューレイアウト設定をレスポンシブにカスタマイズ スマホ画面

 

ワイド(default)設定と同じになるようにしました。
カスタマイズするには以下のCSSを「追加CSS」内にコピペしてください。

/* スマホ表示は下記設定とする */
@media only screen and (max-width: 767px) {
.heading.heading-leftImg {
width: calc( 100% );
margin-bottom: 10px;
}
.dateList.dateList-leftImg {
width: calc( 100% );
}
.archiveList__text.archiveList__text-leftImg {
width: calc( 100% );
}
.eyecatch.eyecatch-leftImg {
width: 100%;
}
.btn.btn-leftImg {
float: right;
width: calc( 65% - 20px );
}}

 

Advertisement

 

文章の行末をきれいに揃える

記事ビューレイアウトの設定ができたのでスッキリかと思いきや、もう１つきになる点がありました。それは文章の行末がきれいに揃っていないこと。せっかくきれいなデザインなのでこの際揃えましょう。

 

カスタマイズ前↓
LION BLOGの文章の行末をきれいに揃える

 

カスタマイズ後↓
LION BLOGの文章の行末をきれいに揃える

 

カスタマイズするには以下のCSSを「追加CSS」内にコピペしてください。

/* 行末を揃える */
p {
text-align: justify;
}

やっとスッキリかと思ったら、プロフィール欄が残念なことに。こちらも行末を揃えましょう。

 

カスタマイズ前↓
LION BLOGのプロフィール欄の行末をきれいに揃える

 

カスタマイズ後↓
LION BLOGの文章の行末をきれいに揃える

カスタマイズするには以下のCSSを「追加CSS」内にコピペしてください。

/* プロフィール欄の行末を揃える */
.profile__description {
text-align: justify;
}

 

これでスッキリしました！コピペするだけのとても簡単な作業ですので、皆さんも試してみてはいかがですか。