コーヒーとブログの大人な関係

やろうと思いながら、時間がかかる作業なので手を出さずにいた、ブログのカスタマイズを始めました。

やはり、アフィリエイトの効果を高めるためにはカスタマイズした方がいいようです。

どういう部分をいじればいいのか、それは後回しにして、とにかくカスタマイズにチャレンジしてみたという方が正確です。スパムにならない程度にキーワードをどこに埋め込むかとか、最近の動向もあるでしょうから、これは後回し。

基本は検索エンジンをだますではなく、検索エンジンにやさしく作ることだと思います。こてこてに着飾るのではなく、せめてありのままの自分の姿をしっかりとアピールすることではないかと思います。だから控えめでもだめなのです。

今回のカスタマイズはブログの横幅を増やして情報量を多くできるようにしました。特にサイドバーの幅を180ピクセルに広げました。

そのためにカスタマイズ可能なスキンをまず選び、スタイルシートを変更していきました。まずタイトル画像を自分で920*250pxに切り出し、変更。

タイトル画像の変更

記事を下書きモードにし、そこを画像の置き場にします。画像を貼りつけて、右クリックでURLを確認して、そのURLをスタイルシートのタイトル画像を指定している場所のものと入れ替えてあげます。

/*------------------------------*/
/* ヘッダータイトルに関する指定 */
/*------------------------------*/
#content #header {
width : 920px;
height : 250px;
background : url("https://fanblogs.jp/begin/file/***") no-repeat center top;
color : #FFFFFF;
/* 折り返しの対応 */
line-height : 4px;
position : relative;
overflow : hidden;
}

作ったタイトル画像を入れてやるとwidthとheightは自動的に画像の大きさをとってくれるようです。

タイトルとその下のブログ概要の位置を変えたい時は

#header #blogname {
margin : 80px 340px 0px;
line-height : 24px;
vertical-align : center;
font-size : 24px;
overflow : hidden;
}

#header #description {
margin : 6px 340px 0px;
line-height : 14px;
font-size : 14px;
height : 45px;
overflow : hidden;
}

ここのマージンをかえるのですが、マージンが曲者で上、右、下、左の四か所で指定します。中央に置く場合には2つを指定sてやると上下、左右をそれぞれ均等に配置してくれますが、画像の関係で右に置きたいという場合には右からの距離と左からの距離を指定します。試行錯誤するうちにわかります。


サイドバーとメインの幅の変更

次に右サイドバー　左サイドバー　メインの幅を指定します。pxで指定しましたが、%が使えれば、そちらの方がスマートですね。ようするに割合を決めてあげます。

これで終わりと思いきや、選んだテンプレート背景に画像を指定していました。とりあえず、background urlとなったところをはずし、background-colorで色指定して逃げました。

background : url("/template/3007/img/header_side.png") no-repeat;

これを
background-color : #****** ;

と色見本から好きな色を選んで#******に入れます。

ブラウザをfirefoxを使っているのですが、firefoxでうまくいってもインターネットエクスプローラーでは崩れていることがあります。よくあります。fairefoxをお使いの方は気をつけてIEでもチェックしてください。IEユーザーが圧倒的に多いわけですから。

なんて書きながら実はIEでチェックしたら、どうしても機能追加した箇所の横幅がおかしく表示されます。アフィリエイト部分ですのでorzです。

今度は機能モデュールも細かく指定しないといけないようです。（たぶん先に指定したものが生きますので、スタイルシートに指定してしまえばいいかもしれません）

タグをかいたのでクリックボタンが貼れません。横の応援ボタンをよかったらクリックしてください。