初めてのワードプレス 9.外観カスタマイズ
記事が完成し、公開前のすべての設定を終えたら「公開」ボタンをクリックして投稿しますが、投稿の表示を見ると白バックのシンプルなブログ画面です。そこで今度は外観のカスタマイズを行います。もちろん投稿前にカスタマイズすることもできます。
- 独自ドメイン取得
- レンタルサーバー契約
- 独自ドメインとレンタルサーバーを関連づける
- WordPressインストール
- 新規テーマインストール
- 基本設定h
- 生地執筆の基本操作方法
- 画像･カテゴリー･タグの設定と公開
- 外観カスタマイズ
ブログ管理画面なら左の管理バーから「外観」「カスタマイズ」、または「Luxeritas」「カスタマイズ(外観)」をクリックします。どちらも同じです。
ブログ画面ならブログ画面上部のメニューバーから「カスタマイズ」をクリックします。
ブログ画面左側に、カスタマイズ用のサイドバーが表示されます。ここで様々な外観カスタマイズができます。右上の歯車アイコンをクリックして、変更をすぐに公開するか下書きとして保存するかを選択します。
また、一番下のアイコンでPC、タブレット、スマホの表示を切り替えて確認することができます。
カスタマイズバーの表示、非表示を切り替えることができます。
サイト情報 / サイトアイコン
サイトのタイトルを入力します。キャッチフレーズには、どのような内容なのかサイトの簡単な説明を書きます。なくても大丈夫です。サイトタイトルの下に表示されます。
サイトアイコンはファビコンとも言われ、Google Chromeなどのインターネットブラウザーのタブに表示される、サイト独自のアイコンになります。小さくても分かりやすい画像を作って登録します。
512ピクセル以上の正方形の画像を作成し、パソコンに保存、「画像を選択」をクリックします。
「ファイルをアップロード」をクリックし、保存したファイルを選択、右下の「画像切り抜き」をクリックします。
ブラウザーのタブにサイトアイコンが表示されました。
サイト情報 / サイトアイコンのカスタマイズは完了なので「下書きとして保存」をクリックします。（歯車マークから公開を選択している場合は「公開」ボタンが表示されています）
カスタマイズを終了する場合は「×」をクリックします。続けて別の項目のカスタマイズを行うときは「＜」をクリックします。
背景色
ブログ画面が白一色で見にくいので項目を飛ばして、まずは背景色を変えます。カスタマイズバー中程の「背景色 / 枠線色」をクリックします。
背景色の「色を選択」をクリックします。
好きな色の位置をクリックします。
次に、ヘッダー背景色もカラーコードをコピペで同じ色にしました。
このような感じになりました。
カラム操作
カラム（column）とは、もともと新聞や雑誌などのコラムと同意で、囲み記事などのことを言います。ブログは、一番上のヘッダーと一番下のフッターの間に、記事が表示されるコンテンツ領域があり、その横にサイドバーがあるのが一般的な形です。その、コンテンツ領域とサイドバーについてのカスタマイズです。
左のカスタマイズバーの、「カラム操作」をクリックします。
カラム数
カラム数を変更するときは▼をクリックし、1カラム、2カラム、3カラムいずれかを選択します。ページごとに設定できますが、とりあえず一番上のデフォルトの欄だけ操作します。
1カラムはコンテンツ領域のみ、2カラムはコンテンツ領域とサイドバー、3カラムはコンテンツ領域の両側にサイドバーとなります。
サイドバーの位置
コンテンツ領域に対してサイドバーをどの位置にするかをカスタマイズします。上で設定したカラム数の▼をクリックし、サイドバーを配置したい位置を選択します。
※ 3カラムの場合、コンテンツ領域の両サイドに配置、コンテンツ領域の右に2個配置、左に2個配置のいずれかになります。
領域の分離と結合
それぞれの項目を分割表示にするか、一体化して表示するか、要はそれぞれの境界をどうするかのカスタマイズです。各項目でいずれかを選択します。
例えばサイドバーだと、このようになります。
グリッドレイアウト
ワードプレスの最初の設定の時に、表示設定で「最新の投稿」を選択した場合、トップページには最新の記事が一番上で、記事一覧が表示されるようになります。
その、記事一覧をどのように表示させるかのカスタマイズを行います。カスタマイズバーの「グリッドレイアウト」をクリックします。
▼をクリックします。
どのタイプにするかを選択します。最大○列というのは、スマホ、タブレット、パソコンと画面サイズによって表示させるリスト数が自動的に変わるのですが、大きなパソコンの画面で、最大で横に何枚表示するかという設定です。
通常スタイルです。
タイル型（最大3列）です。表示画面が大きくても横に3枚までしか表示されません。
カード型（最大1列）です。1列を選択すればスマホでもパソコンでも1枚ずつの表示です。
大枠の外観カスタマイズとして、最後にサイドバーの幅を設定します。カスタマイズバーの「コンテンツ領域とサイドバー」をクリックします。
「サイドバーウィジェットの幅」という項目の2カラム目の数字を入力します。カラム数3の場合は両方設定します。
設定したら「公開」ボタンをクリックします。
大枠の外観カスタマイズは以上です。後は投稿しながら少しずつカスタマイズしていきます。
タイトル・ロゴ画像
ヘッダーに表示されるブログタイトルが味気ないので、画像に変更したいと思います。外観カスタマイズバーから、「背景・タイトル・ロゴ画像」をクリックします。
「サイトタイトルを画像にする」の「画像を選択」をクリックします。
「ファイルをアップロード」「ファイルを選択」をクリックし、パソコンに保存済みの画像ファイルをアップロードします。
ライブラリに追加されますので「画像を選択」をクリックします。
木彫りで作ったロゴの画像をアップロードしました。
ワンポイントロゴ画像
ロゴ画像とは別に、ワンポイントロゴ画像を設定することができます。ブログタイトル、あるいはロゴ画像の左側に付きます。「ワンポイントロゴ画像」の「画像を選択」をクリックし、先ほどと同様に画像をアップロードします。
サイトアイコンのところで使った画像をワンポイントロゴ画像としました。ただしそのままではサイズが大きすぎるので、縮小した画像を別画像としてアップロードしました。
このようなヘッダーになりました。
