[WordPress]トップページに画像カード横並びのメニューを設置する方法[初心者OK]

画像を横並びにして額縁のようにトップページに飾り、それをメニューとしてリンクする……。

というレイアウトは何となく「カッコいい」と思う方が多いはず。

一昔前のHPではHTMLでtableタグを組んでいた(いや、今でも別にそれでもいいのだけど)このレイアウト、レスポンシブ時代には崩れやすく重く、あまり歓迎されません。

様々な方法がありますが、ここでは初心者でもとっつきやすく簡単なやり方をご紹介。

あ、『トップページを普通のホームページのように固定表示させる方法』は、必ずやっておいてくださいね。

通常、何もしていない状態のWordpressのトップページは最新記事へのリンクカードが並ぶ形になります。普通のブログでよく見るやつです。それだけではなくて、トップページを完全に固定ページにして、常に挨拶文などを表示させておく事も…

横並び画像メニューをギャラリーを使って設置する

額縁のような画像メニュー

ここでは、Wordpressのメディア機能「ギャラリー」を使った方法で横並びのメニューを作ります。プラグインや難しいコードは必要ありません。

まず用意する物(事)は、

・同じ大きさ(の方が面倒なことが起こりにくいです)の画像を偶数分アップロード。

注意.gif画像UPの前に「設定」→「メディア」からサムネイルのサイズを正方形になるように指定しておくこと。(初期はテーマによって違うかもしれませんが100×100が一般的かも知れません。私は250×250にしています)

注意.gifアップロードする画像は必ず設定したサムネイルのサイズよりも大きくしなければならない。

まずは、それだけ。

「ギャラリー」設置の仕方

1. 設置したい投稿、あるいは固定ページの編集画面で上部の「メディアを追加」をクリック。

ギャラリーの作り方1

2. 「メディアを追加」画面で左上の「ギャラリーを作成」をクリック。

ギャラリーの作り方2

3. ギャラリーに加える画像を選択して右下「ギャラリーを作成」をクリック。

ギャラリー画像を選択

4. ギャラリーの編集ページに移るので、まず右上を設定します。

ギャラリーに画像を追加

・「リンク先」画像をクリックした時に飛ぶページです。後から変更できるので、とりあえず「添付ファイルのページ」にしておきましょう。

・「カラム」とは画像を何列横に並べるかの選択です。個人的にはスマホからの閲覧も考えると「3」列か「4」列が一番見栄えが良い気がしています。

・「サイズ」は「サムネイル」で。(正方形の画像が並びます)

設定が終ったら、右の「ギャラリーに追加」をクリック。

5. 追加したい画像を選択して「ギャラリーに追加」をクリック。

「Ctrlキー」を押しながらクリックして行くと一度に複数選択できます。


6. ドラッグ&ドロップで表示したい順番に並び替えて……

ギャラリー編集

7. 右下の「ギャラリーを挿入」をクリック。

8. 編集画面上は、[ gallery link=”none” ids=”123,134,145,156,167,178″ ]こんな表示になっているはず。

プレビューすると画像が並んでいるはずです。PC画面での3カラムと4カラムの例です。

ギャラリーPCカラム

スマホ表示の3カラムと4カラムです。

スマホカラム

画像の下の説明文は、各画像の「キャプション」に書き込む事で表示されます。


9. [補足]ギャラリー編集方法。

他の画像に変更したい時、追加したい時など、ギャラリーを編集したい時は、「ビジュアル」編集モードでギャラリーをクリックして、上に現れる編集マークをクリックすれば編集画面に戻る事ができます。

ギャラリー編集

表示した「ギャラリー」に各ページへのリンクを紐づける

ギャラリーの表示に成功しても、それだけではただ画像を並べただけです。それではメニューとしての役割を果たさないので、各画像へ飛ばしたいリンク先を設定します。

投稿ページへリンクする。

「Wordpressで「ギャラリー」をページに紐付けるリンクの方法」

という別ページを後ほど作成します。

ざっと説明すると、投稿ページの場合は「メディア」→「ライブラリ」の「アップロード先」から簡単に設定ができます。

ライブラリを一覧表示にすると、すでに画像がどのページに使用されているかアップロード先が出ているので……

ギャラリーのアップロード一覧

・その画像のアップロード先を変えたければ「切り離す」をクリック。

・「(未使用)」になっている場合は「投稿に添付」をクリック。

「投稿に添付」をクリックすると、投稿ページ(固定ページも含む)の一覧が出て来るので、画像をクリックした時に飛ばしたいページを選択するだけで紐付けられます。

ギャラリー投稿ページ一覧

カテゴリページやタグページへリンクする。

問題はカテゴリーやタグの記事一覧ページへ紐付けたい場合で、それはライブラリでは編集できません。

現時点で、出来上がったギャラリー画像をクリックしてみると、各画像のファイルページへ飛ぶはずです。

方法はあるでしょうが、私はこれを転送で飛ばす事にしました。

「Simplycity」で"bbpress"を設置した際、パンくずリストが404になる問題を301リダイレクトで解決します。

ギャラリーのファイルページ

私はこの画像ページを「ブログカスタマイズ」というカテゴリーページへ紐付けたいので、

“https://muryoblog.cinemarev.net/tools” を

“https://muryoblog.cinemarev.net/entry/category/blog-operation/customize” へ転送します。

RewriteEngine on
RewriteRule ^tools$ https://muryoblog.cinemarev.net/entry/category/blog-operation/customize [R=301,L]

カテゴリーページ

結果、カテゴリー一覧ページへ飛ぶようになりました。

サンプルページ

画像横並びメニューのサンプルページ 2018年10月時点、当サイトはテーマ『Simplicity』を使用させていただいています。 ...

フォローする

スポンサーリンク

コメント

※アドレスは必須ではありませんがGravatarでアバター設定している方は記入しないと画像が出ません。(アドレスは表示されません)。キャプチャーにチェックの上、送信お願い致します。承認後表示されます。

内容をご確認の上、「送信」ボタンを押してください。