2014年5月19日 (月)

カスタムレイアウトでフッターを追加する

「ヘッダーメニューの追加」と「固定的なウェブページの作成」を解説してきましたが、それに関連して、コピーライトなど記載しておくケースが多い、「フッターメニューの追加」の方法をご説明します。




ヘッダーメニュー追加と同じように、管理画面上部の [ブログ管理] - [デザイン] をクリックし、デザインページで [表示項目を選択] をクリックする。

Custam0105

「表示項目を選択」ページの「カスタムHTML」項目で [モジュールを追加] をクリックする。
Lekumofooter01




名前は「フッター」にし、HTMLの部分にはブログのフッターに表示したい文字列などを入力する。
(ここではコピーライトとリンクを設置しています。)

(c) <a href="http://www.sixapart.jp/">Six Apart, Ltd.</a>




[保存] ボタンをクリックする

Custam0116




保存後に [フッター] にチェックを入れる。

Custam0117





ページ下までスクロールし [変更を保存] ボタンをクリックする。

Custam0106_2






次に [並べ方を変更] をクリックする。

Custam0107






先ほど追加したフッターが一番上に表示されているので、一番下にドラッグ&ドロップで移動する。Lekumofooter02






[変更を保存] ボタンをクリックしブログを確認する。

Lekumofooter03

このままだと区切りが無くわかりにくいため、 [カスタムCSSウィザード] の「カスタムCSS」項目に以下の内容を追記する。

Lekumofooter04_2

#bottom-footer {
border-top: 1px solid #ccc;
}



[適用] ボタンをクリックし、右上の [変更を保存] をクリックするとページに反映され、以下のようになります。

Lekumofooter05



以上でフッター設置の完了です。利用規約やプライバシーポリシーなどのリンクもここに記載することもあります。





次回は「ヘッダーバナー画像の設置方法」をご紹介します。