ワードプレステーマSWELLとTHE THORの違いについて、設定方法ごとに解説していきます。
今回は「ページタイトル設定」についてです。
SWELLとTHE THORでは投稿ページに表示されるタイトル部分のデザインを変更することができます。
![SWELL THE THOR ページタイトル表示イメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_thor_page_title_img-1005x1024.png)
この記事のSWELL公式マニュアルはこちら
ページタイトル関連の設定場所
SWELLでの設定場所
タイトルの表示設定
ページタイトルの表示位置やタイトル下に表示する情報の設定は、「投稿・固定ページ」→「タイトル」メニュー内で行います。
![SWELL タイトルの表示設定場所](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_page_title-1024x736.png)
背景画像の効果設定
タイトルの表示位置で「コンテンツ上」を選択した場合、「コンテンツヘッダー」で背景画像にフィルター処理やオーバーレイカラーの設定をすることができます。
設定場所は、「サイト全体設定」→「コンテンツヘッダー」です。
![SWELL タイトル背景画像の設定場所](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_contents_header-1024x548.png)
THE THORでの設定場所
THE THORのページタイトルに関する設定は、「外観」→「カスタマイズ」→「投稿ページ設定[THE]」→「スタイル設定」で行います。
![THE THOR ページタイトルの設定場所](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_page_title_design-1024x753.png)
SWELL タイトルデザインの設定
ページタイトルの表示位置に関する設定は、「投稿・固定ページ」→「タイトル」メニュー内の「タイトルの表示位置」で行います。
タイトルの表示位置
![SWELL タイトルの表示位置設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_page_title_position.png)
赤枠の項目で「コンテンツ上」「コンテンツ内」どちらかで表示します。
コンテンツの上
![SWELL ページタイトル(コンテンツの上)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_display-1.png)
コンテンツ内
![SWELL ページタイトル(コンテンツ内)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_display-2.png)
「コンテンツ上」選択時の背景効果
タイトル表示位置で「コンテンツ上」を選択している場合、背景画像にフィルター処理や、好きな色・透明度のカラーオーバーレイを加えることができます。
![SWELL ページタイトル 背景効果設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_contents_header_background.png)
画像フィルター処理
背景画像に4種類のフィルターを設定できます。
ブラー(ぼかし)
![SWELL タイトル背景画像フィルター(ブラー)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_blur.png)
グレースケール
![SWELL タイトル背景画像フィルター(グレースケール)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_grayscale.png)
ドット
![SWELL タイトル背景画像フィルター(ドット)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_dot.png)
ブラシ
![SWELL タイトル背景画像フィルター(ブラシ)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_brush.png)
オーバーレイカラーの設定イメージ
背景画像に被せる色を選択できます。
色はカラーピッカーで自由に選択、不透明度もopacityで調整可能です。
![SWELL オーバーレイカラーの設定(#ef2607)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_overlay.png)
![SWELL オーバーレイカラーの設定(#0a07ed)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_overlay-2.png)
![SWELL オーバーレイカラーの不透明度(0.2)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_opacity.png)
![SWELL オーバーレイカラーの不透明度(0.7)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_page_title_background_img_effect_opacity-2.png)
その他にもSWELでは記事上部に画像の代わりにYouTube動画を表示することができます。
THE THOR タイトルデザインの設定
THE THORでも投稿ページ上部のタイトルデザインを設定することが可能です。
![THE THOR ページタイトルデザイン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_page_title_design-2.png)
ページタイトルデザイン選択
3種類のデザインが用意されています。
(内1つアイキャッチ無し)
アイキャッチ有り
![THE THOR ページタイトル(アイキャッチ有り)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_page_title_display-1.png)
アイキャッチ無し
![THE THOR ページタイトル(アイキャッチ無し)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_page_title_display-2.png)
バイラル風
![THE THOR ページタイトル(バイラル風)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_page_title_display-3.png)
アイキャッチの画像アスペクト比の変更
THE THORではアイキャッチの画像の表示サイズを調整することができます。
(SWELLにはありません)
- 16:9
- 4:3
- 1:1
「バイラル風」選択時の背景効果設定
ページタイトルデザインで「バイラル風」を選択している場合、画像にフィルター処理を加えることができます。
ブラック
![THE THOR タイトル背景画像フィルター(ブラック)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_page_title_eye-catch_effect_black.png)
ブラックメッシュ
![THE THOR タイトル背景画像フィルター(ブラックメッシュ)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_page_title_eye-catch_black_mesh.png)
カラー
![THE THOR タイトル背景画像フィルター(カラー)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_page_title_eye-catch_effect_color.png)
カラー+画像グレー
![THE THOR タイトル背景画像フィルター(カラー+画像グレー)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_page_title_eye-catch_effect_color_gray.png)
マスクカラーはサイトのテーマカラーと同じ色が設定されます。
テーマカラーと別の色を指定することはできません。
テーマカラーは「基本設定[THE]」→「基本スタイル設定」メニューで設定できます。
タイトル関連情報の設定
SWELLとTHE THORでは投稿ページの投稿日やカテゴリーなどの関連情報を表示できます。
![SWELL THE THOR タイトル関連情報表示イメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_thor_page_title_info_img-958x1024.png)
表示できる関連情報一覧
- SWELL
-
- 日付(タイトル横)
- カテゴリー
- タグ
- 公開日
- 更新日
- 著者情報
- THE THOR
-
- カテゴリー
- 投稿日
- 更新日
- 閲覧数
- コメント数
まとめ きれいなのはSWELL!だけど設定場所覚えづらい
ページタイトルはその記事の顔(^^♪ですから、何よりもまずきれいに仕上げられるかが大事なポイントだと思います。
そういった観点で両テーマを比較するとSWELLに軍配が上がると思います!
THE THORは「バイラル風」のマスクカラー(オーバーレイカラー)がテーマカラーと同じ色が適用されてしまうのと、透過性の調整もできないのがいただけません。
ただしSWELLの場合、ページタイトル関連の設定項目がカスタマイザー内の複数のメニューに散らばっているため、THE THORよりも設定するための画面遷移が増えるので手間がかかります。
しかもカスタマイザー内のメニュー名わかりづらい。
(今日一番の不満がここ!)
「コンテンツヘッダー」っていわれても、なんの設定ができるのかピンときません。
もう少しわかりやすいネーミングにするか、思い切ってメニュー構成を見直すということを検討してもらえればと思います。
(影響デカいのかな~)
ページタイトル設定について、少々使い勝手が気になる部分はあるものの、それを差し引いてもSWELLの方がきれいなページタイトルを作れると思います。
SWELLが気になった方は公式サイトの情報も参考にしてみてください。