HOME  /WordPress(応用)
 /フッタを作成する
2020年02月26日

フッタを作成する

フッタも固定ページや投稿ページに合ったデザインにしています。

1.フッタプログラム

フッタのプログラムは下記になります。

<div id='background'>
	<div id='footer-contener'>
		<div id='footer-data'>© 2015 – <?php echo date('Y'); bloginfo('name'); ?> All rights reserved.</div>
	</div>
</div>

<?php wp_footer(); ?><!-- WordPress必須設定 -->
</body>
</html>

※1.背景(id=’background’)は、固定ページや投稿ページと同じ背景です。

※2.フッタコンテナ(id=’footer-contener’)は、PC、タブレット、スマホで表示位置を変えます。

※3.フッタデータ(id=’footer-data)は、レスポンシブ対応にします。

※4.「wp_footer()」はヘッダで指定した「wp_head();」と対の設定でWordPressの必須設定です。

※5.</body>と</html>もヘッダで指定した<body><html>と対の指定です。

2.CSSの設定

バックグラウンドは既に指定しているのでフッタに関連する物だけ設定します。

/*****************************************/
/* フッタ設定                            */
/*****************************************/
/* タブレットの場合は左右に8%の余白 */
#footer-contener{margin:0 8%;}
#footer-data{font-size:14px;font-size:0.875rem;}
/* タブレットの場合は左右に2%の余白 */
@media screen and (min-width:768px) and (max-width:991px){
	#footer-contener{margin:0 2%;}
}
/* スマホの場合は画面枠一杯 */
@media screen and (max-width:767px){
	#footer-contener{margin:0 0;}
}

※1.PCの場合は左右に8%の余白、タブレットの場合は左右に2%の余白、スマホは画面一杯にしています。

※2.フッタデータはrem指定にする事によりレスポンシブ対応にしています。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法を解す津指定ます。

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。