おーとえすとさいと

「おーとえす」が「サイト」を作ったり更新したりしてる時に思う事を書いていければ良いなと思います

*

アクセスが増えてきたのでブログデザインを改良しました

   

qlookblogdesign3

前回、素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」という記事で、時間は万能薬のデザインを少し変更しました、っていう記事を書きました。

その記事の中で、以下の様な事を書きました。

ブログのアクセス数が伸びてきたら、それに応じて少しずつカスタマイズしていきたいな、と今は思っています。とりあえず、1日100ユニークアクセスを達成して、それが普通になるまではこんなしょぼいデザインで行くつもりですw

そして、気付いたら1日に200人くらいの方に来てもらえるブログになっていたので再度デザインを改良しました。何を変更したのか、一応メモしておこうと思います。

改良前と後

一応、最初に改良前と改良後のキャプチャ画像を載せておきます。とりあえず雰囲気だけw そのあと何を改良したのかという話をします。

改良前

qlookblogdesign2

改良後

qlookblogdesign3

では、以下で何を変更したのかを簡単に説明していきます。

ヘッダーを画像にした

まず、ブログのヘッダーを画像にしました。ブログロゴを作ってみたって感じです。自分の勝手な考えなんですが、ヘッダー1つでブログの説得力って結構変わるんじゃないかな、と思っています。初期設定のままだと無料ブログ感と言いますか、素人ブログ感と言いますか、そういう印象も与えるかなと。

ただ、今回その改良はもしかしたら改悪になってしまってるかな、とも思っています。なんていうか、あまり良い感じにならなかった。。w
ちなみに、こんな感じです。
time_logo
これの上半分が通常時に表示されていて、マウスホバー時に下半分が表示されます。「時間は万能薬」という事で、時間を表す砂時計に、薬を表すカプセルを入れてみました。
ファンブログハックのブログロゴは割と気に入っているんです。その時は、フォントと図形を並べただけなので、それ程大変ではなかったのですが、今回イラストを付けようとしてしまったが故になんだか頼りない感じになってしまいました。。w

デザイン素人の自分の場合は、イラストを自分で描こうとは思わない方が良い気がしますね。イラスト無しで、文字のフォントやサイズ、並びなどを考えるだけの方が良い感じに仕上がるかもなと感じました。また、無料で加工とかも許可されているイラストとかを使うようにすれば良いのかもしれないですね。

ちなみに、ホバー時の変化とかはブログロゴとファビコン作成してみました – ファンブログハックで紹介している方法で行っています。
(余談ですが、個人的にはホバー時の画像を別でアップロードして切り替える方法を使っているサイトが数多くありますが、1回目のホバー時に画像を読み込むまでのタイムラグが一瞬あるのがあまり好きじゃないんですよね。。w)

ファビコンを設置した

ファビコンも設置してみました。理由はブログロゴと同様です。ただ、残念ながらこれもヘッダーと同様あまり満足はしてないです。。w ちなみにこんなの。
qlook_favicon
背景が青っぽいですが、実際は透明です。(Windows フォト ビューアーで表示して、キャプチャしたので青っぽくなっちゃいました。。)
ブログロゴをアイコンっぽくして、それを使っています。最初はブログロゴの画像をそのまま小さくして使おうとしていたんですが、16×16だと何なのか良く分からなくなってしまったのでこんな感じにしました。

ちなみに、今回調べていて知った事は、最近はファビコンのサイズが1つではない、という事です。ブラウザや表示される場所などによって色々なサイズが使われているんです。そこで、今回は4種類のサイズのアイコンファイルを1つにまとめ、それをアップロードしています。それをやる簡単な方法や詳しい解説は、複数サイズのサイトアイコン(ファビコン)を簡単作成 [ホームページ作成] All Aboutに書いてあったので参考にさせてもらいました。
(ブラウザ上で画像を取り込んだりピクセルで絵を描けば、それの4種類のサイズを1つにまとめたアイコンファイルを作成してくれるX-Icon Editorというサービスがあって、それで簡単に作成できました。自分はサイト上でピクセルで描きましたw)

SNSボタンを設置した

SNSボタンも設置しました。やはり、SNSで共有してもらえる可能性はあるので、その確率を上げる為にも設置しておきました。
個人的な好みでTwitter、はてなブックマーク、Facebook(いいね)、の3つのSNSボタンを設置しました。方法については、【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ) [C!]とかが参考になるかな、と思います。

ちなみに、まだアクセス数が少ないし、ボタンを押してもらえる事も少ないだろうと言う事で、カウンター(押された数)は表示しない様にしています。(いいねボタンはできないですが。)
その方が読み込みも速そうだし、0が並んでいては格好悪いと思うので。
また、記事の最初と最後の両方に表示しています。スクロールしても付いてくる様にしている方なども最近は多いですが、今回はそうはしませんでした。

関連記事を表示する様にした

imagelinks1
あと、関連記事を表示する様にしました。これで、少しは直帰率が減ったら良いなーと思います。
qlook blogには関連記事を表示させるオプションなどは無いのでjava scriptで表示させています。
この時使ったスクリプトは、画像付き内部リンクを表示させるスクリプト 〜関連記事とかに〜で紹介している物です。

背景に画像を使ってみた

背景は前まで真っ白だったんですが、なんとなく画像を使ってみようかな? と思って適当に使ってみたら割と気に入ったので使ってみましたw やはり、画像を使うと印象はがらっと変わるなーと思いました。
最初の比較画像だと圧縮されてて分かりずらいと思うので、サイドバー部分を等倍で切り取った物を下に貼っておきます。(このプロフィールも変えようかな。。w)
qlookblog_background

画像は、継ぎ目のないシームレスな背景画像の無料素材とジェネレーターのまとめ | コリスで紹介されていた、bgMaker ||| Background maker || Tiled Background generator | Web Background makerというサービスを使って作ってみました。
直感的に使えるサービスですし、どんな背景になるのか見える状態で作業できるので分かりやすかったです。

なるべくシンプルに

大きな変更点としては以上になります。
割と基本的と言いますか、個人的に優先順位が高いと思っている事をしてみた感じです。

ちなみに、一応テーマは「シンプルで良い感じに説得力を上げる」ですw
記事を読んでもらって、納得して、紹介している商品を購入してもらう、というのがゴールなので、少しでも説得力が出るデザインになればなと思って改良しました。まあSNSボタンや関連記事はアクセスアップの為ですが。

他にも、「前まで記事のカテゴリが表示されていなかったのを表示する様にした」「サイドバーの項目をliタグで囲った」「アーカイブページを見出しタグやliタグでカスタマイズした」「”続きを読む”のデザインを変更した」っていう超基本的な事や、「シンプルになる様に、またサイドバーのリンクの色を灰色にした」っていう細かい改良もあるのですが、そういう変更はあまり語る事もないのでw

一応、これ以上デザインで改良すべき点ってのは今は見えていないので、しばらくはこのデザインかなと思っています。
今後、アクセス数が上がってきたらまた見直しをしたり、良いデザインの案が浮んだりしたら変更したいなと思います。

でもやっぱり、カスタマイズって楽しいですねw


 - ブログデザイン

Comment

  1. inali より:

    あ、万能薬がなんかモダンな感じになってるw

  2. おーとえす より:

    >inaliさん
    こんにちはですw
    素人感が減って、ちょっとでもブログの説得力が増せばなーって思って変えてみました!

Message

メールアドレスが公開されることはありません。

  関連記事

qlookblogdesign2
素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」

時間は万能薬のデザインを少し変更しました! その際、素人ながらに何を考えて、どう …

css_hover_catch
cssの:hoverの色々な使い方

cssで:hoverって言う類似クラスと呼ばれる物があるんですが、こいつの色々な …

no image
blockquoteタグをCSSだけで格好良いデザインにする【画像不要】

こんにちは、面倒臭がりです。 自分は面倒臭がりなので、ちょっとデザインをいじりた …

no image
暇潰しの為のアンテナサイト「6sec.」を少し更新しました

前に、「作成中のアンテナサイトがあって、アイディアだけ紹介しておきます。」みたい …

footer_fixed
フッターの表示をjQueryでほんのちょっと格好良くしてみた

前に、Stocker.jp / diaryのページに行った時に「このサイトのフッ …

open_sidemenu
サイドバーって死んだの? 〜STINGER5のスマホ表示をカスタマイズ〜

こんにちは。 社会人1年目で現実の厳しさを知って参っているおーとえすと申しますw …

no image
記事を読み終えた時に関連記事をさりげなくアピールするスクリプト

自分は、記事を読み終えた時にニョロっと出てくる関連記事とかが苦手です。スクロール …