ブログ強化月間（その１）：まーいいか：So-net blog

	ブログをはじめるログイン

ブログ強化月間（その１）　[徒然日記] [編集]

ソネブロに引っ越してきてから3ヶ月が経ちましたが、そろそろベーシックスキン〔ブルー〕にも飽きてきました。
それに、記事数が少なくて寂しい．．．（←もっとまめに、更新しろ！）

というとこで、今月をブログ強化月間に任命。

まずは、スキンをオリジナルに。
お恥ずかしながら、私、HTMLだのCSSだなんてのはチンプンカンプンでして（汗）
まあ、そんなのわかんなくてもウェブサイトを持てるのが、ブログの良いところなんですけど。

オリジナルスキンを作るにするにあたって一番やりたかったのは、バナーをオリジナル画像にする事。
so-netの公式ブログにはオリジナル画像にするやり方が載ってるのですが、スキンの種類が限られてるんですよね。
しかも気に入ったスキンが無い。

しょうがないから、CSSのお勉強・・・
なんとなく分かった（気になった）ので、私のやり方を紹介します。

今まで使っていたベーシックスキン〔ブルー〕は気に入ってるので、ベースはこれを使います。
レイアウト設定は、レイアウト：2ペイン左 / 記事幅：ワイド / サイドバー幅：標準

１．【バナー用画像の用意】

幅900ピクセルの画像を用意します。

２．【CSSの取り込み】

スキンデザイン一覧からベーシックスキン〔ブルー〕のサムネイル画像クリックすると、新しいウィンドウでプレビューが表示されます。
［右クリック］－［ソースの表示］でメモ帳にHTML（XHTML？）のソースが表示されます。
その中で、

<link rel="stylesheet" type="text/css" href="http://blog.so-net.ne.jp/_skin/system/16/style.css?1196135510000" />

の構文の中の

http://blog.so-net.ne.jp/_skin/system/16/style.css?1196135510000

の部分がCSSへのリンクです。
IEのアドレス入力にコピペして移動すると、メモ帳にCSSソースが表示されます。
以降、このソースをあれこれイジリますので、使い慣れたエディタがあればそちらにコピペして作業しましょう。

３．【CSSのリンクの編集】

このスキンはバナー画像以外に、ライン等にも画像データが使われています。
取り込んだCSSをそのまま、カスタムスキンの編集画面に貼り付けただけだと、

こんな画面になってしまいます。
これを防ぐ為に、リンクのアドレスを正しく振り直します。

　『例』
　　background: #eef1f3 url("images/bg.gif") repeat-y center top;

→ background: #eef1f3 url("http://blog.so-net.ne.jp/_skin/system/16/images/bg.gif") repeat-y center top;

例に習って、他の"images/XXX.gif"や"images/XXX.jpg"も直します。
数が多いのでエディタの置換機能を使うと吉。

４．【body classの修正】

カスタムスキンのレイアウト設定だと、記事幅をワイドにする選択肢がありません。
今回は2ペイン左の記事幅をワイドにしたいので、HTMLの構文に合わせてCSSの方を変更する必要があります。

HTMLソースの

が2ペイン左 / 記事幅：標準を示しています。
上記構文で記事幅：ワイドが表示できるよう、CSSを下記のように修正。

　『例』
　　.columnL-mainWide #container {

→ .columnL #container {

例に習って、他の.columnL-mainWide構文も直します。
これも一括置換で直しましょう。

５．【バナーをオリジナル画像に】

so-net公式ブログを参考に修正しますが、2ペイン左 / 記事幅：ワイドを指定している構文を修正します。

#banner {

と書いてある文章は、

.columnL #banner {

と置き換えて読んでみてください。

※ざっと紹介しましたが、あくまでも“分かった気になった”私のやり方ですので、本来の方法ではないかも知れませんので、あしからず。
とはいえ、嘘をついてはいけないので、間違いがあればどんどん指摘してください。

せっかく勉強したのでバナー画像以外も色々変えてみたんですけど、今度は「WEBデザインのセンス」問題が発生しちゃいました（汗）
完全オリジナルスキンにするには、まだまだ道が険しそうです。

2008-01-23 01:15 nice!(2) コメント(2) トラックバック(0)
共通テーマ：パソコン・インターネット

nice! 2

katsumushiさん
オリジナルスキン、以前トライしたんですけれど良く分からなくて、
結局挫折してしまいました・・・
今度教えてください！私のもカッチョ良くしたい！
by Akisan (2008-01-23 11:29)

>Akisanさん
私も一度挫折しかかりましたが、何とかいじれるようになりました。
（本も1冊買っちゃった・・・）

>今度教えてください！私のもカッチョ良くしたい！

「まかしとき！」

と言いたいところですが、コラボの中にはキチンと勉強している人もいらっしゃるので、素人が出鱈目教えたら怒られそうです（汗）
by katsumushi (2008-01-23 22:21)