MENU
個別セミナーはこちら

スマホ表示でも画像を横並びさせる方法

この記事がおすすめな人

・プラグインを使わずに画像を横並びしたい人
・WordPressで記事を書いている人
・スマホでも画像を横並びで表示させたい人

WordPressで記事を書いていると、画像を2枚横に並べたかったり
画像と文字を横並びにすることってよくあると思います。

カラムを使えば簡単に横並びにはできるのですが、
スマホで表示した際に縦1列に並んでしまって困るー!!
って方はこの先しっかり読んでトライしてみてくださいね。

それではスタート!!!

目次

画像を横並びにする方法

画像を2枚以上横並びにするには「カラムブロック」を使用します。

詳しい手順は、、、

STEP1 追加CSSの入力(コードをコピーして追加CSSまたはスタイルCSSに入力する)

STEP2 カラムブロックの選択・設定(カラムブロックを選択し「高度な設定」にて追加CSSクラスを入力する)

STEP3 画像設定(好きな画像を設定する)

それでは各STEPを詳しく説明していきます。

追加CSSの入力

以下のコードを追加CSSまたはスタイルCSSに入力します。

/*スマホ横並び*/
.ath-colfix{
flex-wrap:nowrap;
}
@media (max-width: 599px){
.ath-colfix .wp-block-column:not(:first-child) {
margin-left: 5px;
}
}

 

コードの入力をする場所は
「外観」→「テーマファイルエディター」→「スタイルシート」
(子テーマを使用している場合)

子テーマを使用していなのであれば
「外観」→「カスタマイズ」→「追加CSS」から入力

使い慣れている方を使って問題ないよ!

カラムブロックの選択・設定

次はカラムブロックを選択し、設定をします。

WordPressで記事の作成画面の左上の「+」ボタンをクリックし、「カラム」を選択します。

カラムを選択すると、下記のような表示が出るので好きな分割数を選びます。

カラムブロックを選択した状態で、右上に表示されているブロックのタブから「高度な設定」→「追加CSS」に「ath-colfix」を入力する。

画像設定

最後は好きな画像や文章などを設定するのみ。
「+」のマークをクリックして挿入したいブロックを選択しましょう。

設定ができたら右上のブロックを選択し、カラムの部分の
「モバイルでは縦に並べる」のチェックを外す。

画像以外の組み合わせ

画像以外の横並びも可能です。
例えば、、、

 

・「画像+文章」の組み合わせ
・「文章+文章」の組み合わせ
・「ボックス+文章」の組み合わせ
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次