スマホ表示の中身を全部消す！styleの変更で挑戦！

style

色々と試している最中です。
CSSでstyleを変えつつ。
あ、でもCSSではなくてstyleタグで宣言するだけでしたか(^^;

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

こんな感じで記事本文に書くとどうなるんでしょうね？
パソコン表示だと影響なくて、スマホ表示でだけ影響があるはずなのですが・・・。

追記

パソコン表示だとこんな感じ。

本文の部分が消えています(^^;

スマホ表示だとこんな感じ。

見事に真っ白けっけ(^_^)v
よし！コレで狙った通り！

あ、で上記のスタイルを本文に書いたままだと誰もこの記事を読めなくなってしまうので、除外しておきます(^^;

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

はてなブログの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>

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

JavaScriptのlocation.replace()関数を使ってみる

はてなブログ

はてなブログでJavaScriptの「location.replace()」関数を利用できない物かと思い、テスト用の記事になります。

下記はボタンにJavaScriptを紐づけたテスト。

load

この記事を今後も何度か更新しますが、あまりお気になさらずに(^^;

追記

おぉ！loadボタン押してみたら、メインブログの「マネー報道」にジャンプしました！
しかもブラウザの戻るボタンで戻れない！
これ良い感じですね！

更に追記

「DOMContentLoadedイベント」を使うと画像読み込み前に処理が出来るみたいです(^-^)w
参考にさせて頂いたのは下記サイト。

[JavaScript] onloadイベントより早いタイミングで実行されるDOMContentLoadedイベント - YoheiM .NET

例えば下記の様な感じを記事本文に書いても実行されました♪

<script type="text/javascript" language="javascript">
window.addEventListener("DOMContentLoaded", function(){
  location.replace('http://moneyreport.hatenablog.com/')
}, false);
</script>

ただ先頭ページにこの記事があるので、すぐさまメインブログに飛ばされてしまい、このブログがまともに表示できない事態に(>_<)
なので取りあえずソース表示に切り替えました(^^;

これにCSSのスタイルをいじって、ブログヘッダーとかを記事個別に消したりって出来るものでしょうかね？

追記CSS

下記のCSSも記事本文に足せば画面真っ白のままで別のページに飛ばすことが出来ました！

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

#blog-title {
    display:none;
}

#wrapper,#box2{
    display:none;
}

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

後は、スマホ表示ページのスタイルも非表示にすればPC＆スマホどちらでも可能になります！