MENU

ブログのblog

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

2021年12月14日

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

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

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

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

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

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

あわせて読みたい

【WordPress】トップページを固定ページにしつつ最新記事も表示する方法たびたび書いておりますが、当方ではWordPressのテーマに「Simplicity」(→SWELL)を使わせていただいています。 2024年テーマを「Simplicity」→「Cocoon」→「SWELL」と変...

目次

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

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

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

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

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

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

まずは、それだけ。

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

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

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

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

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

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

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

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

設定が終ったら、右の「ギャラリーに追加」をクリック。
5.　追加したい画像を選択して「ギャラリーに追加」をクリック。

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

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

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

8.　編集画面上は、[ gallery link=”none” ids=”123,134,145,156,167,178″ ]こんな表示になっているはず。
プレビューすると画像が並んでいるはずです。PC画面での3カラムと4カラムの例です。

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

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

9.　［補足］ギャラリー編集方法。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あわせて読みたい

【WordPress】特定のページからページへ301転送する方法前日UPした「『bbpress』の設定方法」に付随する記事です。ちょっとした問題が生じたのでその処理として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』を使用させていただいています。が、いずれテーマを変更した時に「ト...

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

主にWordpress中心のサイト・ブログ制作＆コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ＆Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

カスタマイズのご依頼は「一木堂」へ

　　

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントするコメントをキャンセル