ブログ記事ページをカスタマイズすると、ブランドに合わせてブログ記事のデザインと操作感をカスタマイズし、読者を引き付けることができます。記事ページの設定で行った変更は、すべてのブログ記事に適用されます。
つまり、選択したフォントが、すべてのブログ記事にも適用されます。記事に表示するように選択した情報についても同様です。これにより、ブログに一貫性のあるプロフェッショナルな外観を与え、訪問者にとってより魅力的でナビゲートしやすくなります。
ステップ 1 | ブログ記事ページにアクセスする
まず、エディタで「ブログ記事」ページにアクセスします。
- エディタにアクセスします。
- 記事ページにアクセスします:
- エディタ左側で「ページ・メニュー」
をクリックします。 - 「ブログページ」をクリックします。
- 「記事」をクリックします。
- ページ上の「記事ページ」をクリックします。
ステップ 2 | 記事ページに表示するパーツを選択する
記事ページに表示させる項目やパーツには、思い通りのものを選択することができます。たとえば、著者名や読了時間など、記事に関する項目を表示または非表示にしたり、ブログメニューや SNS シェアボタンなど、含めたいパーツを選択したりすることが可能です。
表示させるパーツを選択する方法:
- エディタで「記事」ページをクリックします。
- 「設定」をクリックします。
- 「表示設定」タブをクリックします。
- チェックボックスを選択または選択解除して、記事に表示する内容を選択します。
- スクロールダウンして、カスタマイズするものを選択します:
読者がブログ内を簡単に移動できるよう、記事ページの上部にブログメニューを表示させることができます。記事をカテゴリー分けしている場合は、ここにカテゴリー名が表示されます。
- 「ブログメニュー」をクリックします。
- 「ブログメニューを表示」トグルをクリックして、フィードの上部でメニューを表示または非表示にします:
- (有効にした場合)チェックボックスを選択または選択解除して、メニューに表示する情報を選択します。
読者が SNS で記事をシェアできるようにして、ブログへのトラフィックを増やすことができます。
- 「シェアして印刷」をクリックします。
- トグルを有効または無効にして、共有・印刷オプションをカスタマイズします:
- シェア・印刷アイコンを表示:記事に SNS シェアと印刷アイコンを追加します(例:Facebook、LinkedIn、印刷ボタン)。記事に表示したいアイコン横のチェックボックスを選択します。
- 画像上の「ピン」ボタン:Pinterest ピン(保存)ボタンが画像に追加され、ブログ読者が Pinterest ボードで画像を共有できるようになります。
- ツイートするテキストを選択:「ツイートするテキストを選択」ボタンが記事に追加され、ブログ読者が X(Twitter)でテキストを共有できるようになります。
現在読んでいる記事に関連する記事を表示させ、さらに読者を惹きつけることができます。関連記事は、記事ページの下部に表示されます。
- 「関連記事」をクリックします。
- トグルを有効または無効にして、関連記事オプションをカスタマイズします:
- 関連記事を表示:関連する記事パーツが記事ページに表示されます。
- 記事ラベルを表示:関連記事パーツに記事の内容を説明するラベルを表示します(例:関連記事または最新記事)。
- 「すべて表示」リンクを表示:「すべて表示」リンクは関連する記事のパーツに表示され、さらに関連する記事を識別します。
ステップ 3 | 記事ページのデザインをカスタマイズする
記事ページは動的ページであるため、ここで設定したデザインは読者がブログ記事を開くたびに適用されます。サイトに合うよう、記事ページのフォントや色をカスタマイズしてみましょう。
記事ページのデザインをカスタマイズする方法:
- エディタで「記事」ページをクリックします。
- 「設定」をクリックします。
- 「デザイン」タブをクリックします。
- デザインするものを選択します:
記事ページの上部に表示されるメニューのデザインをカスタマイズすることができます。
- 「ナビゲーション」をクリックします。
- サイト訪問者がブログ記事のテキストをクリックおよびマウスオーバーした際のフォントスタイルと色をカスタマイズし、記事の背景の不透明度と色を調整します。
記事のテキストのデザインをカスタマイズします。読みやすい色とフォントを選択しましょう。記事を作成する際に、これらの設定を上書きすることができます。
- 「テキストスタイルと色」をクリックします。
- 段落と見出しテキストのフォントスタイルと色をカスタマイズし、リンクとハッシュタグの色を変更します。
記事の評価を示す星のデザインをカスタマイズします。
- 「評価」をクリックします。
- 星の不透明度と色をカスタマイズし、評価テキストのフォントと色を変更します。
ブログ記事に表示される、タグのラベルのデザインをカスタマイズすることができます。
- 「タグ」をクリックします。
- カスタマイズするものを選択します。
- タグのラベル:「ラベルを表示」トグルを有効または無効にして、タグラベルを表示または非表示にします。
- タグのレイアウト:タグのレイアウトを選択し、配置を調整します。
- タグの間隔:スライダーをドラッグして、タグの間隔を調整します。
- テキストの余白:テキスト上下左右の余白を調整します。
- タグのデザイン:フォント、背景、枠線を調整して、タグの通常時とマウスオーバー時の表示をカスタマイズします。
記事ページで使用する背景とボタンのデザインをカスタマイズすることができます。
- 「背景・ボタン」をクリックします。
- カスタマイズするものを選択します。
- 記事背景:スライダーをドラッグして、記事背景の枠線と色を調整します。
- ボタンのスタイル:カラーボックスをクリックして、ボタンテキストと背景色を選択します。