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