記事内ファーストビュー画像のバイラルとブラーのデザインを変更

1 min 55 views

記事のトップに表示されるファーストビュー画像。THE SONIC では3種類の演出方法が選択できます。

記事編集画面の投稿の属性から変更可能です。

  • デフォルト
  • バイラル
  • ブラー

くわしく知りたい場合はこちらで確認してください。

記事のタイトルが非常に見にくいのでカスタマイズしてみましょう。

そのままのほうが見た目はかっこいいのですが、見やすさ重視の変更です。

  1. 記事タイトルを下にずらす
  2. 文字色を明るく
  3. 背景色を設定して見やすく

記事のタイトルがど真ん中だと画像が見えないのですこし下にずらしました。

/*--------------------------------------
記事内ファーストビューバイラル
--------------------------------------*/
.eyecatching-mark1 .entry-title {
	opacity: 0.85;
	top: 70%;
}

/*--------------------------------------
記事内ファーストビューブラー
--------------------------------------*/
.eyecatching-mark2 .entry-title {
	background: rgba(0,177,195,0.6);
	top: 70%;
}

背景色はrgbaで指定することで、透過することができます。

適用前

バイラル

ブラー

ブラー前

カスタマイズ適用後

バイラル

バイラル

ブラー

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です