サイト画面の各名称と ルクセリタスの外観カスタマイズの設定｜WordPress

Webサイト作りの最初は サイトの外観のデザインを設定したい！と思うはず。

どんなに優れたテーマでも デフォルトのままではつまらない！というか、
ほかの人と被っては せっかくのサイトが台無しです。

自分の好みにデザインして サイト運営していきたいですよね。
ですが、初めてサイト作成していく場合は カスタマイズするにも
それぞれの名称と役割などを ある程度 理解する必要があります。

WordPressテーマの ルクセリタスでは 外観カスタマイズから
サイトのデザインの大半を かんたんに設定することができるのですが
まずは これらの各名称などをしっかりと把握したうえで 設定していきたいと思います。

サイト画面の各名称とそれぞれの機能について

ここに これからカスタマイズに出てくる項目、サイト画面の主な項目を書いてみました。

① ブルーの部分 帯状メニューバーとグローバルナビゲーションは サイト内の情報を
分かりやすく伝えるためのメニュー表示になります。

② パンくずリンクは ユーザーが 今どこにいるのかを 分かりやすくするために必要なリンク。

③ サイドバーと 記事の部分を 1カラム・２カラムと表現します。
両サイドに サイドバーを表示する場合 3カラム、サイドバーを設置しない場合は１カラムを選択します。

④ サイドバーには カテゴリー・新着記事・広告などを 自由に設置できるウィジェットがあります。

外観のイメージは これらのブロックや背景色などで 幾通りにも変化させることができます。

外観カスタマイズ

WordPressの 外観 > カスタマイズ機能は サイト画面を表示させ 外観をチェックしながら
カスタマイズできたりするのですが、テーマによっては編集画面が別にあり
サイト画面を見ながらの カスタマイズ項目が少ないものもありますが ルクセリタスの場合、
外観カスタマイズから 仕上がりのイメージを確認しながら指定していくことができます。

外観カスタマイズへのアクセス

外観カスタマイズへは いろいろな場所から移動できるようになっています。

サイト画面をチェックしている最中でも 気になる箇所があればすぐに カスタマイズ画面へ移動できます。

外観カスタマイズは 画面左に編集項目の一覧があり 右側のサイト画面が
カスタマイズに合わせて画面が変更され表示されます。

主なカスタマイズ項目の使いかた

各項目の名称と使いかたの分かりにくいものを ピックアップしています。

それぞれの詳しい使い方などは 別記事にまとめていますので
合わせてご紹介させていただきます。

サイト情報とサイトアイコン

サイトのタイトル・キャッチフレーズは 管理画面の設定 ＞一般設定からも編集することが出来ます。

サイトアイコンはブラウザーのタブや ブックマークバー・モバイルでは
検索表示リストに このアイコンが表示されます。

全体レイアウト

全体レイアウトでは コンテナのサイズや サイト画面に使用されるベースの色のほか
４つの表示方法を選択します。

記事一覧
TOPページ・カテゴリーなどに記事の一覧が表示されますが
このデザインは グリッドレイアウトにも関連のある項目になります。

ページャー表示
サイト１ページに表示させる記事数は 管理画面の設定 ＞ 表示設定から行います。

そこで設定された 記事数よりも多い場合は ページを付けてあげないと
一覧表示が分かりづらく 不親切な状態になってしまいます。

関連記事
記事に設定した カテゴリーや タグをもとに 関連記事が設定されます。

Next/Prev
Next/Prev は 記事の下に設置される ナビゲーションリンクです。

関連記事と Next/Prevは 投稿ページ・固定ページ それぞれに違う設定にすることが出来ます。

グリッドレイアウトと サムネイル画像(アイキャッチ)

先ほど出てきました記事一覧 の表示方法で タイル型やカード型といった
レイアウトや画像・タイトル・冒頭の文章などの表示方法を選んだりすることで
グリッドレイアウトを作成します。

グリッドレイアウトに画像を入れる場合、とサムネイルの設定も関連していますので まとめて書かせて頂きます。

サムネイル画像を入れると 全体に色が入りすぎて嫌がられる場合もありますが
個人的には 文字ばかりのサイトよりも 画面が見やすくなるように思います。

記事一覧で使用される グリッドレイアウトでは横長の画像を使うことができますが
ルクセリタスでは サイドバーや 関連記事のサムネイルのサイズは正方形のままです。

グリッドレイアウトのカスタマイズはこちら↓

カラム操作

先ほどの画像の③ カラムですが、
投稿記事とサイドバーをどのような配置にするのか、を設定する項目です。

こちらも 投稿ページと固定ページを違うデザインで設定することが出来ます。

コンテンツ領域とサイドバー

コンテンツ領域は お好みで設定してもらえますが サイドバーに広告を設置する場合、
広告の画像（バナー）のサイズがありますので 良く使用されるサイズに合わせておくことをお勧めします。

ディスカッション

コメント欄やトラックバックの表示・非表示設定するのが ディスカッションの項目です。

ディスカッションの設定は こちらの外観カスタマイズと 管理画面の設定 ＞ ディスカッションから行います。

パンくずリンク

パンくずリンクは サイトの案内役のようなものです。

ここでは、パンくずリンクを設置する場所やカラーを指定します。

メニュー ( グローバルナビゲーション )と帯状のバー

サイトタイトルの下にあるバーが グローバルナビゲーション です。
管理画面の外観 ＞メニューから 表示したい項目を作成します。

サイト画面の上部にある帯状のバーもメニューを設置することが出来る場所になります。

メニュー・グローバルナビ については こちらの記事にまとめています。

目次

目次は 見出しが多い記事の時にあると便利な機能です。

1. 自動で目次を挿入する は
   投稿記事の見出しが表示条件の数になると 目次が自動的に表示されるという仕組みです。
    – 見出しの数というのは H2の数のことを指しています –
2. スタイルの適用ありでは 難しいカスタマイズをすることなく
   バランスの良い目次を表示することができます。
3. 見出しの階層は 多くても H4 までが バランスがいいのではないでしょうか？

あとは、目次を閉じた状態で ユーザーが必要な時に開く、という設定 と
色を付けた時のイメージ画像です。

文字や枠のサイズ・先頭の数字をマークに変えるなど、CSSカスタマイズで変更可能です。

ブログカード

ブログカードは カード型になった URL（リンク）のことです。

最近は このスタイルがすごく多いですが、すべてのURLをカード型にしたくない場合は
直書きのURLをブログカード化する のチェックは付けずに
投稿画面から その都度設定し使い分けることができます。

追加CSS

ここまで 各項目に沿って かんたんにカスタマイズすることができましたが
さらにカスタマイズを加えて サイトをイメージに合わせて スタイルチェンジしたい！
または 文字の装飾や枠など、デザインを CSS (ｽﾀｲﾙｼｰﾄ) に作成していきたい場合に
こちらの追加CSSを使用しカスタマイズしていくことができます。

先ほどの目次を例に ちょっとだけカスタマイズをしてみます。

カスタマイズした項目は　囲み枠と文字のスタイルなどです。
目次の項目に無かった CSSだけを追加CSSに書き込み OKなら公開をクリックします。

指定したCSSコードはこんな感じです。

囲み枠の設定が重複してしまっているので クリアに戻し、文字色をバランスを整えるために再設定して完了です。