ブログの背景素材をあれこれ購入、、

今日は、ブログのふいんきを変えてみようと思ったんですが、とりあえず、背景素材を購入してブログカスタマイズすることにしました。

今回は、Fotoliaっていうところで素材を購入してみたのですが、わりとぶなんな感じに仕上がったのではないかなと思います。

ブログの背景素材は、スタイルシートCSSでリピート素材として指定するといいようですが、当ブログの場合はこんな感じで組み込んでます。

body {
background-image:url(背景素材のあるURL);
background-repeat:repeat;
background-position: top center;
}

レンタルサーバーでブログを更新している場合は、そのままサーバーにアップロードしてURLを指定すれば簡単みたいですね、、。

blogger ブログの場合は、ピカサのウェブアルバムにアップロードすればいいかと思いますが、検索でヒットするような一般公開扱いになってしてしまうとまずいんで、限定公開扱いにしないといけないはずです。

他にもいろんな画像が売ってたんで、いろいろ買ってみました。

例えば、こんな感じのだと３００円みたいです、、。



あれこれ買ってるうちに、あっという間に購入したクレジットがなくなってしまったのですが、画像選びというのもけっこう楽しいものだなぁと思います。

上の素材サイトで購入した画像は、個人用・業務用を問わず、幅広い用途に利用可能とのことなので、ブログやホームページの背景素材探しにはけっこう便利です。

ブログの見え方はブラウザによって違う

ブログのレイアウトはブラウザによって違いますが、特にＩＥの場合はバグが多く、ブログのレイアウトが崩れて表示されることもしばしばです。

特にＩＥ６では、マージンの値が通常の２倍になってしまったりするんで、レイアウトを考える際は、なるべくバグを回避するようなブログの作り方をする方がいいかと思います。

ただ、最近はＩＥ７の次のＩＥ８まで出てきていて、バグの方も修正されているようなのです。

ＩＥ８が出てきた現在、ブログのレイアウトが崩れるという話は、もうすでに過去のものと思っていたのですが、以前としてブラウザシェアにおけるＩＥ６ユーザーの割合は多いようなんです。

ＩＥ７の評判が悪かったのはしょうがないですが、わりと好評のＩＥ８が出てしばらく経過した現在でも、アップグレードの方はそれほど進んでいないもようです。

当ブログのアクセス解析を見てみると、ＩＥが６５％、ファイアーフォックスが２１％、そのほか、サファリ、グーグルクロムで数％ぐらいの割合になっているようです。

この６５％のＩＥのうち、約５０％がＩＥ７，約３０％がＩＥ６，残り２０％がＩＥ８という割合です。

当ブログではこんな感じですが、一般的なサイトの場合でも、けっこうＩＥ６の割合が多いっていう噂をちらほら聞きます。

そのようなわけで、バグの多いＩＥ６で自分のブログがどのように表示されているのかは、一度確認しておいた方がいいかと思います。

当ブログの場合でいうとこんな感じです。

Firefox 3.5.2 での表示



ＩＥ６での表示



ＩＥ６の場合はレイアウトが崩れてしまって、右サイドバーがなくなってしまっているようです。

この修正方法にもいろいろあるとは思いますが、私の場合だと、左サイドバーもしくは右サイドバーをちょこっとだけ小さくして、余白スペースを作ることで簡単に回避しています。

絶対指定でのレイアウトの場合、通常だと、全体の幅が900pxだとしたら、左に600px、右に300pxとかって割り振りますが、全体の幅をそのままに、内側のボックス要素の幅を少し少なくするという感じです。

今回は左サイドバーの幅を4pxぐらい小さくしたら収まったんで、そんな感じで修正してみました。

外国では企業によるIE6の撲滅運動が活発化したりもしていますが、わたしはＩＥ６の修正作業自体は、スタイルシートの勉強にはけっこう役立つことも多かったりもします。

そんな意味でも、一度はＩＥ６あたりでのブログの表示がどうなっているかは確認してみた方がいいですが、上位のバージョンのＩＥを６にロールバックするのはなかなか大変なようです。

bloggerブログをcssでデザイン変更

blogger ブログを css でデザイン変更しようって思うんですけど、ブログのスタイルシートのカスタマイズっていうのはなかなか難しいものです。

ブラウザのずれとか、ＩＥバグとかもありますし、、。

特に、blogger のスタイルシートは、他の無料ブログサービスと違って、cssが外部化されていないようなんで、多少わかりずらいっていうのもあったりです。

でも、たいていは記事本文のあたりのスタイルシートを変更すれば、けっこうブログの印象も違ってくるものかと思うんです。

その「記事本文の箇所」ですが、テンプレートによっては違うかもしれませんが、「レイアウト - HTML の編集」のスタイルシートの箇所で 「 post-body entry-content 」 っていう部分が該当するようです。

でも、.post {っていうのはあるようなんですが、post-body の部分をスタイルシートで探してみても、どうもないようなんで、わたしはこんな感じで追加してみました。

.post-body {
line-height:160%;
letter-spacing:0.01em;
color:#333333;
}

br {
letter-spacing:0;
}

「 line-height 」の部分は行間を160％空けるという意味で、「 letter-spacing 」は文字と文字の間隔の値、#333333っていうのは、文字の色の指定のことです。

ただ、letter-spacing を設定すると、ＩＥの方では改行が反映されないようなんで、br{} の部分も指定してみた次第です。

ブログの行間設定は一般的には、150％ぐらいのようなんですが、どうも横に若干広めのブログの場合は、多少多めにとって方がよさげな気もします。

このほか、記事タイトルの色彩などを変更する場合は .post h3 を、ブログタイトルの部分を変更する場合は、#header h1 の部分を変更するといいようですが、テンプレートによっても違いがあるようです。

色彩を変更する際は、color:#333333;っていう箇所に色彩のコードを入力しなくてはいけませんが、パワースポイトという無料ツールを使用すると、見ている画面上からさまざまな色彩を採取できるので大変便利だなって思います。

パワースポイト

「スペースキー」で採取と解除を繰り返したら、適当な色彩が採取できるかと思います。

navbar が機能していない

グーグルブログには navbar という独自の機能があったりしますが、ページの上部に表示されているお隣さんの表示機能のやつです。

この navbar はおそらく、お隣さんのネイバーとナビゲーションのナビの語呂合わせ的なネーミングだろうと思いますが、何て読むのかはわかりません。

テレビのチャンネルを変える感覚で、次のブログをころころと表示させることができるのですが、いまいち、２，３個にひとつはこの機能を非表示にしているブログがあったりして、途中で途切れてしまうようです。

この navbar は使ってみると面白いと思うのですが、はずしている人もいるようで、途中で行き止まり状態になって、もういいやって感じで帰ってくることが多いです。

私の場合は行き止まりになるまでころころやるんですが、たまにずっと途切れることなく表示されると、なんだか今日はついてるなって気分になります。

navbar は blogger 全体での機能なので、お隣さんは海外ブログがけっこう多いです。

デフォルトの設定では navbar は非表示にできないはずですが、たぶん、css で display:none とすれば、表示されなくなるのではないかなと思います。

navbar は機能すればアクセスアップにもつながりますし、便利な機能だとは思うんですが、スタイルシートのデザイン的に多少じゃまになる面もあったりで、はずすというのもそれはそれでもっともだよなとも思ったりです。

cssを外部化するには？

blogger の css は hmtl の head タグ内に直接書き込まれているようなので、外部スタイルシート化しようと思っていたのですが、これが案外難しいようなのであきらめました。

方法としては html の head 内に次のタグを挿入すればいいだけです。

<link rel="stylesheet" href="cssのあるurl" type="text/css" />

ただ、このcssを置いておく url をどこにしようかということで、どこか適当な箇所を探してみたのですが、ファイルをアップロードできるようなスペースが blogger にはないようなんです。

blogger 内には、html ファイルなどをアップロードできる場所がないですし、画像をアップロードするようなとこには、css ファイルはアップロードできませんし、結局、自分でレンタルしているサーバーぐらいしかないかなと思います。

自分のレンタルサーバーにアップロードして、そこの url を上のタグに指定すればいいだけなのですが、あえてそこまでするのも何だったんでやめました。

グーグルブログの blogger のように、スタイルシートが独立していないのは、別に何がどうなるというものでもないとは思うのですが、ほとんどの無料ブログサービスでは外部スタイルシートというのが通常だと思います。

なので、若干気にはなるのですが、考えてみれば、ブログの seo 的にはそれほどの影響もないのではないかなと思います。

スタイルシートをipの違うサーバーから引っ張ってくるというのは、やはりやらない方がいいのではないかなという気もしないではないです。

片方のサーバーが落ちれば、css なしでのブログが表示されてしまう可能性なんかもあるわけで、やはり外部スタイルシート化する場合、ブログとスタイルシートは同じサーバーに収めておくべきなのではないかなと思うのです。

blogger のサーバーに css ファイルをアップロードできない以上は、あえて外部スタイルシート化する必要性もないのではないかなと思うのです。