ブログのカスタマイズ！

ＧＷなのに、あいにくの天気が続いていますね。
体調がすぐれないので、外出はせず、家で「ご静養(笑)」を決め込んでおります。
家で休んでいてもひまなので、以前からの懸案事項に手をつけることにしました。

今年に入ってから、ソネブロのシステムが大幅に改変され、以前にカスタム設定したものがすべてデフォルトに戻ってしまいました。
これら諸先輩の記事を参考にして、カスタマイズのやり直しです。（御礼のコメントを入れさせていただきました）

http://sothis.blog.so-net.ne.jp/2006-08-09-1
http://chiyorogi.blog.so-net.ne.jp/2007-02-04

１．ゲストアイコンのカスタマイズ

まずは、36×36pxの画像を準備して、アップロードしておきましょう。
せっかくなので、時間をかけて４コマのGIFアニメーションを作ってみました。
（大したものではないですが）

 

ソネブロの管理ページを開いて、「デザイン」の項目から「レイアウト」を選択します。
私の場合は、以前に設定した、「ゲストアイコン」という名前をつけたカスタムペインの残骸が残っていました。以降、このカスタムペインを修正して対応することにします。
新規で設定される場合は、画面左側の「カスタムペイン」の項目を中央にドラッグしてくるのだと思います。

カスタムペインをクリックして開きましょう。

「自由入力欄」に、次のスクリプトをコピーして貼り付けます。

<script type="text/javascript">
<!--
if (window.addEventListener) {
window.addEventListener("load", changeIcon, false);
} else if (window.attachEvent) {
window.attachEvent("onload", changeIcon);
}
function changeIcon()
{
var img = document.getElementsByTagName("img");
for( i = 0; i < img.length; i++ )
if( img[i].src == "http://blog.so-net.ne.jp/_img/cmn/profile_guest.gif" )
img[i].src = "/_images/blog/_8fe/umako-E46/aopera20guest20icon.gif"; //
}
//-->
</script>

貼り付けたスクリプトのうち、赤いアンダーラインで示したところを、さきほどアップロードしておいたカスタム アイコン用の画像のアドレスに書き直します。

画像のアドレスを調べるには、アップロードした画像の「編集」という文字をクリックします。

別のウインドゥが開きますので、「元ファイルを見る」という文字をクリックして下さい。

さらに別のウインドゥが開きます。

この画像のアドレスのうち、「_images/blog/」の後の、アンダーバーで始まる文字列をコピーして下さい。恐らく、みなさんのパソコンに納まっていた時点（アップロードする前）とは、画像の名称が異なっていると思います。自分は、この差異に気づくまで時間がかかりました。

スクリプトを慎重に修正したら、「設定を保存する」をクリックします。
この画面を閉じて、一つ前の画面に戻りましょう。

一つ前の画面に戻ったら、「設定を保存する」というボタンをクリックして完了です。

 

２．オリジナル バナー

先ほどと同じ要領で、ブログのバナーもカスタマイズしてみましょう。
かなり横長の画像（私の場合は770×140px）を準備して、アップロードします。

「自由入力欄」に、次のスクリプトを貼り付けます。

<style>
#banner {background:url("/_images/blog/_8fe/umako-E46/meterskin-65fde.jpg")

no-repeat 0px 0px;}
#banner h1 a{font-size: 18pt; color: #FF9900; margin-left: 18px; }
#lead{font-size:10pt; color:#FF9900; margin-left:18px; }
</style>

アップロードした画像のアドレスを調べて、スクリプトを書き直すのは同様です。(･∀･)b

バナーには、「ブログタイトル」と「ブログの紹介文」が重なって表示されることになりますが、これもカスタマイズできるようです。
スクリプトのうち、「#banner」と書かれている行は、ブログタイトルのカスタマイズに関係します。すなわち、「font-size:」に続く数値を変えれば文字の大きさ、「#FF」で始まる６ケタの数値を変えれば、文字の色も変更できます。
文字の色は、このページに一覧表が出ているので、好みの色を探しましょう。

http://blog-help.blog.so-net.ne.jp/color

行末の「margin-left:」に続く数値を変更すると、オリジナルのバナーの左端から、文字列が中央に寄ってきます。バナーの画像によっては、画像と文字列が重なって見づらい場合に便利ですね。

スクリプトの「#lead」と書かれている行は、ブログの紹介文のカスタマイズ用です。こちらも文字の大きさ、文字の色、文字列のオフセット具合を変更できます。 

設定を保存して、自分のブログを見てみましょう。うまくいかない場合は、スクリプトの文言を詳しく調べて下さい。ほんのわずかなカンマやコロン、スペースの有るなしの違いでもうまく機能しません。自分も何度か失敗を重ねてしまいました。

見違えるようですね。ゲスト アイコンも変えたので、ソネブロ ユーザー以外のお客様を迎えるのも楽しくなりそうです。

参考にさせていただいた方々には、改めて御礼申し上げます。<(_ _)>

コメント 14

バナー復活、おめでとう御座います。
４コマのGIFアニメーション、良いですね！！
また時間をみて作ってみようかな (^o^)

by Ten (2008-05-05 22:05) 

昨夜は夜通しフォトショップをいじってアイコンを作ってました。
４コマでこれだけ悪戦苦闘するのだから、世の中のアニメーション作家って
すごいと感じました・・・。
by 馬子 (2008-05-05 23:05) 

馬子さん、こんばんは。
ご訪問とご紹介をありがとうございました。
ソネブロでカスタムスキンが使えるようになった時から、
カスタムペインを使わずに直接スタイルシートを編集していたのですが、
今年の大メンテナンスで設定がガタガタになってしまいました(T_T)
それで、スキン管理の「スタイルシート編集」で一からやり直しました。
こちらのバナーはうまく表示されているようで、よかったです(^.^)
ゲストアイコンも楽しいデザインですね♪
by チヨロギ (2008-05-05 23:45) 

チヨロギさん、わざわざご来場ありがとうございます！
ｵﾛｵﾛ ヽ(´Д｀;≡;´Д｀)丿 ご本人だ～!!

ソネブロの中には、たまに「こんなスキンあったっけ？」
「センスのいいデザインだな～」と感じることがしばしばです。
自分にはプログラミングの知識がないので、専門用語で解説されていらっしゃる方のブログを読んでも、理解できずにため息ばかりついていました。

そんな中、チヨロギさんに教えていただいた方法は、自分にも？うまくできたシンプルなものでした。みなさんにも安心してご紹介できると思います。
by 馬子 (2008-05-06 00:29) 

おお～！あたしも丁度ゲストアイコンカスタマイズしようと思ってたの！
んで、アイコンだけ準備してたの！
ナイス記事！マネさせていだくわ！！！

アニメーションだなんて素敵！(≧∇≦)b
by ちぃ (2008-05-06 08:37) 

ちぃさん、おはようございます。
すごいタイミングですね！
どんなアイコンが登場するか、期待してますよ。
（ちぃさんのイラスト、楽しいし）
by 馬子 (2008-05-06 09:14) 

ついでに自分のアイコンも変えた(≧∇≦)b
ゲストアイコン設定してみました！
自分のアイコンは、ちょくちょく変えるかも～
飽き性なのでｗ
でも、お花はトレードマークなので変更なっしんグー！
by ちぃ (2008-05-06 09:39) 

＞ちぃさん
先ほど拝見しました～。カワエエ アイコンですね。
ちぃさんのブログのお客様は、「ねこのアイコン」の方が多いので、
このゲストアイコンですと、一瞬「ゲストさん」に見えないのが
ミソでしょうか(･∀･)？
by 馬子 (2008-05-06 13:29) 

はじめまして。
ソネブロ始めて3年。
味気ないゲストアイコンを変える方法はないものかと
「ゲストアイコン」で検索をして、こちらに辿り着きました。
さっそく、真似して変えてみました！
とても簡単にできて感動ですっ☆
馬子さんのようにアニメーションにはできませんが、
色々変えながら楽しみたいと思います^^

どうもありがとうございました！！！
by JOHN (2008-07-25 10:14) 

JOHNさん、ご訪問ありがとうございます。
自分も先輩方のブログを参考にさせていただいたので、
なんだか恥ずかしいですね(^o^;ゞ
私もソネブロ３年生です。今後ともどうぞよろしくお願いします。


by 馬子 (2008-07-25 20:50) 

初めまして♪　
早速　参考にさせて頂き　
完成しました♪　
なんだかとっても嬉しいです（≧▽≦）　
ありがとうございました♡
by amane (2008-07-25 21:46) 

amaneさん、こちらこそはじめまして。
ブログを拝見させて頂きました。
自分も、ブログを書きはじめの頃は、知らずに他人に迷惑をかけて
しまったことがあるのを思い出しました。
「常に見られている」ことを心がけて、これからも記事を書きたいと思います。

by 馬子 (2008-07-26 12:15) 

はじめまして^^
こちらの記事を参考に、ゲストアイコンを設置させていただきました！
きっと訪問してくれるゲストも、喜ぶに違いないですね。
嬉しいです^^
ありがとうございました！
by テイン (2008-08-10 04:42) 

テインさん、ご訪問＆ご紹介ありがとうございました。
私が参考にさせて頂いた先輩から始まって、みなさんのブログにも
ゲストアイコンが広まっていくのは、何だかバトンのようですね。
by 馬子 (2008-08-10 09:13)