THE THOR には記事タイトルの設定が豊富にあります。この記事では THE THOR 記事タイトルの設定 を細かく見ていきます。
デフォルトでも問題ありませんが、せっかくの機能なので自分好みに仕上げましょう。
THE THOR 記事タイトルの設定
記事タイトルの設定は以下から。
外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定 → ページタイトルデザイン設定
記事タイトルには大きく分けて3つあります。
- ノーマル(default)
- ノーマル(アイキャッチなし)
- バイラル風
それぞれのサンプル
※アスペクト比16：9
※細かい設定は全て表示
ノーマル(default)
ノーマル(アイキャッチなし)
バイラル風
バイラル風について
ノーマルとノーマル(アイキャッチなし)はそのままなので特に難しいことはありません。
バイラル風は画像を拡大しつつ横いっぱいに背景画像として表示されます。記事の詳細情報などは画像の上に配置されもとのアイキャッチ画像は右側に表示されます。背景画像にはマスクを掛けることが出来ます。
※当サイトのバイラル風は最大幅700pxに変更するカスタマイズを行っています。
バイラル風詳細設定（画像のマスクを選択）
- マスクなし
- ブラック
- ブラックメッシュ
- カラー
- カラー+画像グレー
マスクとは隠すということですね。
| マスクなし | アイキャッチ画像そのまま |
| ブラック | 半透明ブラックで画像をおおう（暗くする） |
| ブラックメッシュ | 半透明ブラックとメッシュ(黒)で画像をおおう（暗くする） |
| カラー | 半透明カラーで画像をおおう（色味がかかる） |
| カラー+画像グレー | 画像を白黒にして半透明カラーをのせる（色相の統一） |
サンプル画像
マスクなし
背景画像が右側の小さなアイキャッチと同じなので少し見えづらい印象を受けます。サンプル画像が白っぽいのも良くないですねw
ブラック
マスクなしと較べ見やすくなります。基本的にタイトル文字色が白なので、どんな画像にも対応出来るようマスクは入れたほうが良いでしょう。
ブラックメッシュ
個人的に THE THOR といえばコレ。スクショだとメッシュが潰れてしまい美しくないので実際のものを見てください。
カラー
ここではカテゴリー(ファッション)のオレンジ色が画像にのっています。統一感が出ます。
カラー+画像グレー
カラーと同様にオレンジ色がのっています。もと画像が白系なのでカラーとの違いがわかりづらいですが、ハンガーを見ると色が全て統一されているのがわかります。画像を白黒にしてから色をのせているのがわかりますね。カラーより統一感を出すならこれ。
カラーの選択方法
サイト全体のキーカラーがマスクのカラーとなっているので、マスクのカラーを変更するにはキーカラーの設定変更が必要になります。
外観 → カスタマイズ → 基本設定 → 基本スタイル設定
基本スタイル設定の テーマカラーを指定で変更できます。
テーマカラーを指定で設定した色はサイト全体のキーカラーとなり、様々な場所で適用されるので変更は慎重に行いましょう。バイラル風におけるカラー設定はサイト全体の統一感を出すために使用する項目と言えると思います。
テーマ全体のキーカラーがカラーに設定されます。
画像のアスペクト比とその他の設定
カラーの説明が入りましたが、設定はページデザインタイトル設定の続きになります。
外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定 → ページタイトルデザイン設定
アスペクト比の設定
アイキャッチ画像のアスペクト比(縦横比)が選択できます。お好みで選びましょう。ライブプレビューの画面で変更が確認できます。
- 16：9(default)
- 4：3
- 1：1
その他の設定
記事についていの情報を掲載することができます。
- アイキャッチ上のカテゴリを非表示にする
- 投稿日を表示する
- 更新日を表示する
- 閲覧数を表示する
- コメント数を表示する
それぞれ好みでチェックを入れましょう。こちらもライブプレビューの画面で変更が確認できます。個人的には「更新日を表示する」には絶対チェックをいれます。
THE THOR で投稿ページの 記事コンテンツ をレイアウト変更します。 THE THOR の導入はこちら Google が推奨する最新の機能を搭載した「THE THOR」を導入する。 ※ THE THO[…]
あとがき
以上で記事タイトル部分の設定は完了です。お好みのデザインにできましたか？
見ている人の印象に残るサイトを目指したいですね。
基本設定が理解できたらカスタマイズ！
THE THOR といえば「バイラル風タイトル」 このカッコ良さに惹かれ購入した人も多いのではないでしょうか？ 正直「バイラル風」って何？調べてみましたがよくわかりませんでした。言葉的には「ウイルス（virus）のように広まって[…]
