So-net無料ブログ作成
» スポンサーリンク

So-netブログの新しいヘッダーの幅を変更する方法
» So-netブログ改造ワザ 

今回は So-net ブログ限定改造ネタです。
今月21日のメンテからヘッダーとフッターのデザインが変更になりました。

 ヘッダーだけがリキッドレイアウトになった今回の変更は(特にオリジナルスキンやスクリプトで部分的にスキンを改造している人には)不評が多いような気がします。管理画面は前のままになってたりしてなんだかちょっと中途半端ですよね。

 ヘッダーだけ間延びしてしまってなんかイマイチな感じだったので、以前のレイアウトに近くなるように幅を変更する簡単なスクリプトを作ってみました。ついでにプリセット以外の背景色の指定と、フッターの背景色の指定もあわせて紹介します。

コードの貼り付け場所

 各コードの使い方は他の改造ネタと同様に、カスタムペインの空いているところにもしくはサイドバーコンテンツの「挿入テキスト(上または下)」のところに貼り付けます。
ブログの管理設定項目の「URL 自動リンク」を「リンクしない」に設定して入力してください

  

ヘッダーの幅を変更する例

下のコードの「770px」の部分を各自のスキンに合わせて調整してください。
[追記] 2008/12/11
検索欄が追加されて HTML が変わったので余分なコードを削除しました。
(header_ul[1].style~の3行)
[追記] 2008/04/28
今更ですが、Firefox でログイン状態のときにヘッダー左側が折り返すのを修正しました。
[追記] 2008/02/10
sknysさんに右側のリンク表示が勝手に改行されないようにする方法を教えて頂きました。

<script type="text/javascript">
<!--
var header = document.getElementsByTagName("table")[0];
header.align = "center";
header.style.width = "770px";
header_ul = header.getElementsByTagName("ul");
header_ul[0].style.whiteSpace = "nowrap";
//-->
</script>

ヘッダーの背景色を変更する例

下のコードの「#CCCCCC」の部分を任意の6ケタのRGB形式で指定してください。
元のヘッダーのプリセットカラーは変更したい色に近いものを選んでおくと、So-net ロゴ (GIF 画像)の輪郭が目立たなくなります。

<script type="text/javascript">
<!--
document.getElementsByTagName("table")[0].style.background = "#CCCCCC";
//-->
</script>

フッターの背景色を変更する例

下のコードの「#CCCCCC」の部分を任意の6ケタのRGB形式で指定してください。
フッターの場合、ブログ全体が読み込まれてからでないと要素を取得できないので若干手順が増えます。

<script type="text/javascript">
<!--
function footerColor(){
  document.getElementById("footer").style.background = "#CCCCCC";
}

if (window.addEventListener){
  window.addEventListener("load", footerColor, false);
}else if (window.attachEvent){
  window.attachEvent("onload", footerColor);
}
//-->
</script>

上記3つを合わせて変更する場合の例

<script type="text/javascript">
<!--
var header = document.getElementsByTagName("table")[0];
header.align = "center";
header.style.width = "770px";
header.style.background = "#CCCCCC";
header_ul = header.getElementsByTagName("ul");
header_ul[0].style.whiteSpace = "nowrap";

function footerColor(){
  document.getElementById("footer").style.background = "#CCCCCC";
}

if (window.addEventListener){
  window.addEventListener("load", footerColor, false);
}else if (window.attachEvent){
  window.attachEvent("onload", footerColor);
}
//-->
</script>


どれもたいしたものではありませんが、参考になれば幸いです。

[関連サイト]
 So-net blog - 2007/11/21 ヘッダー/フッタ-のデザイン変更
 s k n y s - s y n k s 「猫にも出来るワイド・ヘッダ攻略改」
nice!(10)  コメント(20)  トラックバック(3)   » カテゴリー:So-netブログ改造ワザ
permalink
trackback
このエントリーをはてなブックマークに追加


» スポンサーリンク
DMR

サウンドハウス


nice! 10

コメント 20

sknys

TANさん、こんばんは。
CSSで通常サイズ(770px)のヘッダに変更したのですが、
右リンク(sbMenuR)が2行に表示されてしまいます。
横幅を指定すると左に寄っちゃう(現在の状態)。
右揃え1行で表示する方法はありますか?
by sknys (2007-11-24 02:07) 

TAN

じつはその解決方法をまだ発見できてません[汗汗]

どうせ右のメニューはいらんだろうということで、
消す方法を注2で追加解説しています。
by TAN (2007-11-24 02:37) 

けーたん

TANさんこんばんは(*^^*)
今回のヘッダーの件、かなりのストレスだったんですが
この方法すごいですねー(><*)
早速利用させて頂きます~♪
by けーたん (2007-11-25 03:41) 

うさぎりんご

こんばんは、はじめまして。
「ヘッダーの幅、なんとかして~!」と思っていたので、本当にありがたいです。色変更もできるなんて感激です。
so-netさんもどなたかが解決方法を公開してくれるまで、放っておかないで、変更方法をWhat’s newに載せてくれていたら、不満も少なかったと思うのに・・・。それほど、あのヘッダーデザインに統一したいのか疑問です。
by うさぎりんご (2007-11-25 21:03) 

TAN

けーたんさん、うさぎりんごさんコメントありがとうございます[ニコニコ]
今回のヘッダーの仕様変更って、今頃になってわざわざやる必要が
あったのか疑問ですよね。

ソネブロって管理画面も含めて使いやすいブログの部類に入ると思うんですけど
もう少しユーザの意見や反応を反映させてほしいと思うことが時々あります。
(最近は1年前の激重状態がウソのように安定動作しているだけに残念)
by TAN (2007-11-25 22:10) 

うさぎりんご

再び失礼します。
私も管理画面やカスタマイズスキンの使い勝手は、いいと思います。だからこそ要望だってだすんですが・・・。
>1年前の激重状態
知ってます!! しかも、あのころはメンテの度に重くなって、先行きが不安でした(笑)。

ところで・・・トラックバック記事を書かせていただいたのですが、もしまずいところがあったら、ご指摘ください。修正します。
by うさぎりんご (2007-11-25 23:57) 

TAN

今のままでも結構ですが、できれば全文引用よりもタイトル(とリンク)だけか、記事の「~フッターの背景色の指定もあわせて紹介します。」あたりまでの引用にとどめてもらえるとうれしいです。

>1年前の激重状態
書いてる途中でセーブしようと思ったら、突然メンテ画面になってて
書きかけの記事を失って唖然としたこともありました(笑
今では笑い話ですが当時は怒り心頭でしたね
by TAN (2007-11-26 00:50) 

うさぎりんご

申し訳ありません。修正しました。
こういうのって、全体載せるのどうなのかなと思ったんですけど、お聞きしてから書けばよかったですね、反省。大変失礼しました。
by うさぎりんご (2007-11-26 01:52) 

はれぴ

はじめまして!
うさぎりんごさんの所からとんできました。きょなと申します。
ヘッダーのデザインのスクリプトありがとうございます!!凄く嬉しいです!!助かりました。ありがとうございました。
by はれぴ (2007-11-28 02:19) 

TAN

きょなさん、コメントありがとうございます[ニコニコ]
昨日ちょうど改良バージョンに差し替えたところなので、
動きがおかしいところとかあったら気軽に教えて頂けると助かります。
by TAN (2007-11-28 20:49) 

ma-ku

はじめまして。。。
ヘッダーの改造方法を公開していただき有難うございました。
すっきりしました。
by ma-ku (2007-11-29 01:41) 

おじゃまします。
こういうのを待っていました。
早速というか、理解できたら使わせてもらおうかなと思ってます。
教えてくれてありがとうございます。
by (2007-11-29 20:55) 

TAN

ma-kuさん、カイト(^^)さんコメントありがとうございます[ニコニコ]

>ma-kuさん
表示がおかしいところとかあったら気軽に教えて頂けると助かります。

>カイト(^^)さん
設置で分からないところがあったら気軽に聞いてくださいね。
by TAN (2007-11-29 21:05) 

★★ユリリン★★

(^コ^)(^ン^)(^ニ^)(^チ^)(^ワ^)

とても参考にさせていただきました 記事の中で紹介させていただいたのでご報告いたします<m(__)m>
by ★★ユリリン★★ (2007-12-26 15:54) 

TAN

★★ユリリン★★さんコメントありがとうございます[ニコニコ]
もし動きがおかしいところとかあったら気軽に教えて頂けると助かります。
by TAN (2007-12-26 20:35) 

sknys

ヘッダ文字の「折り返しなしの右寄せ」がCSSで出来ました!
ログアウト状態で折り返さないように最小横幅を指定しています。

.sbMenuR{float:right; min-width:139px}
.sbHeader ul{white-space:nowrap}

TANさんも試してみてね^^
〈猫にも出来るワイド・ヘッダ攻略〉を修正しました。
by sknys (2008-02-09 20:36) 

TAN

sknysさん情報ありがとうございます[ニコニコ]
あとでさっそく試してみます。

そういえば、今月末のシステムリニューアルで
HTMLもユーザ編集できるようになるみたいですね。
どんな感じになるのかちょっと楽しみです。
by TAN (2008-02-10 21:46) 

ムーちゃん

こんにちは。このスクリプト、使わせていただきました(´ω`)
なかなかいいですね。元々用意してあるスキンならともかく、カスタムスキン組にはイヤなヘッダーですからね;;
by ムーちゃん (2008-04-27 11:11) 

TAN

ムーちゃん(さん)こんにちは。
こういうのって最初から標準オプションで用意しといてほしいですよね。
by TAN (2008-04-28 23:24) 

ムーちゃん

そうですね^^;
幅もそうだけど、バーの色を自由に変えられたらいいですね。#******みたいに・・・・・
by ムーちゃん (2008-04-29 18:18) 

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 3

トラックバックの受付は締め切りました

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





customizeBlog2(); //]]>