《JIN》記事のデザイン設定の使い方　for初心者

細かい設定！ですが、文字の大きさなどはカラー設定などと同じように、サイトの印象を変えることもできます。

また、関連記事の表示などを上手く使用することで、周遊率UPにも繋がります。？、

、サイトのやカラーに合わせて、、ユーザーにとっても記事が読みやすくなるように、最適な設定を選びたいです。

文字サイズ

記事の文字サイズは5段階から選ぶことができます。

フォントは1～2ポイントずつ大きくなっているようです。

文字のサイズを変えるだけで、印象が大きく変わります。大きいほうが優しく柔らかい雰囲気、小さいとスタイリッシュでおしゃれな印象になる気がします。

表示例）サイズ違いの目安にしてください（実際のフォントサイズとは異なります）

文字サイズ（スマホ）

スマホも5つのサイズから文字サイズを選ぶことができます。

全てを試してみましたが、スマホは画面が小さくなる分、XSやSサイズを選ぶと、だいぶ小さい字になる印象です。なので個人的にはM以上がおすすめです。

表示例）サイズ違いの目安にしてください（実際のフォントサイズとは異なります）

マーカーの色（1 、2）

マーカーとは、この文章の下部に引いてある線のことです。

こちらの設定では、その線の色を1と2とで2種類設定することができます。

マーカーの引き方

①Gutenbergを使用している場合は、マーカーを引きたい箇所を選択し、段落のメニューにある「よりリッチなテキスト制御」の中にあるマーカー1or 2を選びます。

②Classicを使用している人は、記事編集画面のスタイルから引くことができます。

スタイルの表示がない場合

Classicエディタの場合、「スタイル」の表示がされていないことがあります。

その場合は、「TinyMCE Advanced」というプラグインで表示が可能になるとのこと。

「TinyMCE Advanced」 がインストールされていない方は、プラグイン→新規追加からインストールし、有効化してください。

有効化したら、「設定」→ 「TinyMCE Advanced」 でエディタ設定画面を開きます。

Block Editor(Gutenberg)とClassic Editor(TinyMCE)のタブがありますが、両方設定しておくと良いかもしれません。

どちらも同じように、使用していないボタンから「スタイル」を選択し、ツールバーの中にドロップします。

上部にある「変更を保存」ボタンを押して完了です！

マーカーの太さ（1、2）

マーカーは3種類から線の太さを選択することができます。好みに合わせて設定してみてください（この設定を変更すると、全記事で引いていたマーカーに反映されます）。

CTAの背景色/CTA内の文字色

作成して公開しているCTAの背景色と文字色をここで変更することができます。

CTAとは？

CTAとは「Call to Action」の略で、ユーザーに行動を促すためのボタンやリンクを設置すること、またその設置物のことです。

例としては「資料請求はこちらへ」というようなボタンが分かりやすいですが、JINでは1つの広告オブジェクトとしてCTAを設定できるツールが用意されています。

CTAの設置方法

実際に文字だけですが簡単に作成してみました。

管理画面の「CTA」から新規追加を選択します。

エディタが表示されるので、そこにイメージや文章、またはリンク先を記事編集と同じように設定します。

記事と同じように「公開する」を押すと、全ての記事下に以下のようにCTAが設置されます。

※ここで設定していても、記事投稿画面で、CATを個別に非表示することも可能です。

CTAの設置については、JIN公式で詳しく記載があり、見本も素敵なのでぜひ確認してください。

関連記事の表示形式

記事下にある、関連記事の表示スタイルを4種類から選ぶことができます。

関連記事は、同じカテゴリーやリンクを貼っているなど、表示記事と関連のある記事が自動で選択されます。

スタイルによって最適な表示記事数が異なるので、下の項目で出てくる表示件数と合わせて設定しましょう。

表示見本

▶スライドスタイル
表示は3カラムで、設定している記事数を自動で左へスライドして流してくれます。例は4記事設定で、1～4の記事が123、234、341、412と順番に表示されます。

表示記事数は4以上の設定が良いでしょう。

▶ベーシックスタイル
行で表示する基本タイプです。固定で関連記事をたくさん表示したい人におすすめだと思います。

▶マガジンスタイル（2カラム）
2つの記事を横並びに表示するタイプです。大きく表示されるので、アイキャッチを大きく見せたい場合などにおすすめです。

表示数は2の倍数に設定します。例えば4にすると、2列×2段で記事が表示されます。スクロールが長くなるので、個人的には6くらまでの表示がお勧めです。

▶マガジンスタイル（3カラム）
3つの記事を横並びに表示します。スライドタイプとちがい、固定して記事を表示したい人におすすめです。

表示数は3の倍数に。こちらもスクロールを考えると9くらいまでがお勧めかなと思います。

関連記事の見出し

関連記事の見出しを変更することができます。「その他お勧め記事」「参考記事」など、サイトにあった見出しに変更しましょう。

関連記事の表示件数

上の表示形式の設定と合った、適正な数をここで設定します。

スタイル名	記事数
スライドタイプ	4以上
ベーシックスタイル	2以上
マガジンスタイル（2カラム）	2の倍数　6くらいまで？
マガジンスタイル（3カラム）	3の倍数　9くらいまで？

 

その他の詳細設定

記事内の表示について、その他細かい設定ができます。1つずつ見ていましょう。

▶記事に自動で挿入されるアイキャッチ画像を非表示にする
　記事を開いたとき、記事名の下と記事のトップの間にアイキャッチ画像を表示させるかどうかです。デフォルトでは表示されるようになっています。

▶記事のコメントを表示する
　記事にコメントがあった場合、それを表示させるかどうかだと思うのですが、当サイトはコメント非表示になっているためか、確認できませんでした…

▶SNSボタンを表示しない
　SNSボタンを設定している場合、記事下と記事上にリンクアイコンが表示されます。その表示を消すかどうかです。

　ここで「表示」を設定していても、記事投稿画面で記事ごとに非表示を設定することも可能です。

▶ページ上部のSNSボタンのみを表示しない
　上部のみSNSボタンを設定しないときはこちらをチェックします

▶記事下の「次の記事」「前の記事」を非表示にする
　関連記事のさらに下に表示される、前後の投稿の表示をするかどうか設定できます

▶記事下の関連記事を非表示にする
　関連記事を非表示にしたいときは、こちらにチェックします
　記事投稿画面に、記事ごとに設定しない設定もあります。

本サイトの『記事のデザイン設定』

記事部分のデザイン表示について、細やかな設定が色々できて、私も試しながら驚きました。

どれもサイトの特徴や、周遊率に繋がる大事な設定だと思います。必要な項目を上手に活用して、最適な設定を目指したいです。