JIN:Rで魅せるトップページの作り方を知ってみませんか？

メインビジュアルは、4種類から選べます。

メインビジュアルなしにも設定できます。

記事スライドショー

記事スライドショーは、ブログ記事のアイキャッチ画像とタイトルをスライド形式で表示できます。

記事の選択方式を個別選択にした場合は、最大6記事を指定できます。

画像スライドショー

画像スライドショーは、アップロードした画像にURLをリンクしてスライド表示できます。

記事スライドショーとの違いは、アイキャッチ画像に固定されるか、自由に画像を表示できるかです。画像にリンクをするので、固定ページやカテゴリーページなどの表示も設定しやすくなります。

画像はメディアにアップロードした中から選択可能です。

スライドアニメーションは、標準のスライドとスライドイン、フォード、パララックスから選べます。

ヘッダー画像

ヘッダー画像は、固定したひとつの大きなブログのイメージを印象付ける画像を表示できます。

デザイン選択は、ベーシックとヘッダーカバーが選びます。ヘッダーの表示位置が変わり、ベーシックはヘッダー画像の外側、ベーシックはヘッダー画像の内側に重なる形で表示されます。

ヘッダー画像の画像比は、標準の画像の大きさに合わせるやオリジナル比率、カスタムから選べます。

ヘッダー画像は、スマートフォン専用の「スマホ用画像設定」もできます。

基本的に、パソコンは横長画面、スマートフォンは縦長画像です。縦長画像に自動で調整されてしまうと大切な部分が切れてしまう場合に、スマートフォン用に調整した画像の設定ができます。

オーバーレイ効果は、なしとシンプル、ブラーから選べます。オーバーレイカラータイプは、単色とグラデーションから色を選べます。オーバーレイの透過度もスライダーで調整できます。画像に薄く色のフィルターを重ねることで、ヘッダー画像をやや曖昧にして、画像の主張を和らげる効果があります。

画像に重ねてキャッチコピーとボタンを画像に重ねて表示できます。

キャッチコピーは表示、非表示が選択可能です。メインコピーとサブコピーの入力をして、文字サイズの調整と文字色の選択、文字のデコレーションの選択ができます。文字のデコレーションは、デコレーションするかと、影と影の大きさ、白フチが決められます。

ボタンも表示、非表示が選べます。ボタンデザインの選択と、ボタンに表示するテキストの入力、リンク先URLの設定が可能です。

キャッチコピーとボタンは、パソコンと、スマートフォンに分けた位置調整ができて、キャッチコピーは、テキストの行揃えの選択もできます。

ヘッダー動画

ヘッダー動画は、ブログのイメージを伝える動画を大きく表示できます。

ヘッダー動画の設定項目は、ヘッダー画像との共通点も多いです。

デザイン選択は、ベーシックとヘッダーカバーが選びます。ヘッダーの表示位置が変わり、ベーシックはヘッダー画像の外側、ベーシックはヘッダー画像の内側に重なる形で表示されます。

メインビジュアルに表示する動画は、メディアにアップロードした中から選択できます。

横長画面のパソコンと縦長画面のスマートフォンでは、動画の最適な表示サイズが異なります。そのため、パソコンと同じにするか、スマートフォンでの表示比率を「px」単位で指定するか選べます。

スマートフォンの表示比率は、初期設定で640が入力されているので、詳しくなければ変更しない方が無難です。

動画に重ねて表示させるキャッチコピーとサブコピー、ボタンをヘッダー動画と同じ方法で設定できます。

メインビジュアルに設定する動画のファイルが大きいと、サイトの読み込みが遅くなるので数秒程度の長さの動画がおすすめです。

ロゴの設定は、基本設定のサイトタイトルとサブタイトルの入力欄と、サイトデザイン設定のロゴ設定を使います。

JIN:Rでは、サイトタイトルとロゴの両方を設定した場合、トップページでの表示はロゴ設定が優先されます。一方、検索エンジン上では、サイトタイトルが表示されます。もし、サイト名を変えるときは、ロゴ画像とサイトタイトルの両方変えるのを忘れないようにしましょう。

基本設定に、サイトタイトルとサブタイトルの入力欄があります。

初期設定では、レンタルサーバー契約時にサイト名で登録した内容がサイトタイトルに入力されています。サブタイトルは空欄でも構いません。入力している場合は、パソコンとスマートフォンのそれぞれで表示するか選べます。

サイトデザイン設定の中に、ロゴ設定があります。

ロゴはメディアにアップロードした画像を選択できます。

ロゴの大きさと上下の余白を、パソコンとスマートフォンに分けて調整できます。大きさと余白の設定は、サイトタイトルの表示にも連動しています。

イラストやタイポグラフィーを使ったデザインされたロゴマークがない場合でも、Canvaなど無料で使えるアプリで、文字のロゴ画像は作った方が良いです。

サイトタイトルをそのまま表示すると、記事に使うフォントのままで味気ない表示になってしまいます。オシャレなフォントを使って単純にサイトタイトルを書くだけでも、本格的なサイトの雰囲気が出ます。

サイトデザイン設定の中に、ページレイアウトの設定があります。

ページフレームは、背景に設定した色や画像に、ページの枠をどのように重ねるか設定するイメージです。トップページだけではなく記事ページにも影響があり、デザイン性の高さと記事の読みやすさのバランスを考えた設定が大切です。

トリムとフルワイド、トランスレートの3種類から選べます。

トリムが上下左右に背景が残り、フルワイドは左右が画面いっぱいにページフレームが広がり、トランスレートはページフレームがないデザインです。特にこだわりがなければ、ブログではトリムが設定されている場合が多いです。

デモデザインでは、PortfolioやコーポレートサイトのRestaurant、Formalなどでトランスレートを設定して、背景画像を活用したデザインを作っています。

ヘッダーデザインでは、ロゴとグローバルナビゲーションの配置やヘッダーのデザインを設定できます。

サイトデザイン設定の中に、ヘッダーのメニューがあります。

レイアウトでは、ロゴを左寄せと中央寄せから選べます。

背景装飾は、標準のなしと、アンダーライン、トライアングル1、トライアングル2からv選べます。デモデザインのSportyではトライアングル2が設定されています。

ヘッダー追尾機能のONとOFFの切り替えもできます。

ヘッダー背景画像の設定は、メディアにアップロードした中から選択できます。

画像のサイズは、パソコンとスマートフォンで分けて設定できます。

画像のリピート表示のON、OFFが設定できるので、小さめの画像を設定して模様のように表現することもできます。

ヘッダーデザインの表示設定で、次のONとOFFの切り替えができます。

• パソコンでハンバーメニューを表示
• 検索ボックスを表示
• グローバルメニューをタブレット端末で表示
• トップページでヘッダーを表示

標準では、検索ボックスとトップページでヘッダーを表示がONになっています。

ヘッダーを非表示にするときは、ページIDで指定も可能です。

カラー設定の基本設定とヘッダーエリア設定をします。

基本設定では、テーマカラーと背景色、文字色が選べます。

トップページには、背景色の影響が大きいです。ページフレームで見たように、メインビジュアル以外のところは背景色で塗られていて、ページフレームの部分だけ白色になり、反映される範囲が広いからです。

テーマカラーや文字色は、オリジナルブロックなどのカラー選択にも反映されます。

ヘッダーエリア設定では、ヘッダーの背景色、タイトルとメニューの文字色が設定できます。

ヘッダーの背景色は、単色とグラデーション、透明から選べます。

好き勝手に原色に近い色などを使うと素人くさくなってしまい、せっかくデザインレベルの高いテーマの魅力が損なわれてしまいます。「COLOR DESIGN カラー別配色デザインブック」のような配色の見本を参考にするのがおすすめです。

トップページに関係するのは、パソコンで表示するグローバルメニューとスマホ用のハンバーガーメニュー、スマホメニューの3つです。

メニューとスマホ専用機能、サイト表示設定を使って設定します。

グローバルナビゲーション

グローバルナビゲーションメニューが表示されるのは、ヘッダーエリアです。

画面の一番上に表示され、関連カテゴリーや記事への導線として重要な役割をします。ヘッダーデザインでヘッダー追尾機能をONにしているときは、コンテンツエリアまでスクロールしても表示されるので、さらに有効的です。

表示させるメニューの内容は、メニューの項目から作ります。

「メニューを新規作成」をクリックして、メニュー名を入力したらメニューの位置をグローバルナビゲーションにチェックを入れます。

右下の「次」をクリックするとメニューが作られ、後は「項目を追加」から表示したいページを選択します。

表示の設定は、サイトデザイン設定の中のヘッダー項目にあり、次の3つを選択します。

• 2種類からデザインを選択
• 文字サイズを変更
• カーソルを合わせたときのアニメーションを選択

アニメーションは、文字色を変えると下線が下から上、左から右、左から右へ消えるの4種類です。

ハンバーガーメニュー

ハンバーガーメニューは、基本的にスマートフォンのヘッダーエリアに表示されます。

ハンバーガーメニューは、ハンバーガーの断面のように見えるアイコンで、クリックすると広がり、設定したメニュー項目が表示されます。

パソコンのように画面領域が広くないので、初めからメニュー項目を表示しているよりも便利なため、スマートフォンで使用されることが多いメニューです。

表示させるメニューの作り方は、グローバルナビゲーションメニューを作る場合とほぼ一緒です。メニューを新規作成をクリックした後のメニューの表示位置をハンバーガーメニューに変えるだけです。

ヘッダーデザインを説明したときに出てきた通り、パソコンでも表示が可能です。

スマホメニュー

スマホメニューは、名前に「メニュー」と付きますが、メニューを組むのではなくてリッチメニューブロックのように画像にリンク先を設定する機能です。

スマホ専用メニューから設定をします。

設定画面は2つのタブに分かれていて、サイトの上側に表示されるスマホメニューと、一番下に表示されるコンバージョンボタンが設定できます。

スマホメニューでは、アイコンとメニュー名を4つ表示可能です。

メニュー名の入力とアイコンは表示の有無、リンク先URLの設定をします。

アイコンを表示する場合は、JIN:Rオリジナルアイコンから選べます。

ファビコンは、Google Chromeなどのブラウザのタブやブックマークの先頭に表示されるサイトアイコンです。

個人サイトなどで設定されずに、WordPressのロゴやWordPressテーマのロゴのままの場合をよく見かけます。細かなところですが、ウェブサイトの完成度やプロフェッショナルさが簡単にわかってしまうところです。

基本設定のサイトアイコンで、メディアにアップロードした画像の中から選ぶだけです。

SNS登録/シェア設定で、ソーシャルメディアでTOPページがシェアされたときに表示されるOGP画像を設定します。

シェアされたときの画像は、メディアにアップロードした中から選べます。

Twitter（現X）でシェアされたときの画像サイズをコンパクトとラージから選択できます。

全員が必要ではないものの、役立つ機能も2つ紹介します。

インフォメーションバー

インフォメーションバーを使うと、お知らせや特別なPRページへのリンクをヘッダーエリアに表示できます。

インフォメーション設定を使います。

インフォメーションバーの表示を表示するかしないか選べ、表示する場合は「テキストのみ」と「テキストとボタン」を選択できます。

テキストのみの場合、2カ所分の枠にテキストが入力できて、文字のサイズを3段階で選べます。ボタンがない代わりに、インフォメーションバー自体にリンク先URLを設定できます。

テキストとボタンの場合、テキスト入力は1カ所分の枠に減り、ひと枠はボタン表示に変わります。文字のサイズは3段階で選べ、ボタンのテキスト入力とデザイン選択、ボタンのリンク先URLの設定ができます。

共通する設定は、2つあります。

• 文字色と、インフォメーションバーの色になる背景色を単色とグラデーションから選択
• 表示位置をヘッダーの上とヘッダーの下から選択

表示ページの設定では、

• TOPページで表示する
• 下層ページで表示する
• スマホで表示する

の3つのON、OFFを切り替えられます。

ページIDを指定して個別に非表示にもできます。

背景画像

通常、背景色が表示される部分に画像を設定できるのが、背景画像の設定です。

サイトデザイン設定にある詳細設定を使います。

設定する画像は、メディアにアップロードした中から選択できます。背景画像のリピート表示をオンオフで切り替えできます。

サイトを訪れた人に与える印象が強いのでやや上級者向けといえます。

デモデザインでは、PortfolioやNomad、コーポレート向けのFormalなどで使われています。