JIN:Rの参考デザインを公開中
Blocks

「リッチメニュー」でナビゲーションを華やかに!使いこなして自分好みのブログに仕上げよう

jinr-theme

JIN:Rではリッチメニューを使って、画像付きのメニューを自由に組むことができるようになっています。

リッチメニューを使った表現は、このサイト上の「トップページ」や「DEMO」でも、かなり多用していますね。

例を交えて紹介させてもらいましょう。

たとえば

4カラム / 16:9のデザイン

スマホではスライドさせて表示させています。

メニュー名を入力
メニュー名を入力
メニュー名を入力
メニュー名を入力
たとえば

6カラム / 1:1の横長デザイン

スマホではスライドさせて表示させています。

メニュー名を入力
メニュー名を入力
メニュー名を入力
メニュー名を入力
メニュー名を入力
メニュー名を入力
たとえば

3カラム / 5:2の横長デザイン

スマホではスライドさせて表示させています。

メニュー名を入力
メニュー名を入力
メニュー名を入力
たとえば

4カラム / 2:3の縦長デザイン

スマホではスライドさせて表示させています。

文字の位置
文字の位置
メニュー名を入力
メニュー名を入力
メニュー名を入力
たとえば

4カラム / 2:3の縦長デザイン

スマホではスライドさせて表示させています。

メニュー名を入力
メニュー名を入力
メニュー名を入力
メニュー名を入力

こういった感じで、メニューを自由に組むことができます。

画像の比率

画像の比率は5種類から選択できます。

  • 1:1(正方形)
  • 2:3(縦長)
  • 4:3(横長)
  • 5:2(横長)
  • 16:9(横長)

これらを使い分けてご利用ください。

比率にピッタリの画像を作ってもらえると、特に美しいメニューを作ることが可能です。

文字の配置

メニュー文字の配置は5種類から選択可能です。

  • 画像の下側
  • 画像の左上
  • 画像中央|コンパクト
  • 画像中央|ダイナミック
  • 画像の外側

文字サイズのコントロールも3段階でお任せで可能だし、メニューの文字を非表示にすることもできます。

デザインにこだわりたい人に合わせて、なんなりとメニューを組めるようにしておきました。

WEBに詳しくない人でもデザインが楽しめると思います。ぜひ使いこなしてみてください!

直感的なサイトデザインを、いますぐ

ABOUT ME
ひつじ
ひつじ
ブロガー / WEBデザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
ダウンロードはこちら

Download

JIN:Rは買い切りライセンス。
サブスクリプション課金は一切不要です。

記事URLをコピーしました