So-net無料ブログ作成

ソネットブログのデザインを色々弄って変更してみよう!

 カテゴリー:ソフトウェア PC関連

ソネットブログのカスタム方法を色々書いてみました。
ブログを色々弄ってみたい方、
興味があれば是非一度見ていって下さい。

【目次】

コメント欄のゲストアイコンを変更しよう


profile_guest.gifソネットブログを使っている人のコメントは
(設定していれば)オリジナルの画像が表示されるのに
ソネットブログにログインしていなければ、この味気ないアイコンになってしまいます。
この差別化って、何か嫌じゃないですか?
どこか排他的な感じがして、ずっと気になっていたんですよ。
それで、googleで検索してみたらTANさんが、解決策を公開してくれていました。

So-netブログのコメント欄のゲストアイコン変更:■ 音楽方丈記 ■

とても詳しく分かりやすく紹介してくれているので、とても参考になりました!
ゲストアイコンを1種類に限定して表示させたい方はTANさんの方法で良いのですが、
どーしても色々な画像をランダムに表示させたかったので、
TANさんのスクリプトを参考にjavascriptを弄ってみました。
<script type="text/javascript">
<!--
var guest_icon = new Array();
guest_icon[guest_icon.length] = '/_images/blog/+++++'; // ←ここに画像ファイルを設定
guest_icon[guest_icon.length] = '/_images/blog/+++++';
guest_icon[guest_icon.length] = '/_image'; // アイコンの数に応じて、行を追加削除して下さい

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 = guest_icon[Math.floor(Math.random() * guest_icon.length)];
//-->
</script>
全部コピーして、
デザイン > レイアウト > 記事 > コンテンツHTML編集 の画面を開き
一番下に貼り付けてください。
<!-- /Content -->
<% content.footer -%>の下あたりに。
//以降の緑文字はコメントなので、削除して頂いても問題ありません。

使用上の注意点
1.画像イメージのurlを貼り付けるときに、urlを囲んでいる「'」を誤って消さないで下さい。
2.アイコンファイルはいくつでも追加できますが、必要ない行は削除しましょう。


このスクリプトは、TANさんのスクリプトがベースになっています。
TANさんありがとうございます!勝手に改造しちゃいました(゚∀゚;)

違うのは、ページが全て読み込まれたタイミングで画像を変えるのではなく
読み込み中に画像チェンジにした点と
ゲストアイコンをランダム表示にした点です。
ページが読み込まれるたびにランダムで、ゲストアイコンが設定した画像に変わります。

30種類画像を用意して私のブログにスクリプト貼り付けているので、
興味があればゲストでコメント書いて頂くか、リロードして遊んでみて下さい。
アイコン画像で気に入ったモノがあれば、どうぞご自由に使ってくださいませ。


記事下フッター部分のスペースを有効に利用しよう


ソネットブログって、記事下の部分が結構スペース開いてますよね。
そこに色々埋め込んじゃおうというわけです。
例えば、
ブログランキングに参加されている方はバナーを張ったり
テキストで”ランキングに投票”なんて簡単なリンクを作るのも良いかも。
毎回記事にバナーを貼り付けるの面倒じゃないですか?

ちなみに私は、addclipsと
私の記事基本的に長いので(´∀`;)
トップへジャンプするリンクを作りました。
記事ながっ!スクロールするのめんどくせぇ!!
とお怒りの皆さんのために作ったので、是非使ってください。

リンクやバナーを貼り付ける位置ですが、
kaisetu.PNG
デザイン > レイアウト を開いて、記事の部分をクリック

kaisetu2.PNG
右上のコンテンツHTML編集の画面を開きましょう。

ctrlキーとFキーを同時に押して、文字検索を出して
div class="posted” というワードを探して下さい。
その辺が、記事下のフッター部分です。

&nbsp;と書かれている部分があると思います。
それは、ブラウザ上では半角スペースとして表示されます。
何か貼り付けたい方は、その後ろあたりに貼り付けてみてください。
貼り付けた後に同じように&nbsp;を入れるのをお忘れなく。
説明がアバウトですが・・・、健闘を祈ります!
やっているうちに分かります!

必ず表示確認してから保存して下さい。
仮にミスして変になっても初期状態に戻すのは簡単です。


ヘッダー部分を記事幅に合わせてレイアウトをスッキリさせよう


記事幅に比べて、ビローンと間延びした
デザインのヘッダー部分(so-netロゴなどがある一番上のところです)を
スッキリさせましょう。
やり方は凄く簡単なので、是非トライしてみてください。

デザイン > HTML編集 の画面を開いて、
右上のHTMLの追加をクリックしてカスタム用のコピーを作って下さい。
それで、以下のタグを<body>タグの下に埋め込むだけです。
<style>
.sbHeader{
background: #ffffff;
width:810px; height:25px; margin:auto;
}
</style>
文字に色が付いている部分は、
自分のブログに合わせて変更して下さい。
#xxxxxx;で、背景色を設定
width:***px;で、表示したい幅を設定

background:の後の#xxxxxx 部分を以下のように書き換えれば、画像にすることも可能。
url("アップロードした画像のurl") no-repeat;
画像は、横が自分の設定したい記事幅、縦25pxのものを用意してアップロードして下さい。
サンプル
background: url("/_images/blog/_c5c/xxx/xxxxxx.jpg") no-repeat;

下の線を消したい方は、
border: none;をどこかに追加して下さい。

ヘッダー部分のCSS
これを見て、弄りたい箇所を弄っちゃって下さい。


ソネットブログのカスタムに参考にさせて頂いたサイトのリンク集


■ 音楽方丈記 ■ TANさんのブログ
ソネットブログ改造技が多数紹介されています。
コメント絵文字スクリプトを新絵文字対応にしました [So-net blog用]
So-netブログの新しいヘッダーの幅を変更する方法
So-netブログでAmazonアソシエイトの画像サイズを変えたい場合
So-netブログのプロフィールのアイコンをランダム表示させる

などなどなど、とても参考になるものばかりで、ソネットブログユーザー必見です!


ヘッダー部分変更で参考にさせて頂いたSKNYSさんとkovaioさんの記事
猫にも出来るワイド・ヘッダ攻略改:s k n y s - s y n k s:So-net blog
ヘッダカスタム改:デジモノ大好き:So-net blog

めちゃめちゃ詳しく色んな変更方法が載っているkuu♪ さんのブログ
カスタムスキンへの道:So-net blog


あとこれは余談ですが、
ie style.PNG
私が使っているスキンだとIEでは、
記事のタイトルが長くなった時表示が崩れてました。(画像参照)
無駄にスペースが出来てますよね。気づくのが大分遅くなりましたが修正しました。
CSS等色々弄る際は、様々なブラウザを使って確認することをオススメします!

関連記事
IEでエラー発生、原因は? HTMLの話
Opera 9.6を使ってみた。フィードプレビューはメチャメチャ綺麗!
google chromeを使ってみた
できるかなー Firefox編

Start Today 最近の記事


 |  前の記事  |  次の記事  |  HOME  |  記事トップ ↑

トラックバック 1

トラックバックの受付は締め切りました
RSS 1.0
オススメサイトの最新記事

あわせて読みたいブログパーツ

Powered by Ayapon RSS! オススメ 相互リンク ページランク

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。