【CHANGE!! 第3弾】ShareHtml スタイルを自サイトと他サイトで分けました

thikasa

Category: ブログ / Tag:

Medium 106960641
photo credit: kk+ via photopin cc

アイコン、WordPress テーマ、と来ました「11 月は CHANGE!」。
ギリギリセーフ(アウトか?)な感じですが、お送りします。

「ShareHtml のスタイル」です。


ShareHtml

ブロガーなら必携のツール(ブックマークレット)、ShareHtml。

最早説明は不要と思いますが、今まで私、まったくのデフォルト状態で使ってきました。

なので、私のサイト(ブログ)も、他のサイトも、全く同じように表示していたんです↓

ShareHtml 01

でもこれじゃ…なんかツマラナイ。
どうにかして変えたいと思っていました。

こんな風にしてみました

で、今回の WordPress テーマの変更に伴って、この ShareHtml のスタイルを変えようと、ちょくちょくいじっていたのですが、なんとか固まったので紹介します。

まずは見ていただきましょう。

ShareHtml 02

ShareHtml 03

どうでしょう。
パッと見て他サイトか自サイトかすぐわかるようにしたつもりです。
プラス、自サイトのほうが目立つように(汗

こんなポリシーで作り直しました。

  • 自サイトと他サイトでスタイルを分けた
    • 他サイトは青が基調
    • 自サイトはオレンジが基調・背景色有り
  • 自サイトと他サイトでサムネイルの大きさを変えた
    • 他サイトは 160×120(iPhone では 120×90)
    • 自サイトは 200×150
  • 自サイトと他サイトでパーツの並びを変えた
    • 他サイトはサムネイル・記事タイトル
    • 自サイトは紹介の旨・記事タイトル・サムネイル

他サイトと自サイトで、いろいろと表示具合を変えてみました。

iPhone で見るときはサムネイルを小さくするようにした

まず、これが以前のスタイル。↓
ShareHtml 04

で、今回の新しいスタイルをそのまま表示するとこうなります。

↓他サイト
ShareHtml 05

↓自サイト
ShareHtml 06

他サイトのサムネイルがちょっと大きめで、タイトルが窮屈な読みづらい感じ。
なので media queries にてレスポンシブに大きさを変えるようにしました。

↓こうなります。
ShareHtml 07

それぞれの HTML

参考までに、それぞれどんな HTML にしたのかを書いておきます。

「他サイト用」

「自サイト用」

それぞれのいろいろな要素に class を定義しました。

でももうあとひと工夫ほしい

いろいろ考えて今回のこの「スタイルの分け」にしたのですが、できればもうちょっと特徴出したいなと思っています。
今後もちょくちょくいろいろ試してみるつもりですが、ひとまずこれで First Version ということで。

までもいろいろ考えたり実際にやってみたりするのは楽しいですね。

RSS 登録

もしこのブログを気に入っていただけたのなら、RSS 登録をお願いします。
最新情報をお届けします。

follow us in feedly