キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

キャリコのこれはさすがに気づかれる自己満足カスタマイズ

      2014/12/10

キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxyz )です。

自己満足カスタマイズ第4弾となる今回は、最近のブログデザインが迷走してる中で生まれました。今度こそ… 今度こそこれで落ち着きそうな予感がしてるけど、みなさん的にこのブログのデザインってどう感じてるのでしょうか?

キャリコの中では大胆な決断をした部分もあって、ややスッキリしたかなって思える印象です。さすがにこれは気づかれるレベルのカスタマイズになったけど、どこをどう変更したのかラテに説明してもらいます。それじゃあ、よろしくね♪

ラテ

こんにちは、ラテにゃ。

誰にも気づかれてなかったら恥ずかしいから、さすがに気づかれる自己満足カスタマイズとか言わないでほしいにゃ。とは言っても大胆な決断をしたのは本当で、今回は訪問者の立場になって考えたカスタマイズにゃ!

Ads by Google

自己満足カスタマイズ

記事領域の幅の変更

キャリコでは記事下にアドセンス広告を縦に設置してるんだけど、横の余白が何だか勿体ないなと感じてダブルレクタングルに変更したにゃ。この件に関しては前にブログで書いたからやり方など興味ある人は記事を見てほしいにゃ。

STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

calico.xyz

理由はもうひとつあって横に並べたら縦幅の 280px 分をスクロールさせなくて済むんじゃないかと考えたからにゃ。そう思ってから次の項目ではキャリコ的に大胆な決断をすることになったにゃ。

トップ画像を削除

記事領域を広げたことでトップ画像の横幅も大きくせざるを得なくて、実際にサイズを合わせたらトップ画像の占める割合というのが予想してたより大きくなったと感じたにゃ。

それでさっきのスクロールさせなくて済むという考えに基づいて、トップ画像を削除して記事がすぐに読めるようにさせたにゃ。これにはスクロール以外の理由もあって最近導入したヒートマップが決め手だったにゃ。

ヒートマップ

無料高機能Webアナリティクス | Ptengine

モバイルからPCまで。デザインやUIも評価できる無料高機能Webアナリティクス。

www.ptengine.jp

これで見るとよくクリックされてる場所がブログタイトル、固定ページ、最新記事、プロフィール、検索窓、カテゴリの STINGER5 ということがわかったにゃ。ブログタイトルと固定ページの間にあったトップ画像を削除することで、マウスをそんなに動かさずにどちらもクリックしやすくなったと思うにゃ。

元々あった画像は小さくしてプロフィール画像としてサイドバーのトップに表示させあるにゃ。ほかのブログでは広告が貼ってある場合が多いから、ここに画像を置いといた方が自然かなと思っての配置にゃ。

サイドバーの順番入れ替え

ヒートマップでよくクリックされる場所がわかったから、サイドバーで最もクリックされているカテゴリの STINGER5 を上に持ってきたにゃ。今までは下の方にあったけど上に持ってくることでアクセスがしやすくなったと思うにゃ。

あとはタグが思いのほかクリックされてたからカテゴリと一緒に移動させて、シェアボタンはプロフィールの一部として配置することにしたにゃ。それに伴い設置したばかりの購読ボタンは最下部へ追いやったにゃ。

ブックマークと購読ボタンの設置

ブックマークの「 はてブ 」と「 Pocket 」、そして購読の「 RSS 」と「 Feedly 」はサイドバーが固定されて表示される部分にゃ。記事を読んでる間に押せるようにと常に表示させて、読者の獲得や後で読んでもらえるような工夫をしたにゃ。

このボタンの設置に関しては前回の第3弾でやったやつの応用にゃ。

キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

calico.xyz

サイドバーの背景を白に

今回のカスタマイズでサイドバーに注目した結果、何だかごちゃごちゃしてると感じてやってみたのが白背景にすることにゃ。今までは透明感にこだわって背景を見せてたんだけど、白背景を採用することでグッと見やすくなって驚いたにゃ。

そう考えると背景に画像を使わずに STINGER5 のデフォルトのままでもいいんじゃないかって気がしてきたけど、とりあえず今回のカスタマイズでは手をつけずに今後はこれで行くにゃ。

まとめ

今回は訪問者目線でカスタマイズしてみたけど、実際のところ見やすくなったと感じるかにゃ?このカスタマイズでまたちょっと気になる部分が出来たけど、様子を見つつ変更点があれば第5弾をやりたいと思うにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …

STINGER5 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

Photo credit : instagram, muradosmann
STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

1
STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …