【WordPress】ボックスを横並びにする方法【HTMLとCSS】




悩み人

今、サイトを制作しているのですが、テキストを並列させたいと思っています。でもやり方が全く分からず、困っています。

このようなお悩みを解決します。

本記事の内容

・テキストを横並びにする方法
・まとめ:WEBサイトの制作をするなら必須の知識です

本記事の信頼性

本記事を書いている僕は、物販会社を経営しつつ、せどりやWEBライティングをしています。

今回は、僕の会社のサイトで、テキストを2列にするという作業が発生したので、備忘録的に方法について残しておきます。

具体的には、サービス内容を2列に並べた感じです。

ちなみに、当ブログはOPENCAGE(オープンケージ) という、ブロガー向けのテーマを扱っているサイトのWordPressテーマ「STORK19」 というテーマを利用しています。

コーポレートサイトは、AFFINGERというテーマを使用しているのですが、今回はAFFINGER上で作業をした内容になります。

しかし、コード自体は汎用的なので問題なく使える方法になります。

テキストを横並びにする方法

今回は、簡単にテキストを横並びにする方法を説明します。

これさえできれば、そのテキストに合わせて画像を貼ったりリンクを貼ったりできますので、原型としてこれを使えるようになることに価値があると考えています。

コードは2種類あり、HTMLとCSSです。

順番はどちらからでも構いません。

その①:並列させる文字を囲む【HTML】

ボックス1とボックス2というテキストを並べたい場合、まずは以下のようにテキストを囲みます。

<div class="ib-box">ボックス1</div>
<div class="ib-box">ボックス2</div>

その②:「追加CSS」に追記する【CSS】

テーマに標準で付いていることが多い「追加CSS」という欄に以下のコードを追記します。

※ 幅などは適宜修正してください。

.ib-box{
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 13px;
  }

その③:テキストをプレビューで確認してみる

以下のように、テキストが横並びになっていれば成功です。

その③:テキストをプレビューで確認してみる

まとめ:WEBサイトの制作をするなら必須の知識です

今回は、テキストを横並びにしましたが、なぜこのようなことをするかと言うと、見栄えの問題です。

WEBサイトの全体レイアウトやデザインを見た時に、テキストや画像が1列になっていると見栄えが悪い時があります。

このような場合の対処方法として、覚えておいた方が良いでしょう。

個人ブログでは使用機会が少ないかもしれませんが、より見やすく表現するといった場面で使う可能性がありますので、是非覚えてみてください。

今回は以上です。

シェアしてくれると喜びます。

ABOUT US

hiroki6
ブログ×本せどり / hiroki6運営(月4500PV)/ 本せどり(月33万)【経歴】大学 / イギリス留学 ▶ 大学院 / NPO法人チーム創設 ▶ 学生起業失敗 ▶ IT企業でWebマーケ担当(月45万 + せどり月15万)▶ 2年で退職 ▶ 会社経営(物販・Webマーケ)● 複業と独立を応援します ● 20代