フッターのカスタマイズ。1つのウィジェットエリアに複数のウィジェットを格納して横並びする方法

この前の方法は、フッターに3つのウィジエットエリアを追加する方法です。

ウィジェットのカスタマイズ1　記事上と記事下、フッターにウィジェットを複数追加する方法。

今回は、そうではなく、1つのウィジエットエリアに3つの項目を入れ、なおかつ横並びにする方法です。

その方法を考えていたら、

そういえば、メニューバーを作成する際に、よくulのタグを横並びにして使っていたな。 と思いました。今回はその方法をフッターに利用してやってみます。前はbefore_widgetやafter_widgetは、pタグのみでしたが、今回はdivとulにクラスを作成します。

function.php

register_sidebars(1,
    array(
    'name'=>'フッター',
    'id' => 'footer',
    'before_widget' => '
',
    'after_widget' => '
',
    'before_title' => '
',
    'after_title' => '
',
));

スタイルシートを定義します。

style.css

div.footer-widget-area {
}

ul.footer-widget-container {
	float: left;
	width: 300px;
	height: auto;
	margin: 0px;
	padding: 0px;
}

パーセント(33%)と指定するとレスポンティブデザインの場合、その比率のまま、横並びになってしまいます。 スマホは縦並びにしたい場合、ピクセル指定(300px)すれば、勝手に下に回り込みます。 高さはautoにしておけば、綺麗に回り込みます。 marginとpaddingは適当に調整してください。

フッターを呼びます。

single.php

Web屋ではなく、思いつきでやったので、この方法が一般的な方法かは知りません(^^; まあ、こんな感じでやってみた程度のネタです。もうちょっとやりようがある気もしますが、今回はこんなところで。 参考程度にしてください。