はてなブログのCSS
ちょっと解析してきました!
Chromeブラウザの「要素を検証」機能を使って、はてなブログで使われているスタイルをチェックします。
色々な要素がありますがこの内、本文以外を消したいなと思ったりします。
要素的にはこんな感じ。
#globalheader-container
#blog-title
#content
#footer
これを消すには、displayやvisibilityを非表示に設定すれば良いのかな?
visibility:hiddenとdisplay:noneの違い
CSS - display:none と visibility:hidden の違い - Qiita
visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。
との事で、今回は何も表示させたくないので「display:none」の方が適切かな?
styleタグで囲えば有効になりますかね?
<style> #globalheader-container { display:none; } #blog-title { display:none; } </style>
試しに下記に書いてみました。(本文では見えませんが、ソース上書かれています)
そしたらば・・・
成功!
はてなブログツールバーとブログのヘッダー「Web言語のお勉強~ど素人が往く~」の部分が消えました!
これはいける!
あ、でもスマホで見てみたらまだヘッダーが残っていました(^_^;)
スマホ用のヘッダー要素も非表示にしないとダメですね(^_^;)
追記 PC表示すべてを非表示に!
下記のスタイルで全部消えました!
<style> #globalheader-container { display:none; } #blog-title { display:none; } #wrapper, #box2 { display:none; } #footer { display:none; } </style>
これを記事本文に書いちゃうと、この表記も見えなくなるのでやめておきます(^^;