パソコンでは記事や画像が横並びになるのにスマホでは縦一列になってしまう…
そんなお悩みを解決します。
ワードプレスCocoonでスマホでも記事や画像を横並びに表示する方法をご紹介します。
パソコンで画像を横並びに表示する方法
実際に私も活用している子ども用GPSを2種類並べてみました。パソコンで見ると横並びに表示されていると思います。
パソコンで記事や画像を横並びにする方法は以下の記事でご紹介しています。HTMLもCSSも必要なくとても簡単にできます。
[Cocoon2021]記事や画像を横並びに表示するには？Wordpress
Wordpress5.0の新エディタGutenberg（グーテンベルグ）を使用しての記事の書き方になります。 ワードプレスCocoonを使用するとHTMLで書かなくてもボタン１つで簡単に画像を横に並べて配置できます。
osaifull.com
スマホで画像を横並びに表示する方法
先ほどの子ども用GPSの画像、スマホで見ると縦一列になってしまいます。
スマホで画像を横並びに表示するにはCSSを使っていきます。
こちらのサイトを参考にさせていただきました。
【スマホ表示】記事内を2カラム・3カラムに分ける方法
お世話になっております。 スマホ表示での記事内カラム分けについての質問です。 Cocoonでは、記事内を2カラム・3カラムに分ける機能がついており、PCでは問題なく機能しておりますが、スマホ表示では反映することができず、普通に縦並びになってしまいます。 スマホでもカラム分けする場合にはどうすれば良い...
wp-cocoon.com
スマホで画像を横並びに表示するCSS
/スマホ横並び維持/
.wp-block-columns {
flex-wrap: nowrap;
}
こちらをコピーしてカスタムCSSにペーストします。
スマホ横並びCSSの追加場所
記事作成画面の１番下に「カスタムCSS」の文字が見つかると思います。記入欄が閉じている場合は下の画像の赤まる(右側)をクリックしてCSSを記入できる状態にします。
↓
CSSを追加できる状態になりました。こちらに先ほどのCSSを貼り付けます。
/スマホ横並び維持/
.wp-block-columns {
flex-wrap: nowrap;
}
全記事にスマホ横並びを反映させたいとき
上でご紹介した方法は、特定のページで画像などを横並びに表示させたい時に使える方法です。
全記事で横並びにしたい場合は
ダッシュボード→外観→カスタマイズ→追加CSS
にCSSを貼り付けます。
以下がスマホ横並びのCSSを使って作成したページになります。
kodomo no GPS
子ども用見守りGPSの機能をさまざまな角度から比較します
gps.osaifull.com
