THE THOR ザ・トールバイラル風タイトル(ブラックメッシュ)の微調整

2020-12-142021-07-06

当ページのリンクには広告が含まれています。

THE THOR といえば「バイラル風タイトル」

このカッコ良さに惹かれ購入した人も多いのではないでしょうか？

正直「バイラル風」って何？調べてみましたがよくわかりませんでした。言葉的には「ウイルス（virus）のように広まっていく様子を表現」らしい。それがなぜこのデザインにつながるのか？？？よくわからないけどカッコいい。それで良しとします。

この記事を書いたのは…: からあげ棒です。THE THOR を発売直後から使用。WordPressは2015年から。グラフィックデザイナー10年、オンラインショップ3年、現在は力仕事をこなしつつ空いた時間に自社サイトを担当。Adobe系ソフト/Mac歴は20年over。技術や知識ではなく経験と時間でゴリ押しするタイプのデザイナー。

THE THOR バイラル風タイトルについて

記事タイトルの基本的なデザインは3種類あります。そのうちの一つが「バイラル風」

「バイラル風」にも種類があり、ここで扱うのは「バイラル風」の「ブラックメッシュ」になります。他のデザインや基本的な記事タイトルの設定についてはこちらの記事をご覧ください。

THE THOR バイラル風タイトル(ブラックメッシュ)の微調整

では今回のカスタマイズを見ていきましょう。

まず、THE THOR 標準のバイラル風(ブラックメッシュ)

これが標準

これを次の画像のように変更します。

カスタマイズ後

どうでしょうか？見やすくなったと思います。

※右側アイキャッチ画像のサイズを変更しているため縦幅が変化しています。
※この記事では右側アイキャッチ画像のサイズ変更は解説していません。

THE THOR バイラル風 (ブラックメッシュ)のカスタマイズCSS

マスクのブラックを濃くする
タイトル文字にシャドウを付ける
タグなどの情報欄を黒系に変更
スマホ表示時のタイトル文字を大きくする

上記のように先程の参考画像では複数のカスタマイズを行っています。ひとつずつ見ていきましょう。

全てのカスタマイズは追加CSSにコードを記述して行っています。

操作手順
外観 → カスタマイズ → 追加CSS

マスクのブラックを濃くする

追加CSSにコピペで完成。

/* バイラルのマスクを濃くする */
.mask-blackmesh::after {
	background-color: rgba(0,0,0,0.5);
}

もっと濃くしたい場合は、最後の方にある 0.5の数値を大きくしてください。標準では0.25。1.0にすると真っ黒です。

タイトル文字にシャドウを付ける

追加CSSにコピペで完成。

/*バイラルアイキャッチの記事タイトル*/
	.viral__contents .heading{
	text-shadow:2px 0px 6px #000;
}

タイトル文字に影をつけてクッキリと見やすくします。マスクを濃くするカスタマイズだけで十分な場合は必要ありません。好みに応じて適用してください。

タグなどの情報欄を黒系に変更

追加CSSにコピペで完成。

/*バイラルアイキャッチの記事情報のサイズ・カラー*/
.viral__contents .dateList{
	width:100%;
	border-radius:0;
	background-color:rgba(0,0,0,0.75);
}
/*バイラルアイキャッチの記事情報の文字色*/
.viral__contents .dateList__item{
	color:#cccccc!important;
}

更新日やタグなどの記事情報を黒系に変更したい場合に使用してください。

標準では文字量に応じて横幅が変わるのをこのカスタマイズでは横幅100％に固定しています。標準のままにしたい場合は width:100%;を削除してください。

また角丸をなくしています。これも標準のままで良い場合は border-radius:0;を削除してください。

帯状の背景色は background-color:rgba(0,0,0,0.75);で設定しています。好みのカラーに変更してください。最後の数値0.75は透明度です。1.0だと100％、0.5だと50％になります。

文字色は目立ちすぎないよう薄いグレーにしています。こちらも #ccccccを変更すれば好みの色にすることができます。

スマホ表示時のタイトル文字を大きくする

追加CSSにコピペで完成。

@media only screen and (max-width: 767px){
.viral__contents .heading {
	font-size:250%;
}
}

スマホやタブレットで表示したとき（右側の小アイキャッチ画像がなくなるとき）にタイトルが凄く小さく感じたので大きくなるよう変更しました。スマホで見たときのタイトルのインパクトが出ます。個人的にはこれくらいがベスト。必要であれば導入してください。サイズは 250％の部分を変更して変えることもできます。

以上で今回のカスタマイズは終了です。

おつかれさまでした。

※カスタマイズは自己責任でお願いします。

[wpap service=”with” type=”detail” id=”4797398892″ title=”【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チート…” search=”1冊ですべて身につくHTML & CSSとWebデザイン入門講座”]