こんにちは。
webページ制作続きです。前回やったWordpress操作はかなり限定的で文字と画像を縦に入れていくだけってものだったので今回は横に並べるなどもう少しだけ他の操作もさわってみたいと思います。
前回の記事↓
最初の注意書き
この記事は初心者がやってみた、という日記です。間違いを言っている場合があります。
ページの編集画面で左上の「+」ボタンをクリックすると挿入できる項目が左側に表示されます。
すごいたくさんありますね(・∀・)
画像を横に並べるには「ギャラリー」をつかうのかな？
一旦前回の画像を消して、「ギャラリー」を選択して前回の画像を選択します。
既にアップロードしている画像を使う場合は「メディアライブラリ」のボタンから追加します。
追加した後、左上のアイコンが並んでいるところに「追加」っていうのが無い場合は一番左のアイコン(親ブロック)を押します。
「追加」っていうのが表示されるのでクリックしてさっきと同じように画像を選択します。
画像を追加すると並び替えをする画面になるので順番を変える場合はドラッグ＆ドロップで並び替えます。
画像が並びましたが横が途切れてしまってますね…
並べる画像は縦横比を変えることができそうにないのでアップロードする段階で比率を統一しておく必要がありそうです。
「グリッド」というものを使っても画像を並べることはできそうなので一度消してそっちも使ってみます。
ブロック自体を並べられるようになるんですね。
「+」のところを押して画像を追加します。
サイズを変更できそうですがとりあえずもう１つ追加しましょう。
今はグリッドの中の画像が選択されている状態ですが、そのちょっと外側をクリックするか、一番左のアイコンをクリックしてグリッド全体の選択状態にします。
そしたら右下に「+」ボタンが出るのでクリックするとさっきと同様に画像を追加できます。
画像全体が表示されました。(・∀・)
画像選択状態で青枠のところをドラッグすることでサイズ変更ができます。
が、あまり自由度は高くないです。4分割された場所のうち、どれだけ使うかを選ぶような感じですね。
しかも実際に表示してみたら縦に並んでいました。ウインドウサイズによって並びが変わってしまう仕様なのかな？
コンテンツ幅っていう設定でも変わるようです(後述します)。
ちょっと難しいな(´-ω-`)
グリッドの中にグリッドを配置ってこともできます。表示されるアイコンの真ん中あたり(配置というやつ)で縦並びに変えたりも可能。
さっきグリッドの「+」ボタンの容量で画像以外にもボタンや文章なども配置できます。リンク機能をつける場合は画像やボタンを選択した状態で表示されるアイコンの「(-)」みたいなやつ。
ひとまずブロックの配置についてはここまでにして保存しておいて、実際に表示したときの位置が違う問題を解決したいと思います。
WordPress ダッシュボードの 外観→カスタマイズ
全般→コンテナ と進みます。
ここのコンテナ幅っていうやつを広げることで編集画面と同じような配置にできます。
あとはウインドウサイズを変えたときに配置が変わってしまうのを禁止したい。
編集画面のグリッドを選択した状態で右上の設定アイコン→ブロックのレイアウトでグリッドの列数を自動から手動にします。
(ここで気づきましたが上のコンテナ幅設定はこの隣にあるAstra設定のアイコンからも編集できます…)
これを設定するとウインドウサイズが変更されても横並びを維持できます。
「ギャラリー」、「グリッド」の他に「カラム」でも横並びできるようです。
いちおう、”ある程度”思ったレイアウトにできるようになりましたね。
今回はここまでです。
なんとなく作り方はわかったのでいったん区切りにしようと思いますがまた新しいことをしたら記事を書くかも。
ありがとうございました。
