グローバルメニューを記事本文中で使って遊んでみよう!
先日(記事下に関連記事やおすすめ記事などの過去記事を表示する方法あれこれ)ですこし触れましたが、あれからグローバルメニューを記事本文中に表示させる際になにか有効な使い方はないものかとすこし考えまして、こんな使い方はどうでしょうか?というものを今回ご紹介したいとおもいます。
と、その前にごめんなさい
先日ご紹介しました本文中でグローバルメニューを表示させる方法ですが、現在当ブログはレスポンシブデザインではないのでスマホなどモバイル機器でご覧になった場合には表示されないか、リスト表示されているかしてなにを言っているのかわからなかったのではないかとおもいます。
今回もモバイルで見た場合はわたしの意図したとおりには表示されませんので、やはり「何言ってんの?」となっている方もあるかもしれません。
ですので、もしご興味ありましたらお手数ですがPCよりご覧ください。
また、cssをいじればレスポンシブデザインではなくともモバイルでもちゃんと表示させられるようになるはずですので、「これいいかも」とおもわれましたらいろいろ試してみてください。
アンケート的な対話的ななにか
読者の方により能動的に関わっていただこうという趣意で、トグルをたどっていただくアンケート(二択のそれぞれにリンクを張りその訪問数で測るとか?アンケートをとることだけが目的ならもっと簡単なコードがきっとあることでしょうからおすすめしませんけれどもね)のような、なにか誘導するような動線やメッセージとしての活用法はいかがでしょうか?
下の文字にマウスカーソルをあわせてみてください。↓
一応参考コードを載せておきます。
※ブログテーマで「Innocent」等をお使いの方はほぼコピペで使えますが、そうでない方は少々変えていただく必要があります。ほんとに少々ですけれどもね。このあたりのことはググっていただくか、次の節でご紹介させていただいておりますサイトをご参照ください。
<nav class="main-navigation">
<ul><li>①
<ul>
<li>②</li>
<li>③<ul>
<li>④</li>
<li>⑤</li>
<li>⑥<ul>
<li>⑦</li>
</ul></li></ul></li></ul></li></ul>
</nav>
アニメーションチックななにか
ただ単に遊び心の発露としてこんなのはいかがでしょうか?
下の画像にマウスカーソルをあわせてみてください。↓
先にご紹介致しましたコードで、テキストではなく画像にしただけのものです。
画像を利用する場合は「title"~"」の部分を削っておいて文字を表示させないようにするか、↑の富士山の画像のようになにかメッセージを入れるとよさそうです。
読者の方が積極的に関わらなければトグルは開きませんので、ここで表示される画像にはいやが上にも目が注がれます。
ここのところはよくわかりませんが、もしこのような表示が許される広告バナーがあるのなら、一考の余地ありではないでしょうか?
深度はないから深みも含みもない話
輪郭線のない目と口だけの画像の方が上下に変な隙間があっても、見た目により自然な仕上がりになったことでしょう。
だからはじめは「あかんべー」した画像にしようと企てていたのですが、ほどよい画像が見つからず、かといって自分で描くのもめんどうでしたし、この仮面の方が深読みしてしまう性向をお持ちの方にはより楽しんで頂けるのではないかとおもいましたので、ガイさんの画像にしました。というのは後付けの理由です。今回この画像を使ったことにはなんの含みもございませんよ。
それに結果として「あかんべー」画像より手間がかかってしまいましたとさ。
このような感じで記事本文中でグローバルメニューを利用しているページを今のところ目にしたことはありませんが、(それもそうよね。デジタル社会でこんなアナログな発想しませんよねぇ。)工夫次第でおもしろい使い方ができるのではないかとおもいましてご提案させていただきました。
これもやっぱりわたしが知らないだけ?
グローバルメニューを記事本文中で表示させたりして多用するとなにかしらデメリットやペナルティなどの災厄が降りかかってくるのかな?
この点が判然としませんので、お試しになる際はご注意ください。
前回はおもいつかなかったこと
【タイトル下】でグローバルメニューを置きつつも記事本文でも時々使いたい。でもそれぞれ違うデザインにしたいという場合、前回ご紹介させていただきましたゆきひーさんのグローバルメニューと半月さんのナビゲーションバー(グローバルメニュー)の両方を使えば簡単にできるものでした。
これはclass名がそれぞれで異なるのでできることです。
どちらでもいいですが、片方をグローバルメニュー用、もう片方を記事本文用にして、それぞれcssでデザインを整えてあげてください。
グローバルメニューの設置の仕方についてはこちらのサイトをご参照ください。↓の文字の上にマウスを合わせますとブログカードが表示されます。
こちら↓は画像なのでマウスオンしてもなにもおきませんが、このようにそれぞれ異なるデザインで二つとも同時にグローバルメニューのところにも記事本文中にも表示されてますでしょ?
これは↑ブログテーマWrittenを使って表示させたものです。このようにテーマがInnocentでなくてもゆきひーさんのグローバルメニューと半月さんのナビゲーションバーを併用することができ、なおかつテキストや画像ばかりか、動画を入れ込むこともできるのです。
試しにこちら↓の文字にマウスをあわせてみてください。
動画を入れ込んだ場合の注意点としては、マウスを画像外に移動させますとトグルが閉じてしまいますので視聴にはやや苦しいところがあります。
しかしながら動画を再生させたあとトグルを閉じても音は出たままとなりますので、音楽メインの動画などでは使えるかもしれません。
グローバルメニューを記事本文中で使うと表示速度があがる?
トグルを利用するとマンガや映画、おすすめサイトやアフィリエイトなどのまとめやランキングなんかを思わせぶりに表示させられておもしろそうではありませんか?
たとえばこんな感じにもったいぶったりなんかしちゃってね。
気になる方は↑文字にマウスをあわせてみてください。
また、このような企画で大量の動画を貼り付けるようなときにはマウスオンするまでは動画を読み込まないので、ただ動画を貼り付けるよりも表示やリソース面で有利にはたらくのではないかと考えられます。…よね?そうじゃあないのかな?
そこでちょっと試してみました。
実験概要は、Youtube動画をただ5枚貼り付けたもの(画像左側)と同じ5枚の動画をグローバルメニューの子カテゴリーに入れたもの(画像右側)を用意して、それぞれGoogleのPageSpeed InsightsやYSlowでスコアを比べてみました。
気になるその結果は…
どちらもまったく同じスコアでした。
これは貼り付ける枚数が少なすぎたのだろうとそれぞれ10枚でも比べてみたのですが、やはりそれでも変わりありませんでした。思惑外れました。
これはおそらくYoutube動画の最初に表示される画像が静止画で、再生させるまではストリーミング等おこなわないからなのではないかとおもうのです。見当違い?
実験方法や調べ方がまずいだけで実際は効果があるのかもしれません。
反対に思わしくない効果があるのかもしれませんけれども…
以上で~す。