記事本文中の要素を折りたたんで表示してみる→スッキリ！

たまに食べ物エントリーを書いています。

そのお店の情報を載せるとき、私は「食べログ」を使いたい。
（これには否定的な意見もあるんですが、それについては最後に書いておきます）
パソコン版の「食べログ」のお店ページには、一番下の方に「ブログにお店情報を貼る」というリンクがあり、それをクリックするとお店紹介コードが生成され、コピーして貼れば情報が埋め込まれるので簡単。
（スマートフォンのWEB版では出ませんが、PCモードにすれば出ます）

（クリックで拡大）

しかしこのコードではGoogleマップを表示するようになっているんです。
これ、パソコンで見る分にはいいんですが、スマートフォンで見ると・・・

（クリックで拡大）

こんなふうに、地図が幅いっぱいに表示されて、本文をスクロールしようとしたら地図がガーッとスクロールするだけという事態になることがあります。これは困る。

そこで、その部分を折りたためたらいいんじゃないかと考え、ちょっと調べてみました。

定番としては、Arconix ShortcodeというWordpressプラグインがありました。

WordPress プラグイン＞記事編集 > ショートコード＞ Arconix Shortcode
紹介記事

プラグインなのでインストールがとても簡単。折りたたみ機能以外にも使えそうな機能がたっぷりあります。

ところが私の環境では異能しませんでした(T_T)
プラグインのRead meを読んでみると、「JQueryが正しくインストールされてないかも」「テーマによっては変なJQueryが」「JavaScriptが（略）」「他のプラグインとバッティング」の可能性が書かれていました。
私、そんなことさっぱりわからない！

うまく機能した方はそれを使ってくださいな^^;

私はダメだったので他の方法を調べてみました。
例によってJQueryだPHPファイルを書き換えるだと全然できそうもないのは諦め、たどり着いたのがこちら。

[WEB] ブロック要素を畳む | オールトの雲

これもなにをやっているのかさっぱりわからないのですが ^^; でも紹介されているコードをコピペしたらちゃんと動作しました！
「ひらく」「とじる」ボタンをクリック（タップ）してみてください。

春友流

関連ランキング：ラーメン | 高島町駅、戸部駅、平沼橋駅

blockquoteタグで囲んでいるので、スマートフォンでは地図が幅いっぱいにならないのもいいですね。
これで悩みが解消されました。

さて、「食べログ」の是非については折りたたみます。

皆さんはおいしいお店を探したいとき、どのサービスを使いますか？
「食べログ」以外にも「ぐるなび」とか「HotPepper」とかいろいろとありますね。

「食べログ」はたぶんいちばん使われているサービスなのではないかと思います。
それはレビューがたくさん載っているからではないかと。
（使う人が多い→レビューが多くなる→だから使う人が多くなり・・・）

でもそのレビューや点数があまり信頼性がないということで、他のサービスを使う人が多くなっているようです。
ブロガーさんの中にもレビューがうっとおしいのでお店紹介に他のサービスを使う人も出てきています。
（その他に、上で書いたように地図が表示される問題もあり）

しかし私にとって、食べログのレビューはそれなりに参考になると思っています。
たしかにおいしいかどうかはその人の主観なので、信じこむのは避けたほうが良いけれど、たとえばラーメンの麺は太麺なのか細麺なのか、子連れで行っても大丈夫かなどなど、レビューには参考になる情報も書かれていたりします。
地図も邪魔くさいときもあるけれど、「あ、こっちの駅からも行けるじゃん」とか、車だったらこんな経路で行けばいいかとかがすぐにわかるというメリットもあります。

それぞれの人がどのサービスを使うか、どれをブログに埋め込むかはこれも好みの問題です。
で、ブログに貼り付けるときに読者が使いやすくすればいいんじゃないかと、今回のやり方を試してみたわけです。

ぐるなびの情報をブログに貼り付けるには、ぐるなびの公式サービス「ペタぐる」を使うとうまくいきます。

【ペタぐる】好きなお店をカンタンレビュー – ぐるなび

↓ こんな感じになります。

らーめん春友流
[ラーメン]

京急本線戸部駅徒歩5分
〒220-0041 神奈川県横浜市西区戸部本町38-7（地図）
ぐるなびでらーめん春友流の詳細情報を見る
※2014年2月12日現在の情報です
ぐるなびで桜木町のお店情報もチェック！