広告 WordPress

WordPress(ワードプレス)でCSSのfloatを実装!

2021年5月19日

 

こんにちは、keiです!

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

STEP2:CSSで調整

 

 

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

 

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

 

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

 

 command

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

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

.clear {
	clear: both; 
}

 

横並びにしたいブロック1
横並びにしたいブロック2

 

 

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

 

ちなみに、もし画像にしたい場合は、「<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; 
}

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴8年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress