『LION MEDIA』カテゴリーTOPページ&記事内TOPのファーストビューを見やすくカスタマイズ

こんにちは、トッド(Todd)(@ThreeFrogblog)です。

WordPressテーマ『LION MEDIA』を使い始めてから1か月ほど経ちます。

HTMLやCSS、JSなどのコードの仕組みについて感覚的にですが、イメージするレイアウトの再現が出来るようになってきました。

そして今回、ファーストビューについて個人的に引っかかっていたレイアウト箇所をカスタマイズしてみました。

全ての変更をCSSのみでおこなっているので子テーマにコピペで使えると思います。

コードの変更は子テーマを使って行いましょう。

[code_balloon position=”right” name=”MOGAKUN” text=”それでは、いってみよ~!” img=”https://threefrog.com/wp-content/uploads/2018/08/a0557e1b0c7610f938e5a5d5bad0b60c.png”]

カテゴリーTOPページのファーストビュー変更部分について

サイトのTOPページからカテゴリーを選択すると画面いっぱいのピックアップ記事が表示されます。

[code_balloon position=”right” name=”MOGAKUN” text=”PC表示の時はちょうどスペースが空いているからあっても良い感じだけど・・・” img=”https://threefrog.com/wp-content/uploads/2018/08/a0557e1b0c7610f938e5a5d5bad0b60c.png”] [code_balloon position=”left” name=”ピーマン” text=”スマホの限られたファーストビューエリアにコレはいらないなぁ~” img=”https://threefrog.com/wp-content/uploads/2018/08/c89dfe3098f5579b2a439ac249e21066.png”]

『LION MEDIA』には、固定ページでランキング表示ができる機能があり、そっちで十分だと思うので、ここではスマホだけ非表示にする変更を行いました。

@media only screen and (max-width: 767px){

	/*カテゴリーpickup削除*/
	.categoryDescription__link{
		display: none;
	}
	.categoryDescription__item{
		display: none;
	}
	.categoryDescription__explain {
    float: none;
    width: 100%;
    padding-right: 0;
    margin-bottom: 0px;
}
}

記事内TOPのファーストビュー変更部分について

『LION MEDIA』のデフォルトでは、設定したサムネイルに対して黒い透けた背景が乗っていて、

コレはこれでカッコ良い仕様なんだけれど・・・

アイキャッチをつくる時に明るい色を使用したいと思う時に、記事タイトルが白なので読みにくい場合があるのと、アイキャッチは記事本文の最上部に置きたい派なので変更してみました。

記事タイトルのテキストカラーを黒にして、背景の画像を表示させずに背景色を白に変更することで見やすさが良くなったと思います。

[code_balloon position=”left” name=”ピーマン” text=”アイキャッチをつくる自由度UP” img=”https://threefrog.com/wp-content/uploads/2018/08/c89dfe3098f5579b2a439ac249e21066.png”] [code_balloon position=”right” name=”MOGAKUN” text=”パンくず下はひたすら削る” img=”https://threefrog.com/wp-content/uploads/2018/08/a0557e1b0c7610f938e5a5d5bad0b60c.png”]

パンくず~記事本文までは【記事上SNSボタン】【記事上広告を廃止】&要素の隙間を削って記事タイトルから本文までの間隔を縮めることでスッキリさせました。

/*記事タイトルテキストカラーを黒く*/
.heading.heading-singleTitle{
	color: #000;
	 font-size: 2.1rem;
    margin-bottom: 0px;
}

/*記事内サムネイルTOP背景*/
.singleTitle::before {
    content: '';
    background-color: rgba(255,255,255,255.30);
    background-image:none;
    background-size: 2px 2px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

あとがき

変更後の記事タイトルGoogleフォントを使用しています。

気になりましたらこちらもどうぞ▼

[code_related url=”https://threefrog.com/googlefont-implementation/”]

また、何か変更したときに追記していきたいと思います。

Fin.

コメントを残す

メールアドレスが公開されることはありません。