【Cocoon2020年】記事や画像を横に並べて表示するには?ワードプレス

ワードプレス入力画面 ワードプレスCocoon

使用エディタはGutenberg(グーテンベルグ)

こちらはWordpress5.0の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。

ワードプレスではないという方!ワードプレスを使用するとHTMLで書かなくてもボタン1つで簡単に画像を横に並べて配置できてしまいます。

ワードプレス自体は無料ですが、エックスサーバー からであれば簡単にアップロードができるのでおすすめです。

2カラム(ズ)、3カラム(ズ)構成にする

今回ご紹介するのは下の図のような構成の作り方です。専門用語だと“カラム”と言うようですね。こちらは2カラムのページになります。

ワードプレスコクーン2カラムの記事

ちなみに上の画像は私のブログのトップページです。全体をご覧になりたい方はこちらから見てみてくださいね↓

ワードプレス・旭川情報etc.しずくログトップ
shiizuku(しずく)ブログトップページへようこそ!2020年版Wordpressコクーンの各種設定方法やお気に入り商品のレビュー、旭川観光情報などを詳し~く発信しています。

カラムの作り方

とても簡単に作れます。

ワードプレスCocoonカラムの作り方

記事作成画面の左上の+に〇のマークをクリックしてさらに“レイアウト要素”をクリックします。

ワードプレスCocoonカラムの作り方

するとカラムが出てきます。カラムをクリックすると

ワードプレスCocoonカラムの作り方

上のような画面が出てきます。

ワードプレスCocoonカラムの作り方

お好きなレイアウトを選んでください。今回は一番左の“2カラム:均等割”をクリックしてみます。

ワードプレスCocoonカラムができたところ

上のようになりました。

あとはそれぞれの+〇マークをクリックしていつものように“見出し”や“段落”を呼び出して記事を書いたり画像を追加すればOKです!

さいごに

この他にもワードプレスCocoonのグーテンベルグエディタでの設定方法をいろいろとご紹介しています。良かったらご覧くださいね。

ワードプレス・旭川情報etc.しずくログトップ
shiizuku(しずく)ブログトップページへようこそ!2020年版Wordpressコクーンの各種設定方法やお気に入り商品のレビュー、旭川観光情報などを詳し~く発信しています。
タイトルとURLをコピーしました