おーとえすとさいと

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

*

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

      2013/01/31

qlookblogdesign2
時間は万能薬のデザインを少し変更しました!
その際、素人ながらに何を考えて、どういう意図で変更したのか、って事を書いておこうと思います。ブログデザインの作り方というか、ブログデザインにおいて素人の自分が思う最低限のところの作り方や考え方みたいな話です。
また、最後に備考として「今回参考にした意見がもしかしたら時代遅れだったんじゃないか!?」って事について少し語ってます。2カラムはもう時代遅れなんでしょうか。。

とりあえず書いていきます。

右サイドバーが主流

まず、初期設定ではサイドバーが左側だったんですが、これを右側に変更しました。
これは良く言われている事なんですが、人は物を左から右に見るとかそんな理由で、読者が見たい物を左にもってくるのが良いそうです。
その他、そういうブログデザインに関する事について以下の記事なんかも参考にして変更しました。(他にも過去に読んだたくさんの記事が参考になっているんでしょうけど、すぐに見つけられた記事2つのみを紹介)

以上の記事などを読んで、他には横幅は初期設定の760pxから960pxに変更しました。それにともなって、サイドバーは180pxから380pxに変更してます。

なんとなくの目安としては、サイドバーにレクタングル(大)を置けるくらいの大きさを意識したのと、前にファンブログハックのデザインを考えていた時に横幅が960のサイトが多かった記憶があるから、とかそんなもんですw
コンテンツ部分の横幅は変更していません。コンテンツ部分は横幅が広くなりすぎると読みにくいという意見もあり、自分もそう思うので広くし過ぎない様に注意してます。

一応デザイン変更のビフォーとアフターを載せておきます。

ビフォー

qlookblogdesign1

アフター

qlookblogdesign2
大きな変更は、その「サイドバーの左右を変更した事」と「横幅を広げた事」、それくらいです。デザインには無駄に時間をかけない様に注意しています。

デザインがしょぼいのは仕様なの?なんなの?w

「デザインを変更しました!」という記事を書くにはあまりにもしょぼいデザインだと思う方もいると思います。
自分が注意している事は、先程も言いましたが、「デザインには無駄に時間をかけない事」です。これはファンブログハックを何度もデザイン変更したりしながらアフィリエイトやブログ運営について学んでいて、やっと学習した事ですw

アフィリエイトを学び始めた頃にも、どこかのサイトで「デザインはあと回し。とにかく記事を書け!」みたいな意見はたまに読んだんですが、デザインの変更は楽しくてはまってしまいました。
しかし、デザインを変更してもアクセスは伸びないのです。当たり前ですが、本当にそうなのです。それなのに、1日に100もユニークアクセスが無い様なブログのデザインを、素人が時間をかけて一丁前に満足できるデザインを作り込んでも悲しいだけです。

そして、ブログのアクセス数というのは、本当にたくさん記事を書かないと増えてこないんです。デザインの勉強をしている暇があったら、少しでも記事の書き方の勉強をして、記事を書いて、色々学んで、コンテンツを積み上げていかなければならないなーと今は思える様になりました。
ブログのアクセス数が伸びてきたら、それに応じて少しずつカスタマイズしていきたいな、と今は思っています。とりあえず、1日100ユニークアクセスを達成して、それが普通になるまではこんなしょぼいデザインで行くつもりですw

見出しタグを分かりやすく

そんな訳で、大した変更はしていないんですが、(実際には細かい調整とかもしているんですがw)、見出しタグのデザインも変更しました。
そのビフォーとアフターの画像も載せてみます。

ビフォー

見出しタグ_before

アフター

見出しタグ_after
単純ですが、この良く使われているcssの「border-left」を使って、見出しが目立つ様にしました。やはりこれの有無は大きいです。見易さがだいぶ変わるので。
コードしては以下の数行だけなので、デザインの変更をした事がない方も使ってみると良いと思います。(見出しを使って、読みやすい様に文章を書くってのも結構重要だと思ってます。)
ちなみに、色の変更は#の後の数値を変更すれば出来ます。

h3{
border-left:3px solid #4466cc;
padding:0.5em 1em;
margin:1em 0 0;
}

文字の大きさを少しだけ大きく

「なんやかんやで実は色々変更してるな俺、、」と思いながら、もう1つだけw
文字の大きさを少しだけ大きくしました!

これについては好みの問題なので、特に言及するつもりは無いんですが、(個人的には少し大きい方が良いと思ってる)、ちょっと書いておきたい事が1つだけ。それは、文字サイズを変更している時に参考にしているページです。それは次のページです。
CSSを使ってどのブラウザでもフォントサイズを「%」で統一させる方法

これが良い方法なのかも分かりませんし、一般的にどのように行われているかとかあまり知らない状態で紹介してしまうのもあれなんですが、一応紹介しておきます。それほどちゃんとフォントサイズを気にしている訳ではないんですが、「一応こんな方法を使っていますよ!」って事で紹介しておきます。

読みやすくて分かりやすいブログを目指す

とりあえず、今回ブログのカスタマイズを行う上で気にしている事とかを簡単に書いてみました。それほど気にする必要はないですし、やはりデザインよりも内容を良くする方法を学ぶべきだとは思いますが、内容もデザインも、読みやすくて分かりやすいブログを目指して頑張らなきゃなと思います。

ちなみに、自分はデザイン素人(独学のみだし、かじった程度)なので、何か間違っている事やアドバイス等ありましたらコメントいただけると助かります。
また、自分は素人なので、素人の方でもこれくらいは少し勉強すればできると思います。なので、「デザインよりもまずは中身!」と言っておきながら、ブログの息抜き程度にCSS(スタイルシート)などブログデザインの勉強をしてみるのもオススメしておきますw

[備考] え? もしかして時代遅れ?ww

この記事のタイトルをどうしようか迷っていた訳です。そして色々調べていたらこんな記事発見。
【20の基礎知識】ブログのリピーターが増えるデザインの作り方 – Foobar Box

まあ今回書いた事は、最初に紹介した2つの記事も含め、他の多くのサイトでも書かれている様な基本的な事です。なので、「書く意味ないかもな」なんて思いながら、それでもブログの履歴的に書いておこうと思ったのと、現状の自分の考えも書いておきたいと思ったので書きました。

「でもやっぱり、今見つけたこのサイトでも同じ様な事書いてあるし微妙だったかな。ってかこのサイトは分かりやすくまとめてあるな〜。」

なんて思って読んでたんですが、どうやらこのブログは移転している様で。「新しいブログはどんなデザインなのかな?」と思って見てみたら、3カラムやないかーい!!!w

広告を貼る場合は、広告様のカラムを用意した方が分かりやすくて良いんですかね。全然分かりませんけど、自分が知っている知識は既に時代遅れなのかもしれないなーって思いました。「3カラムは微妙だ!2カラムで右サイドバーが基本!!」って書いてある記事をたくさん読んできましたけど、最近も3カラムのブログは結構ある様に感じていましたし。

今度デザインを思いっ切り変更する時には、ちゃんと改めてデザインの事を勉強してからにしなきゃな、と思いましたとさ。めでたしめでたし。いや、めでたくない、めでたくないww


 - ブログデザイン

Message

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

  関連記事

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

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

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

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

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

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

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

前回、素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」という記 …

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

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

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

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

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

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