WordPress【SWELL】画像を横並びで載せる方法／カラムブロックの使い方とリンクの貼り方

画像を横並びで載せてリンクを貼る方法をお伝えします。

ブロックエディターの「カラム」を使います。

リンクの貼り方は初心者の方がやりがちな間違いもご紹介していますので、失敗したくない方は最後まで読んでから作業してください。

「カラム」ブロックの使い方

追加したい場所で「＋」（ブロックを追加）をクリック。

※この時、背景を同じにして画像を続けていきたい時は、
フルワイドブロック（入れたい背景の所）の中でクリックをします。

「カラム」をクリック。

ひとまず「50／50」を選択。

今出したカラムブロック全体を選択します。

※全体を選択するには、少し上あたりをちょんっとするのがコツです。

このように全体が青で囲われたらOK。

全体を選択した後は、画面右側の「ブロック」の編集をします。

「カラム」の数を、PCで横並びに表示したい数に設定。
今回の場合は４つ並びに。

「ブロック」の編集の部分を下にスクロールし、「モバイルで２列に表示する」にチェックをいれる。

この作業をすることで、スマホで見たときに横２つ並びで表示できます。

※この作業を忘れると、スマホで見たときに縦並びになります

ここまでできたら、下準備完了です。

あとは、「＋」をクリックしてカラム内に画像をいれていきます。

画像とキャプションをいれていきます。

あとは、リンクを貼って、完成です。
今回の場合は画像とキャプション両方に、同じリンクを貼っていきます。

リンクの貼り方

リンクを貼りたいURLの出し方

投稿一覧（もしくは固定ページ）に繋げたい場合は、ダッシュボード（編集画面）から記事を選び、「表示」をクリック。

「表示」を押して出てきたページのURLをコピー…するんですが、
ここで、もう一つポイントがあります！

記事のパーマリンクをアルファベットにしておきます

この部分。
URLが日本語になっていると、シェアした時などにバグることがあります。なので、ここはアルファベットにしておきましょう。

URLの変え方①投稿編集画面から

URLの変え方②クイック編集から

「クイック編集」をクリック。

「スラッグ」を変更し、「更新」をクリック。

このようにアルファベットにします。
ここは半角英数であれば、ぶっちゃけ何でもいいです。お好きなように。

これで、英語表記になりました。

こちらをコピーし、リンクを貼りたい個所にペーストすれば完成です。

注意！やりがちな間違い

内部リンク（投稿記事・固定ページ）を貼る際に、初心者の方がやりがちな間違いをご紹介します。

「URLを貼りたい」という気持ちで、ついいつも手を動かしている「編集」をクリック。

編集画面のURLをコピペ。

これだと、カスタマーはこのページを見ることができません！

さらに、セキュリティの面からも、この間違いをしないように絶対に気を付けましょう！！

必ず、「表示」からURLを出しましょう！

　

以上です。今回はちょっとだけ込み入ってましたね。
お疲れ様でした！