ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
THE THOR ザ・トール 記事タイトルの設定
当ページのリンクには広告が含まれています。
ポチップ
THE THOR には記事タイトルの設定が豊富にあります。この記事では THE THOR 記事タイトルの設定 を細かく見ていきます。
デフォルトでも問題ありませんが、せっかくの機能なので自分好みに仕上げましょう。
目次
THE THOR 記事タイトルの設定
記事タイトルの設定は以下から。
操作手順
外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定 → ページタイトルデザイン設定
外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定 → ページタイトルデザイン設定
記事タイトルには大きく分けて3つあります。
- ノーマル(default)
- ノーマル(アイキャッチなし)
- バイラル風
それぞれのサンプル
※アスペクト比16：9
※細かい設定は全て表示
ノーマル(default)
ノーマル(アイキャッチなし)
バイラル風※バイラル風はサンプル画像だとメッシュが潰れていますが実際はとてもキレイです。
バイラル風について
ノーマルとノーマル(アイキャッチなし)はそのままなので特に難しいことはありません。
バイラル風は画像を拡大しつつ横いっぱいに背景画像として表示されます。記事の詳細情報などは画像の上に配置されもとのアイキャッチ画像は右側に表示されます。背景画像にはマスクを掛けることが出来ます。
※当サイトのバイラル風は最大幅700pxに変更するカスタマイズを行っています。
バイラル風詳細設定（画像のマスクを選択）
- マスクなし
- ブラック
- ブラックメッシュ
- カラー
- カラー+画像グレー
マスクとは隠すということですね。
| マスクなし | アイキャッチ画像そのまま |
| ブラック | 半透明ブラックで画像をおおう（暗くする） |
| ブラックメッシュ | 半透明ブラックとメッシュ(黒)で画像をおおう（暗くする） |
| カラー | 半透明カラーで画像をおおう（色味がかかる） |
| カラー+画像グレー | 画像を白黒にして半透明カラーをのせる（色相の統一） |
サンプル画像
マスクなし
背景画像が右側の小さなアイキャッチと同じなので少し見えづらい印象を受けます。サンプル画像が白っぽいのも良くないですねw
ブラック
マスクなしと較べ見やすくなります。基本的にタイトル文字色が白なので、どんな画像にも対応出来るようマスクは入れたほうが良いでしょう。
ブラックメッシュ
個人的に THE THOR といえばコレ。スクショだとメッシュが潰れてしまい美しくないので実際のものを見てください。
カラー
ここではカテゴリー(ファッション)のオレンジ色が画像にのっています。統一感が出ます。
カラー+画像グレー
カラーと同様にオレンジ色がのっています。もと画像が白系なのでカラーとの違いがわかりづらいですが、ハンガーを見ると色が全て統一されているのがわかります。画像を白黒にしてから色をのせているのがわかりますね。カラーより統一感を出すならこれ。
カラーの選択方法
サイト全体のキーカラーがマスクのカラーとなっているので、マスクのカラーを変更するにはキーカラーの設定変更が必要になります。
操作手順
外観 → カスタマイズ → 基本設定 → 基本スタイル設定
外観 → カスタマイズ → 基本設定 → 基本スタイル設定
基本スタイル設定の テーマカラーを指定で変更できます。
テーマカラーを指定で設定した色はサイト全体のキーカラーとなり、様々な場所で適用されるので変更は慎重に行いましょう。バイラル風におけるカラー設定はサイト全体の統一感を出すために使用する項目と言えると思います。
・カラーの設定は別項目
テーマ全体のキーカラーがカラーに設定されます。
テーマ全体のキーカラーがカラーに設定されます。
画像のアスペクト比とその他の設定
カラーの説明が入りましたが、設定はページデザインタイトル設定の続きになります。
操作手順
外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定 → ページタイトルデザイン設定
外観 → カスタマイズ → 投稿ページ設定[THE] → スタイル設定 → ページタイトルデザイン設定
アスペクト比の設定
アイキャッチ画像のアスペクト比(縦横比)が選択できます。お好みで選びましょう。ライブプレビューの画面で変更が確認できます。
- 16：9(default)
- 4：3
- 1：1
その他の設定
記事についていの情報を掲載することができます。
- アイキャッチ上のカテゴリを非表示にする
- 投稿日を表示する
- 更新日を表示する
- 閲覧数を表示する
- コメント数を表示する
それぞれ好みでチェックを入れましょう。こちらもライブプレビューの画面で変更が確認できます。個人的には「更新日を表示する」には絶対チェックをいれます。
あわせて読みたい
THE THOR ザ・トール 記事コンテンツ の順番を変更するカスタマイズ
THE THOR で投稿ページの 記事コンテンツ をレイアウト変更します。 THE THOR の導入はこちら Google が推奨する最新の機能を搭載した「THE THOR」を導入する。 ...
あとがき
以上で記事タイトル部分の設定は完了です。お好みのデザインにできましたか？
見ている人の印象に残るサイトを目指したいですね。
基本設定が理解できたらカスタマイズ！
ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
この記事が気に入ったら
フォローしてね！
ブログテーマ選びについて
この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント