「InomaRestaurantBasic」カスタマイズ続き。WordPressで、スマホ画面にしたときに要素の縦並びの順番を変える方法。

前回の記事の続きです。

飲食店向けWordPressテーマ「InomaRestaurantBasic」で居酒屋のサイトを作りました。カスタマイズ方法を解説。
飲食店・レストラン向けWordpressテーマ「InomaRestaurantBasic」で居酒屋のホームページを作りました。 それがこちら↓ 架空の居酒屋のホームページです。 このテーマは作成者の...

「こだわり」ページをカスタマイズしていきます。

スポンサーリンク

WordPressで、スマホ画面にしたときに要素の縦並びの順番を変える方法。

「こだわり」ページはパソコン画面だとこんな感じなのですが↓

このままだと問題が。

何が問題なのかというと、スマホ画面にしたときに横並びの要素が縦に並ぶのですが、

2段目(野菜のところ)が「文章→画像」の順になってしまいます

 

これを「画像→文章」の順にしたいですよね↓

どうするかというと、Flexboxの「order」を使います。

2段目全体を囲むdiv枠にdisplay:flexを指定し、

画像にorder:1、文章にorder:2を指定すればOKですね。

 

やり方は、

「こだわり」ページ(固定ページ)の編集画面を開いて、

まず2段目全体を囲む枠にclass名をつけます。

文章の空いている所あたりをクリックすると文章だけの枠が選択されるので、その状態でキーボードの上矢印「↑」を押します↓

 

すると2段目全体を囲む枠が選択されるので、「高度な設定」をクリック↓

 

ここにclass名を付けます。reverseboxとでもしておきましょう↓

 

そして今度は画像だけの枠を選択し、class名をつけます。order1とでもしておきましょう↓

 

次に文章だけの枠を選択しclass名をつけます。order2としておきましょう↓

 

これでFlexboxに必要なclass名はつけられました。

次にCSSを書いていきます。

「外観」→「カスタマイズ」→「追加CSS」に、このようなCSSを書きます↓


@media only screen and (max-width: 600px){
.reversebox {
display: flex;
flex-direction: column;
}
.order1 {
order: 1;
}
.order2 {
order: 2;
}
}

これでOKですね。

スマホ画面を確認してみてください。ちゃんと「画像→文章」の順になっていると思います。

 

「こだわり」ページに背景画像を設定。

次は、「こだわり」ページに背景画像を設定していきます。

コンテンツ周りだけ背景画像にして、コンテンツの中身は白背景にします。

そのためには以下のような2つの枠が必要です↓

しかし、そのままではおあつらえ向きの枠がないので、作っていきます。

こだわりページ(固定ページ)編集画面で作っていくと思いきや、

パンくずリストや記事タイトルまで含めた枠が欲しいので、編集画面ではできません。

 

ではどうするのかというと、テーマファイルに直接書いていきます。

「外観」→「テーマエディター」→右側の「page-concept.php」の、この部分にdivを作ります↓

 

閉じタグは「get_footer」の上です↓

 

これで必要な枠はできました。

あとはこの枠にCSSでbackgroundを指定するだけです。

「外観」→「カスタマイズ」→「追加CSS」に以下のコードを書きます↓


#concept-wrap{
background-image:url(画像のURL);
padding:20px 10px;
}
#concept-inner{
background:#fff;
max-width:1000px;
margin:0 auto;
}

 

コース・メニューページにも同じ要領で背景画像を設定しました↓

 

以上でおおまかなカスタマイズは完了です。

 

ほかにも変な余白があったので消したり、逆に余白を作ったりと細かなCSSは書きましたが、

それはデベロッパーツールで調べながらやれば簡単にできるので、解説は省略します。

タイトルとURLをコピーしました