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カラム」にしてください。
「外観 > カスタマイズ > 記事設定 > 投稿ページの設定 > デザイン一括設定 > 記事一覧 | カードデザイン」
