低価格ホームページ制作 シンプルテイストならWordPressのカラムの入れ替えも簡単！
はじめに
WordPressのカラムブロック アイコン
ホームページを作ったりブログなどを書いたりしていると、PCでは画像と文章を左右交互に並べて、スマートフォン（以下スマホ）では画像を先に、文章を後に（もしくはその逆）して、表示順を統一したい場合があります。
例えば、PCでは奇数列のカラム（段組）では画像を左、文章を右、偶数列のカラムでは文章を左、画像を右にして、スマホでは画像を表示し、その下に文章を表示する、といったレイアウトです。
WordPress（ワードプレス）のカラムブロックを使えば、画像と文章を左右に並べることは簡単です。しかし、標準の機能だけでPCとスマホのカラムの順番を変更することはできません。シンプルテイストのホームページ制作なら、こうしたレイアウトの変更も簡単に行うことができます。そこで今回は、シンプルテイストでWordPressのカラムを画面幅によって入れ替える方法をご紹介いたします。
シンプルテイストはWordPressとBootstrapで構築されています
低価格ホームページ シンプルテイストは、WordPressとBootstrap（ブートストラップ）で構築されています。
Bootstrapとは、ホームページのレイアウトを整えるために世界で広く利用されているCSSフレームワークです。
※ 2026年9月15日時点で、シンプルテイストで使用しているBootstrapのバージョンは最新版のv5.3.8です。
シンプルテイスト専用のテンプレートを使用している一部の固定ページを除き、ユーザーが自由に追加できる固定ページやブログやお知らせの投稿ページでは、BootstrapのCSSクラスを使ってレイアウトやデザインを変更することができます。そのためシンプルテイストでは、WordPressでページを編集しながら、PCやタブレット、スマホなど、それぞれの画面サイズに合わせてレイアウトを調整することが可能になるのです。
今回ご紹介するカラムの表示順の変更も、このBootstrapの機能を利用したものです。
画面幅によってカラムのレイアウトを入れ替える
Bootstrapには、カラムなどの要素の表示順を変更するための「order（オーダー）」というCSSクラスがあります。
この「order」を利用すると、PCでは左右に並べたカラムの順番を、スマホなどの画面幅が小さい端末では逆に入れ替えることができます。
PCでは「画像 → 文章」と「文章 → 画像」を交互に配置している場合でも、スマホではすべて「画像 → 文章」の順番に統一する、といったレイアウトにすることが可能になります。
シンプルテイストでは、WordPressのブロックエディターからカラムブロック（下記例ではカラムは「50/50」を選択）を選択し、Bootstrapの「order」クラスを指定するだけで、この表示順を変更することができます。新しくCSSを記述したり、テーマのファイルを編集したりする必要はありません。
また、画面（ブラウザ）の大きさによって適用するクラスを変更できるため、PCでは元の左右のレイアウトを保ちながら、スマホではカラムの順番だけを入れ替えることができます。
それでは、実際の設定方法を見てみましょう。
WordPressのカラムブロックに「order」クラスを設定する
ここでは、PCでは「画像 → 文章」と「文章 → 画像」を交互に配置し、スマホではすべて「画像 → 文章」の順番に統一する方法を説明します。
まず、WordPressのブロックエディターでカラムを作成し、画像と文章（段落ブロック）を配置します。
カラムを選択すると、画面右側の設定パネルに「高度な設定」という項目があります。
その中にある「追加 CSS クラス」に、Bootstrapの「order」クラスを指定します。
今回の例では、画像のカラムには、
order-md-last order-first
文章のカラムには、
order-md-first order-last
と入力します。
また、画面幅に関係なく画像と文章の左右を入れ替えるだけであれば、下記のように指定します。
画像のカラムには、
order-last
文章のカラムには、
order-first
と入力します。
ここで注意しないといけないのは、画像や文章（段落ブロック）そのものにCSSクラスを適用するのではなく、各カラム（カラムブロック内の各カラム）に適用するということです。間違えやすいので十分ご注意ください。
何もしていないカラムの例
画像を左のカラム、文章を右のカラムに入れています。画像のカラムにも文章のカラムにも、CSSクラスは何も指定していません。
ダミーテキストです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
「order」クラスを適用したカラムの例
画像を左のカラム、文章を右のカラムに入れています。画像のカラムには「order-md-last order-first」を、文章のカラムには「order-md-first order-last」を適用しています。
ダミーテキストです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
これだけで、PCやタブレットなどの768px以上の画面幅では「文章 → 画像」そしてスマホなどの小さな画面では「画像 → 文章」という順番に変更できます。
「order-first」と「order-last」について
「order-first」は要素を最初に、「order-last」は要素を最後に表示するためのBootstrapのCSSクラスです。
今回使用するCSSクラスは、それぞれ次のような意味になります。
画像のカラム：
order-md-last order-first
768px以上のタブレットやPC
→ order-md-last が適用され、最後に表示
スマホなど、768px未満
→ order-first が適用され、最初に表示
文章のカラム：
order-md-first order-last
768px以上のタブレットやPC
→ order-md-first が適用され、最初に表示
スマホなど、768px未満
→ order-last が適用され、最後に表示
なお、Bootstrapには「order-first」「order-last」のほか、「order-1」「order-2」など、数字を使って表示順を指定するクラスも用意されています。
今回のように2つのカラムの順番を入れ替える場合は、「first（最初）」と「last（最後）」を使うと、表示順が分かりやすくなります。
「md」とは？
「md」は、Bootstrapで設定されているブレイクポイントのひとつです。
ブレイクポイント（breakpoint）とは、ブラウザの横幅によってレイアウトなどを切り替える基準となる幅のことです。
Bootstrap 5には、次のブレイクポイントがあります。
- sm：576px以上
- md：768px以上
- lg：992px以上
- xl：1200px以上
- xxl：1400px以上
今回「md」を使用しているのは、WordPressのカラムが2列から1列へ切り替わる画面幅に合わせているためです。
ここで重要なのは、これは端末の種類によって切り替わるわけではなく、ブラウザの横幅によって切り替わるということです。そのため、スマートフォンでもブラウザの横幅が768px以上になれば「md」の指定が適用されます。逆に、PCでもブラウザの横幅が768px未満になれば、768px未満の指定が適用されます。
このように、WordPressのカラムが切り替わる画面幅にBootstrapのブレイクポイントを合わせることで、画面幅に応じてカラムの表示順を変更することができます。シンプルテイストなら、WordPressのブロックエディターからクラスを指定するだけなので、CSSを新しく記述する必要はありません。
最後に
今回は低価格ホームページ制作 シンプルテイストのWordPressのカラムブロックで、PCとスマホの表示順を変更する方法をご紹介しました。
WordPressの標準機能だけでは、PCとスマホでカラムの表示順を変更することはできません。しかし、シンプルテイストではBootstrapを利用しているため、「order」クラスを指定するだけで、CSSを新たに記述することなく表示順を変更できます。
PCでは画像と文章を左右交互に配置し、スマホでは「画像 → 文章」の順番に統一するなど、画面幅に応じたレイアウトも素早く設定可能です。
シンプルテイストは、WordPressの使いやすさを活かしながら、Bootstrapによる柔軟なレイアウトにも対応しています。低価格でホームページを制作したいけれど、細部のデザインにもこだわりたい。そんな方に、シンプルテイストでのホームページ制作をおすすめいたします。
今回の内容はシンプルテイストの汎用型ホームページ制作サービス STベース、神社専門・神社専用ホームページ制作サービス STシュラインに対応しています。
また、シンプルテイストでは2週間の無料トライアルをお試しいただけます。低価格・高品質・充実機能のホームページ制作をご体験ください。
シンプルテイスト 2週間無料トライアル
今後もシンプルテイストでホームページをより自由にカスタマイズするための便利な機能や使い方をご紹介していきますのでどうぞお楽しみに。
