2013年04月23日 category : Blog tags : ,

淡白なSNSシェア群に画像とタイトルを追加したら可愛くなった

このエントリーをはてなブックマークに追加

layout

”SNSシェアのボタン群ちょっと改造してみたら1.5倍可愛くなった気がする(当社比)”

ブログのレイアウトを変更してみました。今回変更したのはシェアボタン群とフッター要素。備忘録なエントリーになりますが、WEB上にLOGを残すのがブログです。誰得エントリー?とか気にせず書いちゃおうと思います。

以前から気になっていたフッター要素。TOPページにスライダーを起用していたこともあって(今は変更しています)、最新記事のリストなどを表示していました。ただそうなるとサイドバー要素と内容が重複するのです。

01 . フッター要素の変更

これまでフッターに表示していた内容は、アバウトミー、新着5件、よく読まれている記事5件を表示していました。(例によって思いつきで一気に変更したのでキャプチャなしです…)

これらの内容は表示件数こそ違いますが、全てサイドバーにも表示しています。

もともとサイト内リンクはブログ内の循環を目的としているはずですので入り口は数箇所あっていいと思いますが、どうせ配置するなら別のページへのリンクを設置しようということで今回「月間アーカイブ」のみを設置してみました。

layout-01

スッキリした(・∀・)

02 . SNSシェア群

併せて変更したのがSNSシェアのボタン群。TwitterやFacebookのボタンを並べているやつです。一定量スクロールが発生するとjQueryを使って表示させていますが、これがボタンだけなので割りとタンパク。

layout-02

よく使われている効果なのでボタンだけでもその用途は伝わると思うのですが、これにタイトルと記事内の画像を追加してみました。

layout-03

ちょっと賑やかになりました(・∀・)

多くのブログやサイト運営者さんが、このボタン群を設置している意図としては閲覧者さんに「記事気に入ってくれたら知り合いの方にもシェアしてね」だと思います。少なくともわたしはそうです。沢山の方に読んでいただけると素直に嬉しいです。

そう言った意味からもこのボタン群、画像を差し込んだので多少目立つようになったかと思います。あとはシェア時にはタイトルでツイートされることになるので、直前にタイトルを表示してみました。

ここらあたりで表示されるはず(PC版)→→→→→→→→→→→→

▼手前味噌ですが、実装方法はこのあたり参照

【jQuery × WordPress】TOPに戻るボタンをニュッと表示させてみた | ごすてっぷ
スクロールを進めていくと、ニュッ、ニョっと現れるTOPに戻るボタンを設置してみました。 …

WordPressで記事内の1枚目の画像を取得する方法が便利すぎた | ごすてっぷ
ワードプレスでサムネイル画像ではなく記事内の1枚目の画像を取得する方法が便利すぎた。 …

03 . おもしろい

ブログって投稿した記事を読んでいただけることも嬉しいことですが、あれこれ考えて好きにデザイン変更していけるのも楽しみの一つですね。

これからも色々楽しみながらブログ育てて行きたいと思います。

▼ブロガーさんたちがブログデザインをテーマに語らっています。動画配信ですが見てて参考になりますし、テンションあがります。

理想のブログデザインについて話すネク!語尾はあくまでもネクッ! で #9 #ブロネク | 「ブロネク!」Blogger Next Door
ブロガーのブロガーによるブロガーのためのGoogle+ハングアウト

HOME >>  Blog > 淡白なSNSシェア群に画像とタイトルを追加したら可愛くなった