賢威8トップページのカスタマイズ方法

賢威8の評判が高い理由の1つに、以前のバージョンよりトップページのカスタマイズがしやすい設計が挙げられます。

PHPやHTML/CSSを一切変更しないで、WordPress初心者でもトップページのカスタマイズができるように解説しています。

すべてWordPress標準機能のカスタマイザーで対応できます。

では、WordPressテンプレート賢威8でトップページのカスタマイズ方法を紹介します。

トップページを簡単にカスタマイズする方法

賢威8のカスタマイザー画面

賢威8のトップページを誰でも簡単にカスタマイズする場合、WordPress標準機能の「カスタマイザー」を利用します。

賢威8のカスタマイズの方法

外観 > カスタマイズ」の順に進めれば、カスタマイザー画面へ移行します。

WordPressテーマによって、カスタマイザーの項目に違いがあります。賢威8では、次の項目がトップページのカスタマイズに関係します。

賢威8カスタマイザー
  • サイト基本情報
  • レイアウト(トップページのレイアウト)
  • 投稿一覧のレイアウト
  • メニュー
  • ウィジェット

それぞれの項目で、どのようにカスタマイズできるか1つずつ解説します。

基本情報からヘッダーロゴの設定

賢威のロゴの設定

ヘッダー左上部に表示されるロゴは、画像の設置が可能です。

初期設定では、画像ではなくテキスト表示されているので、味気ないサイトに見えてしまいます。

ロゴの画像は横幅最大580pxまで表示可能で、形は正方形でも長方形でも設定できます。

ただし、あまりにも縦に長いロゴ画像にしてしまうと、メインコンテンツ部分に影響が出てしまうので、なるべく縦の長さ100px以内に収めておくと良いです。

賢威8でサイトアイコン(ファビコン)の設置

あと、サイトアイコンを合わせて設置するのを忘れないでください。

一般的にはファビコンと言われるもので、上記の画像のようにスマホで検索した際に表示されるため目立ちます。

ファビコンでは複雑な画像はキレイに表示されないので、簡単で分かりやすい画像を用意しましょう。

賢威8では、正方形512px×512px以上のファビコンを推奨しています。

レイアウトの変更

賢威8トップページのレイアウト変更

トップページのみレイアウトを変更するには、カスタマイザーにある「トップページのレイアウト」をクリックします。

ちゃんちゃん
サイト全体を一括変更するなら「レイアウト」から行います!

賢威8であらかじめ用意されているレイアウトは、次の4種類です。

賢威8レイアウト「2カラム」
2カラム
賢威8レイアウト「2カラム リバース」
2カラム リバース
賢威8レイアウト「1カラム サイドなし」
1カラム サイドあり
賢威8レイアウト「1カラム サイドなし」
1カラム サイドなし

賢威8の初期レイアウトは、メインコンテンツが左側、サイドバーが右側の「2カラム」です。

コンテンツ記事をじっくり読んでほしいブログである場合、訪問者の目の動き「Fの法則」に馴染むのが2カラムなのでおすすめです。

逆に、サイドバーが左側にある「2カラム リバース」は、色々なページに移行する人が増えるサイト回遊率が上昇しやすいです。

ショッピング系サイトや専門知識ブログなどを運営しているなら良いかもしれません。

1カラム」は、両サイドに何もないのでインパクトや訴求力が最も高いデザインです。

スマホで表示する場合は元から両サイドがない状態なので、スマホからの訪問者が多いサイトなら違和感なくスッキリして良いかもしれません。

投稿一覧の表示変更

賢威8の投稿レイアウト変更

これまで公開した記事の一覧表示する方法を、賢威8ではデフォルト型(リスト)かカード型で選べます。カスタマイザーの「投稿一覧のレイアウト」から変更可能です。

賢威8の投稿一覧のデフォルト型
デフォルト型(リスト)
賢威8の投稿一覧のカード型
カード型

リスト状のデフォルト型は多くのサイトやブログで採用されている表示方法で、1つずつの記事の内容が分かりやすいメリットがあります。

ただ、コンテンツエリアの横幅いっぱいに表示されてしまうため、すべての記事一覧が縦長になってしまうデメリットがあります。

一方のカード型は、賢威8では一列に3つのカードが表示されるので、デフォルト型よりは縦の長さが短くなり、あまりスクロースしなくても良いです。

しかし、記事一覧がエリア内に数多く表示されてしまうため、記事を見つけにくい恐れがあります。

運営者の好みやサイト訪問者のクリック率や離脱率などを参考にして、一覧表示方法を変更すると良いでしょう。

ちゃんちゃん
トップページだけでなく、カテゴリーページやタグページなども一括変更となります!

色の変更

賢威8の色を変更

賢威8の見出し背景色や文字色などは、カスタマイザーの「色」から一括変更が可能です。

あらかじめ用意されているカラーパターンは、次の6種類あります。

賢威テーマの配色「ターコイズ」
ターコイズ
賢威テーマの配色「ブルーグレイ」
ブルーグレイ
賢威8の配色「ブラウン」
ブラウン
賢威8の配色「スカイブルー」
スカイブルー
賢威8の配色「ピンク」
ピンク
賢威8の配色「レッド」
レッド

それぞれのカラーパターンにはカラー1~カラー6があり、より細かく色をカスタマイズする時に利用します。

ただし、カラー2の色を変更すると、見出しh2やテーブル上部の背景色など複数ヶ所がカスタマイズされてしまいます。

HTML/CSS知識があまりない初心者なら、まずはブログテーマに合ったカラーパターンから選ぶと良いでしょう。

メニューの設定

賢威8グローバルメニューのカスタマイズ

賢威8のカスタマイザーでは、グローバルメニューフッターメニューの2つのメニュー作成と設置が可能です。

グローバルメニューは、ヘッダー部やスマホのハンバーガーメニューから表示されるため、サイトの回遊率を少しでも上昇させるには早めに設置するのがおすすめです。

グローバルメニューに設置できるリンク先は、カテゴリだけでなく任意の投稿ページや固定ページも指定できます。

賢威8のグローバルメニュー作成やカスタマイズの方法は、下記の関連記事で詳しく解説しています。

ウィジェットの設定

賢威8トップページのウィジェット

賢威8のカスタマイザーからは、トップページに関するウィジェットの設置が可能です。

ウィジェットが設置できるエリアは、次の6つです。

設置可能エリア
  • サイドバー
  • トップページのコンテンツ前
  • トップページのコンテンツ後
  • フッター1
  • フッター2
  • フッター3

サイドバー

賢威8のサイドバー

サイドバーに設置するケースが多いウィジェットは、人気記事ランキング更新記事、他にはバナー広告などがあります。

2カラムレイアウトのPC表示の場合、右側か左側に必ず表示されるため注目度の高いエリアです。

スマホ表示ならメインコンテンツの下に表示されるため、スマホからの流入が多いブログの場合は1カラムのサイドバーなしを選択して影響は少ないです。

サイドバーなしの場合は、フッターエリアを活用すると良いでしょう。

賢威8サイドバーのカスタマイズ方法賢威8サイドバーのカスタマイズ方法は、下記の関連記事で詳しく解説します。

フッター

賢威8のフッターエリア

フッターエリアは、サイドバーよりも注目度は低いですが、1カラムで運営する企業サイトなどはウィジェットを上手く活用すると良いでしょう。

フッターには、サイトのロゴやカテゴリー、各種SNSの埋め込みなどが利用されやすいです。

フッターのカスタマイズ方法を合わせて読んで参考にしてください。

ブログ型からサイト型にカスタマイズする方法

新着記事が一覧で表示されるブログ型は新しい情報を知りたいユーザー向きですが、しっかりカテゴリ分けされた悩み解決のサイトや企業のコーポレートサイトなどには向きません

ただし、賢威に限らずWordPressの初期設定のままでは、新着記事一覧が表示されるトップページのデザインはカスタイマイズできません。

メインコンテンツ部分のデザインをカスタマイズするには、記事を書く投稿ページではなく固定ページを利用します。

固定ページであれば新着記事が表示されないトップページが作成可能であり、好みのデザインにカスタマイズもできます。

おすすめ記事カテゴリー分けされた構成が、サイト訪問者にとって見やすいトップページです。

では、賢威8のトップページをサイト型にカスタマイズする方法を紹介します。

トップページを作成する

まずは、トップページに設定するための固定ページを作成します。

wordPressの固定ページを新規追加する方法

WordPress管理画面から「固定ページ」>「新規追加」と順にクリックすれば、固定ページの編集画面へ移行します。

スッキリしたトップページにするために、賢威8のデザインパーツの1つ「マルチカラム」を利用します。

賢威8のマルチカラム

賢威8のマルチカラムは、2分割~6分割の5通りあり、それぞれに余白ありと余白なしが選べるので、合計10通りの中から好きなカラム数を選択します。

それでは、マルチカラムを利用したトップページの作成する流れを解説します。

  1. STEP1
    マルチカラムを設置

    賢威8のマルチカラムを設置する流れ1ツールバーにある「カラム(余白あり)」「カラム(余白なし)」から選びます。

    カラム数が多いと縦に分割されすぎた配置になってしまうので、2カラム3カラムが最適です。

    ちゃんちゃん
    カラムが離れている方が見た目が良いので、余白ありを選びます!

    賢威8で2カラムを設置した状態「■(四角)」が左右2つ設置され、パソコンではそのまま表示されます。また、スマホで見ると分割が解消されて、縦1列になります。

  2. STEP2
    カテゴリーとリンクカードの設置

    賢威8トップページにマルチカラム設置3左右のカラムに、h3タグのタイトルと賢威8のリンクカードが設置できるショートコードを記述します。

    賢威8トップページの2カラムにタイトルとカードを設置パソコンで表示を確認すると、左右にWordPressと収益化のタイトルと、それぞれのリンクカードがあるのが分かります。

    リンクカードはいくつでも設置可能ですが、あまり多いと縦長になってしまうので3つ~5つぐらいがベストです。

  3. FINAL STEP
    2カラムレイアウト完成

    賢威8トップページの2カラム完成全てのカテゴリーとリンクカードの設置が終われば、トップページと分かりやすいタイトルを付けるだけです。

    パーマリンクもそのままで、固定ページを公開して終了。

これで、記事一覧が表示されないトップページが完成します。

記事一覧ページを作成する

トップページに表示されなくなった新着記事の一覧が必要な場合は、別の固定ページを作成すれば対応できます。

  1. STEP1
    新着記事一覧ページを作成

    新着記事一覧を表示する固定ページを作成

    新着記事一覧を表示させる固定ページは、好みのタイトルとパーマリンクを設定するだけ。あとは公開するだけで完成します。

    パーマリンクは分かりやすい「articles」「new-post」などがおすすめです。

  2. FINAL STEP
    一覧ページへのリンク設置

    賢威8 トップページから新着記事一覧へのリンク設置賢威8では、コンバージョン用ボタンがあらかじめ用意されているので、新着記事一覧への内部リンクとして活用します。

    下記のHTMLコードをトップページの好きな場所にコピペしてください。

    <div class="al-c m20">
    <a href="記事一覧へのURLを記述する" class="btn dir-arw_r btn_orange"><span class="icon_arrow_s_right"></span>新着記事一覧はこちら</a>
    </div>

    設定はこれだけで終了で、あとは公開すると完成です。

コンテンツ前エリアに新着記事を表示させる

賢威8で固定ページのコンテンツ部分に新着記事一覧を表示するには、PHPをカスタマイズする必要があり、あまりおすすめしません。

それでも、サイト型トップページに新着記事一覧を表示したい場合は、ウィジェットにある「トップページのコンテンツ前(後)エリア」を活用します。

メインコンテンツ上部に表示したい場合は「前」で、下部に表示したい場合は「後」になっています。

賢威8ウィジェット「トップページのコンテンツ前エリア」

ウィジェットを追加」をクリックすると、赤枠で囲った記事一覧表示が可能な3つの中から選びます。

おすすめの記事一覧表示は、次の2つです。

賢威8「画像付きの一覧表示」
画像付きの記事一覧が表示できるカスタムウィジェット
賢威「画像なしの一覧表示」
画像なしでリスト状に一覧表示するカスタムウィジェット

画像付き記事一覧は新着順でしか表示できませんが、画像なし記事一覧は更新順や除外カテゴリーなど設定可能です。

ホームページ設定に作成した固定ページを指定する

賢威8のホームページ設定

完成したトップページ用新着記事一覧用の固定ページを、カスタマイザー「ホームページ設定」から指定します。

賢威8のホームページ設定

ホームページの表示を「最新の投稿」から「固定ページ」に変更すると、ホームページと投稿ページのプルダウンメニューが現れます。

ホームページにはトップページ用固定ページを選択、投稿ページには新着記事一覧用の固定ページを選択して公開します。

賢威8トップページの設定完了

ホームページ設定で指定した固定ページが、それぞれの設定で正しく表示されていれば完成です。

これで、賢威8でトップページをサイト型にカスタマイズする方法は終了です。

基本的な賢威8の使い方は、下記の関連記事で解説しています。