2010/10/09 Blogger 上のメニュー(Navbar)をカスタマイズ

 

Blogger の海外フォーラムや海外記事を彷徨(さまよ)ってた所、

 

Blogger の固定メニューと言える Navbar は、各ユーザー権限で

 

自由自在に制御できることがわかりました。それを紹介している記事

は古かったので、Blogger を使い込んでいる人には常識かもしれません( ´д｀)

 

 

上の Blogger メニューを削除すれば、

 

全ての画面を自分のコンテンツのみ存在させられるので、

 

真の意味で "完全に広告なし" とも言えそうです。企業で導入を検討されてる方に

は最適かもしれません。

 

 

通常カスタマイズで出来る事は、

 

上記の６種類から選択することにより、外観を変更する事ができます。

 

これに関しては「デザイン」→「ページ要素」と辿り、ドラッグ＆ドロップで

移動できる画面での一番上の「編集」で変更可能です。

 

 

移動させたり、消したりする方法は CSS を追加 する必要があります。

 

A. 削除してみよう！

 

こちらの記事を参考にしました。

 

http://www.bloggerbuster.com/2007/07/how-to-hide-blogger-nav-bar.html

 

Go to Template>Edit HTML in your Blogger dashboard and first back-up your template to ensure you can restore it if you make unwanted mistakes! Next, find this line in the template: </b:skin> Just before this line, insert the following lines of code: #navbar-iframe { height:0px; visibility:hidden; display:none } A. ダッシュボードから 「デザイン」→「HTML編集」に進む。    バックアップは取っておいてね。   B. Ctrl+F を押して </b:skin> で検索   C. 見つかった行の前に空白行を挿入して、上記の青文字コードを    コピ＆ペーストする

 

CSS がわからない人向けに説明すると、

 

Blogger の上メニューの ID である navber-iframe に対して、

 

・高さを 0 にし、

・非表示モードに移行し、

・オブジェクトとしての存在も消す。

 

ということです。

 

なお海外では、テンプレートによって B手順

 

  <b:skin> が見つからない！

 

との報告があったので、その場合は

 

#footer

 

で検索してみてください。見つかったら、直前にエンターキーで改行を行い、

コードをコピ＆ペーストすればＯＫです。

 

 

本方法で削除した人の中で ログインリンクは必要！と言う方は

 

HTML/Javascript ガジェットを使い、お好みの位置に設置しておくと良いかも。

  

◆ログインのコード(下記コードをコピーすることで使えます )

 

<a href="http://www.blogger.com/" title="Blogger にログイン">ログイン</a>

 

 

B. 移動させてみよう！

 

CSS を弄れると言う事は、自由に移動も可能です。

 

当サイトでも(一時的に)移動させていました。現在は非表示にしてます。

 

本方法は以下のように行います。サイトによっては不必要なタグも入ってます。

 

#navbar-iframe {
   position: absolute;
   left: 0;
   top: 120px;
   z-index: 1000;
}

 

上記では、絶対座標として画面上から 120px の位置に navbar を移動させてます。

 

画面の下( スクロールは含まれない )から表示するには以下のようにします。

 

#navbar-iframe {
   position: absolute;
   left: 0; 
   bottom: 10px;
   z-index: 1000;
}

 

あまりオススメ出来ませんが、チカラ技を駆使することにより navbar を

画面最下部に持ってくることも出来ます。そのブログ限定のコードで。

 

各自、top:120px の数字を弄って調整して遊んでみてください。

 

◆クーポンサイト「グルリザ」新規会員募集中！