最新情報

WordPressサイト制作 #06 フッタの作成

WordPressテーマ”Astra3.0"を使ったサイト作成の記録

フッタービルダーを使ったフッタのカスタマイズについて。

使用サーバー:ロリポップ

使用テーマ:Astra

クレジットロゴを修正する

Astra3.0で登場したフッタービルダーを使って、サイト全体のフッタを作成する。

外観>カスタマイズと進んで、左のメニューから[フッタービルダー]を選択。

WordPressサイト構築 #0601

Astra設定メニュー

 

ページを確認すると、ページの最後にサイトのクレジットの中に、使用しているWordPressテーマ(Astra)のクレジットが書かれているのでこれを消したい。

WordPressサイト構築 #0602

WordPressテーマのクレジット。

 

フッタービルダーに入ると、編集エリア下部にフッタービルダーが現われる。

ヘッダービルダー同様の3段構成で、Above、Primary、Belowの3つに分かれている。

いちばん下のBelowにクレジット用パーツ”Copyright"が入っている。

 

フッタービルダー上の[Copyright]か、または左メニュー内の[Copyright]をクリックして、プロパティ設定画面を開く。

WordPressサイト構築 #0603

”Copyright"パーツの設定を開く。

 

Copyrightのプロパティが現われる。

左側のテキスト編集エリアに、コピーライト表示用のテキストとメタタグが書かれている。

WordPressサイト構築 #0604

コピーライト表記を確認。

 

後ろの”Powered by~”部分が不要なので、セパレーターの"|"以降を選択して消去。

[公開]をクリックしてページをプレビューし、クレジットの後半部分が消えているのを確認。

WordPressサイト構築 #0625

テンプレートクレジットが消去された。

 

Pro版のホワイトラベル機能

有料版のAstra Proには、クレジットのメタタグを残したまま内容を自由に書き換えられる”ホワイトラベル”機能がある。

ホワイトラベルを使うことで、テーマ名をカスタマイズしたり制作者の名前やリンク先サイトを書き換えられる。

WordPressサイト構築 #0606

Pro版のホワイトラベル機能

 

フッターのパーツを配置する

前述のとおり、フッタービルダーにはAbove、Primary、Belowの3つの段があり、初期設定ではいちばん下のBelowにすでに”Copyright”が割り当て済み。

残るAboveとPrimaryにパーツを配置することで、オリジナルのフッターを作成できる。

 

また、各フッター内をブロックに分割できる。

Belowフッターは1ブロックのみだが、Aboveはふたつ、Primaryはつに分かれているので、計5つのパーツを登録できる。

 

まだパーツが配置されていない空白ブロックをマウスでポイントすると[+]ボタンが現われ、クリックするとパレットがポップアップしてパーツを選択できる。

WordPressサイト構築 #0607

フッターブロックにパーツを配置する。

 

各ブロックに配置できるパーツはひとつだけ。また使用できるパーツの数は限られているので、配置するたびに残りの使えるパーツが減っていく。

このため同じパーツを複数の場所に配置することはできない。

初期状態で使えるパーツは、HTML1とHTML2、Footer Menu、Social、Widget1~4の8個。

HTML1とHTML2は自由にコードを書けるので、HTMLの知識があれば自由に使える。

Footer MenuはWordPressのメニュー設定で作成したフッターメニュー用。

SocialはSNSアイコンの設置専用。

WordPressサイト構築 #0608

各ブロックにフッターパーツを配置する。

 

パーツを配置すると左のメニューエリアに、アイテムの一覧が表示される。

アイテムを編集するときはここをクリックするか、フッタービルダー上に配置したボタンをクリックする。

WordPressサイト構築 #0609

フッターパーツ編集用メニュー。

 

なお、パーツを配置しただけでは、プレビューしてもなにも表示されない。

WordPressサイト構築 #0610

パーツを配置しただけでのプレビュー。

 

フッターパーツの内容を記入する

配置したHTMLパーツの内容を入力してフッターコンテンツを作成する。

左のメニューまたはフッタービルダー上のパーツをクリックするとプロパティ編集画面が現われる。

 

”HTML1"に事業者の業務内容を入力。

WordPressサイト構築 #0611

HTML1の内容を入力する。

WordPressサイト構築 #0612

入力した内容。

 

続いてSNSアイコンにリンクを設定。

Primaryヘッダー上の[Social]をconをクリックすると、左のプロパティパネルに、Facebook、Twitter、Instagramの3項目が表示される。

それぞれの項目をクリックするとURLを指定できる。

WordPressサイト構築 #0613

SNSのURLを入力。

 

登録済みのアイコンを非表示化したり、その他のソーシャルサービスのアイコンを追加することもできる。

WordPressサイト構築 #0614

アイコンの非表示化と追加。

 

電話のアイコンを追加したところ。

WordPressサイト構築 #0615

 

プレビューをチェックして配置を調整する

フッターに情報を入力したら、プレビューでチェックしてみる。

HTML1では番号なしリスト(Unordered List)を使ったが、そのまま表示するとブレットの黒丸とテキストが離れてカッコ悪いことが判った。

WordPressサイト構築 #0616

テキストが中央揃えなのでカッコ悪い。

 

これは、HTML1ブロック内のテキストが中央揃えになっているため。

 

そこで設定画面に戻って、左揃えに変更する。

WordPressサイト構築 #0617

「配置」を左に変更する。

 

ブロック内を左揃えにしたことで、番号なしリストの表示がキレイになった。

WordPressサイト構築 #0618

HTML1が左揃えになった。

 

以下、同様にほかのフッターブロックについても適宜調整していく。

 

タブレットとモバイルの設定

タブレットモードとモバイルフォンモードでの表示も確認しておく。

まずタブレットモードを見ると、プライマリフッター左側のブロック(すなわちHTML1のコンテンツ)がフッターの左端にぴったりくっつき過ぎている。

WordPressサイト構築 #0619

タブレットモードでの表示。

 

またモバイルフォンモードでも同様にHTML1の内容が左に寄りすぎなのに加えて、縦に並んでいるHTML1とHTML2もくっつき過ぎで境が判りづらい。

WordPressサイト構築 #0621

モバイルフォンモードでの表示。

 

そこでこのふたつを「Design」タブで調整する。

WordPressサイト構築 #0621

HTML1のデザインタブ

 

「マージン」グループのいちばん左にあるアイコンをクリックすることで、上下左右4つの値を個別に指定できるようになる。

左のマージンを大きくする。

WordPressサイト構築 #0622

連携を解除して値を個別に指定。

 

モバイルモードでも同様の指定を行う。

WordPressサイト構築 #0623

モバイルモードでのDesignタブ。

 

WordPressサイト構築 #0624

HTML1の左と下にマージンを指定。

HTML1の下にマージンを確保することで、HTML2との区切りがより判りやすくなった。

 

背景色と文字色の指定

フッタービルダーの仕上げとして、背景色を指定することでメインコンテンツと視覚的に差別化し、フッターであることをより強調する。

まずPrimary Footer左端のコグ(歯車)アイコンをクリックして、Primary Footerのプロパティ画面を開く。

WordPressサイト構築 #0625

Primary Footerのプロパティを開く。

 

続いてDesignタブに切り替えて、Primary Footerの背景色を指定する。

WordPressサイト構築 #0626

Designタブでフッターの背景色を指定。

 

ここでは濃い緑色(ブリティッシュレーシンググリーン)を設定してみたが、HTML1とHTML2の文字色が黒なので、読みづらくなってしまった。

WordPressサイト構築 #0627

背景色が濃い緑なので文字が読みづらい。

 

そこで再びHTML1とHTML2のプロパティを開いて、それぞれ文字色を変更する。

WordPressサイト構築 #0628

HTML1の文字色を変更する。

 

HTML1の文字色を”白”に変更したが、見出しの文字には影響しないので依然として読みづらいままだ。

WordPressサイト構築 #0628

文字色を変更したが、見出しは元のまま。

 

そこで”General”タブに切り替えて、見出し部分の文字色も変更しておく。

WordPressサイト構築 #0630

見出しの文字色も白に変更する。

 

編集ボックス上の表示に注意

文字色を白にしたことでブラウザ上では見やすくなったが、プロパティ画面の編集エリア上では、白地の背景に白い文字なので読みづらくなっていることに注意。

後日文字を編集するときなどは、一見空行が入っているだけに見えてしまうので注意すること。
もし可能ならWordPress管理画面のカラースキームを変更してしまったほうがよい。

 

-最新情報
-

© 2021 FLYINGJUNK.NET