THE SONIC 記事一覧のバイラルデザインをちょっとスタイリッシュに

3 min

THE SONIC の記事一覧表示「バイラル」のデザインを変更するカスタマイズです。

記事のアイキャッチ画像の上に白いタイトル文字が浮かんでかっこいいですよね。

ただ、全体的に暗いトーンになってしまうのが気になるところです。

アイキャッチ画像の色合いを残しつつ、タイトルも読み取りやすくしてみましょう。

あわせて日付と、ハートのいいねボタンも見やすくします。

ビフォー
アフター

マウスを上に乗せる(ホバー)とタイトルが透過されます。

アニメ

style.css を編集

THE SONIC の子テーマ内の「style.css」に以下のコードを追記します。

style.css

/*--------------------------------------
記事一覧デザイン
--------------------------------------*/
.viral-mode .kiji-img {
	border-radius: 5px;
}

.viral-mode .kiji-img:after {
	background: rgba(0,0,0,0.25);
}

.viral-mode .kiji-img:hover:after {
	background: rgba(0,0,0,0.05);
}

.viral-mode .linkarea:hover .kiji-text {
	opacity: 0.4;
}

@media (max-width: 767px) {
	.viral-mode .kiji-img:after {
		background: rgba(0,0,0,0.2);
	}
}

.viral-mode .kiji-text {
	width: 80%;
	padding: 1em;
	border-radius: 5px;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	background: linear-gradient(45deg, rgba(2,177,195,0.4) 0%, rgba(2,177,195,0.7) 100%) no-repeat 50% 50% / 100% 100%;
	text-shadow:
    rgba(0,0,0,0.2) 2px 0px,  rgba(0,0,0,0.2) -2px 0px,
    rgba(0,0,0,0.2) 0px -2px, rgba(0,0,0,0.2) 0px 2px,
    rgba(0,0,0,0.2) 2px 2px , rgba(0,0,0,0.2) -2px 2px,
    rgba(0,0,0,0.2) 2px -2px, rgba(0,0,0,0.2) -2px -2px,
    rgba(0,0,0,0.2) 1px 2px,  rgba(0,0,0,0.2) -1px 2px,
    rgba(0,0,0,0.2) 1px -2px, rgba(0,0,0,0.2) -1px -2px,
    rgba(0,0,0,0.2) 2px 1px,  rgba(0,0,0,0.2) -2px 1px,
	rgba(0,0,0,0.2) 2px -1px, rgba(0,0,0,0.2) -2px -1px;
	transition: 500ms;
}

.viral-mode.kijicolumn-1 .kiji-text,
.viral-mode.kijicolumn-1 .kiji-date,
.kijicolumn-1.viral-mode .main-kiji .kiji-share .iine-btn {
	background: none;
	text-shadow: none;
}

.viral-mode.kijicolumn-3 .kiji-text {
	width: 90%;
	padding: .2em;
}

/*日付*/
.viral-mode .kiji-date time {
	letter-spacing: 0.1em;
}

.viral-mode .kiji-date, .viral-mode .main-kiji .kiji-share .iine-btn {
	color: #fff;
	text-shadow: 0 0 3px #000;
	opacity: 0.8;
}

/*いいねボタン*/
.viral-mode .iine-btn-img {
	color: hotpink;
}
色を変更するには

記事タイトルの背景色を変更するには .viral-mode .kiji-text の background 内の rgbaの値を変更して下さい。

background: linear-gradient(45deg, rgba(2,177,195,0.4) 0%, rgba(2,177,195,0.7) 100%) no-repeat 50% 50% / 100% 100%;

#02B1C3 などの16進数カラーコードをRGBに変換するには以下のサイトが参考になります。

下の画像ように白っぽくするにはこちらのコードを使って下さい。

style.css

background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 100%) no-repeat 50% 50% / 100% 100%;

白くする

カスタマイズを適用

THE SONICの設定で「バイラル | 2カラム」か「バイラル | 3カラム」にしてください。

カスタマイズ

「外観 > カスタマイズ > 記事設定 > 投稿ページの設定 > デザイン一括設定 > 記事一覧 | カードデザイン」

THE SONIC カスタマイズ記事

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事の依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

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