WordPress（ワードプレス）でCSSのfloatを実装！

こんにちは、keiです！

WordPressのTOPページにCSSのfloatを使って、要素を横並びに実装してみました。

ちなみに、当ブログではワードプレステーマはアフィンガー５を使っています。

アフィンガー５では、floatを使わなくても簡単に横並びにすることができますが、練習のために記事にしておきます。

簡単にできるので、TOPページや記事内のカスタマイズに参考になりましたら幸いです。

STEP1:HTMLのコードをコピー&ペースト

以下のコードをコピーします。

 command
<div id="side1">
		横並びにしたいブロック１
	</div>
	<div id="side2">
		横並びにしたいブロック２
	</div>
</div>

STEP2:CSSで調整

通常、ワードプレスでは、「外観 → テーマの編集 → スタイルシート(style.css)」か、FTPからCSSを編集ができます。

当ブログが使っているアフィンガー５では、「外観 → カスタマイズ → 追加CSS」からCSSを編集できるので、こちらに追加していきます。

以下のコードをコピーして貼り付けます。

 command

#side1 {
	width: 300px;
	float: left;
}

#side2 {
	width: 300px;
	float: left;
}

.clear {
	clear: both; 
}

ちょっと分かりづらいですが、上記のように横並びになりましたら完了です！

ちなみに、もし画像にしたい場合は、「<p><img src ="お好みの画像"> class="hogehoge1"</p>」と「<p><img src ="お好みの画像"> class="hogehoge2"</p>」のHTMLを設定してあげます。

CSSは、以下の通りです。

 command
img.hogehoge1{
float:left;
}
img.example2{
float:right;
}
.clear {
clear: both; 
}