THE THOR といえば「バイラル風タイトル」
このカッコ良さに惹かれ購入した人も多いのではないでしょうか？
正直「バイラル風」って何？調べてみましたがよくわかりませんでした。言葉的には「ウイルス（virus）のように広まっていく様子を表現」らしい。それがなぜこのデザインにつながるのか？？？よくわからないけどカッコいい。それで良しとします。
THE THOR バイラル風 タイトルについて
記事タイトルの基本的なデザインは3種類あります。そのうちの一つが「バイラル風」
「バイラル風」にも種類があり、ここで扱うのは「バイラル風」の「ブラックメッシュ」になります。他のデザインや基本的な記事タイトルの設定についてはこちらの記事をご覧ください。
THE THOR には記事タイトルの設定が豊富にあります。この記事では THE THOR 記事タイトルの設定 を細かく見ていきます。 デフォルトでも問題ありませんが、せっかくの機能なので自分好みに仕上げましょう。 この記事を[…]
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％の部分を変更して変えることもできます。
以上で今回のカスタマイズは終了です。
おつかれさまでした。
※カスタマイズは自己責任でお願いします。
【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チート...
あとがき
バイラル風アイキャッチ(ブラックメッシュ)については別のカスタマイズも行っています。
- 画像の最大幅を700pxに設定
- 画像上部に余白を設定
- 右側にある小アイキャッチのサイズ変更
これらは当サイトが1カラムのため必要になったカスタマイズです。一般的ではないと判断して載せていません。