Web言語のお勉強~ど素人が往く~

かつてVB6を1年くらい触った事があるだけのど素人がWeb言語に挑戦します。勉強結果を随時発表します。

記事内でCSSを指定してみる!


はてなブログのCSS

ちょっと解析してきました!

Chromeブラウザの「要素を検証」機能を使って、はてなブログで使われているスタイルをチェックします。

f:id:MoneyReport:20150529115752p:plain

色々な要素がありますがこの内、本文以外を消したいなと思ったりします。

要素的にはこんな感じ。

#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>

試しに下記に書いてみました。(本文では見えませんが、ソース上書かれています)

そしたらば・・・

f:id:MoneyReport:20150529120832p:plain

成功!
はてなブログツールバーとブログのヘッダー「Web言語のお勉強~ど素人が往く~」の部分が消えました!
これはいける!

あ、でもスマホで見てみたらまだヘッダーが残っていました(^_^;)
f:id:MoneyReport:20150529121344j:plain
スマホ用のヘッダー要素も非表示にしないとダメですね(^_^;)

追記 PC表示すべてを非表示に!

下記のスタイルで全部消えました!

<style>
#globalheader-container {
    display:none;
}

#blog-title {
    display:none;
}

#wrapper, #box2 {
    display:none;
}

#footer {
    display:none;
}
</style>

これを記事本文に書いちゃうと、この表記も見えなくなるのでやめておきます(^^;