Googleの検索窓に「navbar」と入力していくと、検索クエリの候補としてnavbarやnavbar bloggerのほかに、navbar 消す、navbar 隠すなどが出る。以前はRemove、非表示なども上位に並んでいた。それら非表示化に関するものに、ざっと目を通してまとめてみる。
navbarを消すには、bloggerにログインした後、レイアウトタブ内のHTMLの編集で行う。 ここのテンプレートの編集枠内を書き換える。この内容はテンプレートであって、記事公開時には、いくつかの変換、追記などされる。たとえば、 <b:skin> は <style……> に、 <![CDATA[ は <!-- に、 ]]> は --> に変わる。外部スタイルシートファイルへのリンクなども埋め込まれる。
ここでnavbarに関する記述を探しても見当たらない。navbar記述はテンプレート内にはなく、これも公開時に<body>の直後に強制的に挿入される。したがって、それ自体を削除することはできない。
スタイルシートを使って、表示されないように仕組むことになる。
<head>～</head>の間がヘッダで、その中の<b:skin>以降の適当な場所へ、次のような記述をすると目的が達せられる。
検索でかかる記述例は２通り。
その1.
#navbar #Navbar1 iframe{
height:0px;
display:none;
visibility:hidden;
}
その2.
#navbar-iframe {
display: none !important;
}
その1.は、id='navbar'内のid='Navbar1'内のiframeタグに対して、「高さ０ピクセル」で「要素の表示はしない」で「要素は表示するがその内容は隠す」という意味のスタイルを設定している。意味が冗長なところは、部分的に対応していないブラウザがあった場合への保険か、もしくは単に思いが込められているのか。その2.は、id='navbar-iframe'に対して、「要素の表示はしない」で「最優先」というスタイルを設定している。
次に、適当なブログ記事のソースから、公開時に埋め込まれるnavbar関連記述を見てみる。
公開時には、テンプレートのヘッダの内容は、いったんstyleタグを閉じ、その後にlinkタグによる外部cssファイルへのリンクが埋め込まれる。さらに次のようなスタイル記述が追加される。このスタイル記述は、navbar-iframeというidに対して、「ブロック要素として表示せよ」という意味。先に挙げたその2.とかぶっている。
<style type="text/css">#navbar-iframe { display:block }
</style>
そして<body>～</body>で示されるボディの先頭には、以下のものが挿入される。（一部改変）
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'></div><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener("load", function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script><iframe src="....." ..... height="30px" ..... id="navbar-iframe" ..... > </iframe><div></div></div>
<div>により、範囲に対してidやclassが付けられて、タマネギの皮のような構造になっている。全体をnavbarというid、および、navbarというclass、sectionというclassでくくり、その中をNavbar1というid、widgetおよびNavbarというclassでくくり、さらにその中にscriptとiframeタグ、空のdivタグがある。iframeにはnavbar-iframeというidが振られている。
結局、その1.その2.ともに、記述は違えどiframeタグ部分に対して、「表示しない」ようなスタイルを設定している。
その1.のheightは、iframe内で再設定されているため意味がなくなる。タグ内で直に設定されるものが、最も優先順位が高いため。visibilityに関しては、直設定はないため有効ではある。これによって隠された場合には、表示スペースは確保されるので、30pxの背景空白が残る。displayの直設定もないので、これも有効。結局display:noneによって空白もなく非表示化されている。
その2.は、iframeタグに振られたidを直接指定し、display:noneによる非表示化のみを記述している。!importantは、「同レベルの優先度の設定があった場合には最優先とせよ」という意味。上述のとおり、navbar-iframeというidに対するスタイル設定が強制挿入されるため、それに打ち勝つために必要になる。
このようなことから、消すための記述は他にもいくつも考えられる。
その3.
#navbar{display:none}
一番外側のidに対してスタイルを設定する例。navbar関連の挿入されたものを根こそぎ丸ごと消してしまう方法。荒っぽい気もするが、実はこれが一番の正統派かもしれない。
その4.
.navbar{display:none}
一番外側のclassに対して設定する例。class='navbar section'は、ここのclassはnavbarでありsectionである、という意味。.navbarでなく.sectionとすることもできるが、sectionは他の場所にも使われているため、その部分まで消えてしまう。
また、idはページ内で一意である決まりなので、この部分にだけこれを設定したい、という場合にはclassよりidが適する。
その5.
#navbar{position:relative;top:-30px;}
表示はするものの、ウインドウの外へ追いやる例。縦幅の分30px上にずらしてみた。試しにこの記事内で設定してある。記述方法は後述。ずらすだけなので、30px分の微妙な空間が残る。表示はされているので、tabキーでフォーカスを移動させればアクセスもできる。
なお、スタイルシートには次のようなルールがある。
idを示す場合は頭に#（クロスハッチ）を、classを示す場合は頭に.（ドット）を、タグを示す場合は何も付加せずに記述する。要素を包含する場合は、スペースで区切って連続して記述する（例：その1.）。それ以外の部分には、適宜スペースや改行を含めてよい。各行末には;（セミコロン）を付加するが、最終行だけはなくてもよい。
あるタグに対して複数通りのスタイルが設定された場合、優先順位（タグ内>styleタグ>外部ファイル）に従って適用される。同じ優先順位であれば、!importantが付けられたものが優先される（例：その2.）。それがなければ、最後に設定されたものが使われる。
また、idとclassが共存するタグでは、idに対するスタイルが優先される。
styleは、本来はヘッダ内で設定することになっているらしい。実際のブラウザでは、body内で指定しても有効になる。
つまり記事内に以下のような記述をしておけば、その記事が表示される間だけはnavbarが表示されなくなる。たとえば4/1の記事はこの手法を使っている。この記事では、cssの部分をその5.に置き換えて記述してある。
なおcss記述は、非対応設定のブラウザで表示させないようコメントアウトしておく。
<style type='text/css'>
<!--
#navbar-iframe{display:none !important}
-->
</style>
ソースを眺めていると、ちょっと気になるところもある。
最後尾に埋め込まれたスクリプトに、navbarの文字が見える。内容は解らないが、もしかしたらこのあたりのidには触らない方がいいのかも。
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar'));
参考サイト：
全部まるごとスタイルシート
0 件のコメント:
コメントを投稿
.