WordPressテーマ”Astra3.0"を使ったサイト作成の記録
フッタービルダーを使ったフッタのカスタマイズについて。
使用サーバー：ロリポップ
使用テーマ：Astra
クレジットロゴを修正する
Astra3.0で登場したフッタービルダーを使って、サイト全体のフッタを作成する。
外観＞カスタマイズと進んで、左のメニューから［フッタービルダー］を選択。
Astra設定メニュー
ページを確認すると、ページの最後にサイトのクレジットの中に、使用しているWordPressテーマ(Astra)のクレジットが書かれているのでこれを消したい。
WordPressテーマのクレジット。
フッタービルダーに入ると、編集エリア下部にフッタービルダーが現われる。
ヘッダービルダー同様の3段構成で、Above、Primary、Belowの3つに分かれている。
いちばん下のBelowにクレジット用パーツ”Copyright"が入っている。
フッタービルダー上の[Copyright]か、または左メニュー内の[Copyright]をクリックして、プロパティ設定画面を開く。
”Copyright"パーツの設定を開く。
Copyrightのプロパティが現われる。
左側のテキスト編集エリアに、コピーライト表示用のテキストとメタタグが書かれている。
コピーライト表記を確認。
後ろの”Powered by～”部分が不要なので、セパレーターの"|"以降を選択して消去。
［公開］をクリックしてページをプレビューし、クレジットの後半部分が消えているのを確認。
テンプレートクレジットが消去された。
Pro版のホワイトラベル機能
有料版のAstra Proには、クレジットのメタタグを残したまま内容を自由に書き換えられる”ホワイトラベル”機能がある。
ホワイトラベルを使うことで、テーマ名をカスタマイズしたり制作者の名前やリンク先サイトを書き換えられる。
Pro版のホワイトラベル機能
フッターのパーツを配置する
前述のとおり、フッタービルダーにはAbove、Primary、Belowの3つの段があり、初期設定ではいちばん下のBelowにすでに”Copyright”が割り当て済み。
残るAboveとPrimaryにパーツを配置することで、オリジナルのフッターを作成できる。
また、各フッター内をブロックに分割できる。
Belowフッターは1ブロックのみだが、Aboveはふたつ、Primaryはつに分かれているので、計5つのパーツを登録できる。
まだパーツが配置されていない空白ブロックをマウスでポイントすると［＋］ボタンが現われ、クリックするとパレットがポップアップしてパーツを選択できる。
フッターブロックにパーツを配置する。
各ブロックに配置できるパーツはひとつだけ。また使用できるパーツの数は限られているので、配置するたびに残りの使えるパーツが減っていく。
このため同じパーツを複数の場所に配置することはできない。
初期状態で使えるパーツは、HTML1とHTML2、Footer Menu、Social、Widget1～4の8個。
HTML1とHTML2は自由にコードを書けるので、HTMLの知識があれば自由に使える。
Footer MenuはWordPressのメニュー設定で作成したフッターメニュー用。
SocialはSNSアイコンの設置専用。
各ブロックにフッターパーツを配置する。
パーツを配置すると左のメニューエリアに、アイテムの一覧が表示される。
アイテムを編集するときはここをクリックするか、フッタービルダー上に配置したボタンをクリックする。
フッターパーツ編集用メニュー。
なお、パーツを配置しただけでは、プレビューしてもなにも表示されない。
パーツを配置しただけでのプレビュー。
フッターパーツの内容を記入する
配置したHTMLパーツの内容を入力してフッターコンテンツを作成する。
左のメニューまたはフッタービルダー上のパーツをクリックするとプロパティ編集画面が現われる。
”HTML1"に事業者の業務内容を入力。
HTML1の内容を入力する。
入力した内容。
続いてSNSアイコンにリンクを設定。
Primaryヘッダー上の[Social]をconをクリックすると、左のプロパティパネルに、Facebook、Twitter、Instagramの3項目が表示される。
それぞれの項目をクリックするとURLを指定できる。
SNSのURLを入力。
登録済みのアイコンを非表示化したり、その他のソーシャルサービスのアイコンを追加することもできる。
アイコンの非表示化と追加。
電話のアイコンを追加したところ。
プレビューをチェックして配置を調整する
フッターに情報を入力したら、プレビューでチェックしてみる。
HTML1では番号なしリスト（Unordered List）を使ったが、そのまま表示するとブレットの黒丸とテキストが離れてカッコ悪いことが判った。
テキストが中央揃えなのでカッコ悪い。
これは、HTML1ブロック内のテキストが中央揃えになっているため。
そこで設定画面に戻って、左揃えに変更する。
「配置」を左に変更する。
ブロック内を左揃えにしたことで、番号なしリストの表示がキレイになった。
HTML1が左揃えになった。
以下、同様にほかのフッターブロックについても適宜調整していく。
タブレットとモバイルの設定
タブレットモードとモバイルフォンモードでの表示も確認しておく。
まずタブレットモードを見ると、プライマリフッター左側のブロック（すなわちHTML1のコンテンツ）がフッターの左端にぴったりくっつき過ぎている。
タブレットモードでの表示。
またモバイルフォンモードでも同様にHTML1の内容が左に寄りすぎなのに加えて、縦に並んでいるHTML1とHTML2もくっつき過ぎで境が判りづらい。
モバイルフォンモードでの表示。
そこでこのふたつを「Design」タブで調整する。
HTML1のデザインタブ
「マージン」グループのいちばん左にあるアイコンをクリックすることで、上下左右4つの値を個別に指定できるようになる。
左のマージンを大きくする。
連携を解除して値を個別に指定。
モバイルモードでも同様の指定を行う。
モバイルモードでのDesignタブ。
HTML1の左と下にマージンを指定。
HTML1の下にマージンを確保することで、HTML2との区切りがより判りやすくなった。
背景色と文字色の指定
フッタービルダーの仕上げとして、背景色を指定することでメインコンテンツと視覚的に差別化し、フッターであることをより強調する。
まずPrimary Footer左端のコグ（歯車）アイコンをクリックして、Primary Footerのプロパティ画面を開く。
Primary Footerのプロパティを開く。
続いてDesignタブに切り替えて、Primary Footerの背景色を指定する。
Designタブでフッターの背景色を指定。
ここでは濃い緑色（ブリティッシュレーシンググリーン）を設定してみたが、HTML1とHTML2の文字色が黒なので、読みづらくなってしまった。
背景色が濃い緑なので文字が読みづらい。
そこで再びHTML1とHTML2のプロパティを開いて、それぞれ文字色を変更する。
HTML1の文字色を変更する。
HTML1の文字色を”白”に変更したが、見出しの文字には影響しないので依然として読みづらいままだ。
文字色を変更したが、見出しは元のまま。
そこで”General”タブに切り替えて、見出し部分の文字色も変更しておく。
見出しの文字色も白に変更する。
編集ボックス上の表示に注意
文字色を白にしたことでブラウザ上では見やすくなったが、プロパティ画面の編集エリア上では、白地の背景に白い文字なので読みづらくなっていることに注意。
後日文字を編集するときなどは、一見空行が入っているだけに見えてしまうので注意すること。
もし可能ならWordPress管理画面のカラースキームを変更してしまったほうがよい。
