音楽と最新テクノロジーであなたの人生を、ちょっとだけ楽しくする個人メディア

10.09.2016

ブックマークレット「+embed」でSNSボタンが見えない時の解決方法

0 件のコメント
2016 07 05 20 53 11

「+embed」でSNSボタンが見えない時の対処法が、やっと見つかりました。


ブックマークレット「+embed」

Cards are a clean, responsive, and shareable way to display any embed. | Embedly

はてなブログなどは、紹介したいリンクURLを貼れば、ブログカードが作成されるんですよね?やらやましいわぁ...

ってことで、はてなブログ以外のブロガーでも、ワンクリックで美しいブログカードを簡単に作れるwebサービス「+embed」は、本当に最高です。

ブックマークに入れておけば、サイトを開く要領でiframeタグが作成されます。今回の記事も、ありがたい、ありがたいと、使っていたんですが...一つだけ、気になる問題があったんですよ。

それは...SNSボタンが見えなくなって、隠れてしまうってこと。


SNSボタンが隠れる

2016 07 05 20 57 34

画像を見てもらうと分かりますが、ちょっとSNSボタンが隠れてますよね?そうなんですよ。記事の横幅が680px以下に設定すると、こうなっちゃうんですよ。

サウンドオルビスはこれまで、728pxの横幅だったので、気にしなくて良かったのですが...読みやすい記事の横幅って、だいたい650pxぐらいじゃないですか!?

記事の横幅700pxぐらいになると、目の動きが多くなりますもんね。だから、早急な対応をしなければ!ということで、簡単な処置方法を調べて、実践してみました。


解決方法

2016 07 05 20 52 58

/*----追加css----*/
div.embedly-card-hug{margin: 0px !important;}

上記CSSを、自身のブログに追加してください。

原因は、div.embedly-card-hugの「margin」の「auto」でした!

「margin: 0;」だけにすると、外部で参照したCSSが優先されてしまいますので...「!important」を付けないと、思った通りになりません


馬子にも衣装!デザイン良いに越したことなし

ブログの価値は、文章の質!ってことはもちろんありますが...

馬子にも衣装って言葉あるように、デザインが良ければ、記事の質だって何倍にも感じることってあると思うんですよね。小さなことかもしれませんけどね。

アメリカUCLA大学の心理学者/アルバート・メラビアンが1971年に提唱した概念。人物の第一印象は初めて会った時の3〜5秒で決まり、またその情報のほとんどを「視覚情報」から得ていると言う概念。メラビアンが提唱する概念において、初対面の人物を認識する割合は、「見た目/表情/しぐさ/視線等」の視覚情報が55% 、「声の質/話す速さ/声の大きさ/口調等」の聴覚情報が38%、「言葉そのものの意味/話の内容等。」の言語情報が7%と言われている。

メラビアンの法則

メラビアンの法則にもあるように、人間は視覚から受ける情報が圧倒的です。それを知っていれば、ブログのデザインにも手を抜けないってことが、本当によくわかります。

当ブログも、読んでくださる方が、本当に読みやすい!と感じてもらえるデザインと、文章を念頭にしながら、日々執筆しております。効果が現れていたら幸いです。

人は見た目が9割 (新潮新書)

新品価格
¥734から
(2016/7/5 22:03時点)

それでは、すべての+embed使いに幸あらんことを。サウンドオルビス(@soundorbis)でした。

soundorbis.comの
最新情報をキャッチ!!

  • プッシュ通知を受け取る

  • 更新ツイートを受け取る

  • follow us in feedly

    無料購読する

  • YouTubeチャンネル

0 件のコメント :

コメントを投稿