KsMemo

メインブログからブログ運営に関する記事のみを集めてきました

はてなブログ、スマホサイトの不要な項目を徹底的に非表示にしてみた

f:id:kminebg1110:20170521212816j:plain

はてなブログを始めた直後に感じた、スマホサイトのすっきりしないことは、余分なものが多いこと、そして何もカスタマイズしていないデフォルト状態にもかかわらず、読み込みが遅すぎるの2点です。

この2点を改善すべく、スマホサイトの「はてなブログっぽいところ」を徹底的に非表示にしてみました。

 なお、「はてなブログPro」の方向けの記事であることをご了承くださいませ。

スマホ版で非表示にした項目、非表示にする方法

まず、元の状態は以下の画像です。これでも利便性などはわるくないものの、他ブログと同じデザイン、読み込み遅すぎのため、可能な限り非表示にし、プロフィールなど必要なものは、別デザインで追加する方向性でいます。

 

f:id:kminebg1110:20160507183508j:plain f:id:kminebg1110:20160507183520j:plain

 

▼最終的に、「注目記事」以外の全てを非表示にしたものがこちら。

f:id:kminebg1110:20160507195522j:image

 

追尾ヘッダーの非表示

f:id:kminebg1110:20160507183508j:image

①のヘッダーは、以下のHTMLを「ダッシュボード・デザイン・スマホアイコン・フッタ」にコピペします。なお、これにより「読者になる」アイコンも消えてしまいますので留意ください。

 

 ▼当ブログでも①のヘッダーは非表示(読者になるアイコンも消えました)にしていますが、以下の記事の方法で、スマホサイトに「読者登録」のアイコンを追加しています。

 

 余白調整の「20px」の数値は、実際に画面を見ながらお好みで調整ください。

 

<style>

/* ヘッダー有無 */

#globalheader-container {

display:none;

}

/* 余白調整 */

#container {

padding-top:20px;

}

</style>

 

円形アイコン の非表示

②の円形アイコンは、以下のHTMLを「ダッシュボード・デザイン・スマホアイコン・ヘッダ・タイトル下」にコピペします。

 

<style type="text/css">

.header-blog-icon {

display: none;/*アイコンを消去*/

}

</style>

 

プロフィールの非表示

③のプロフィールを非表示とするためには、以下のHTMLを「ダッシュボード・スマホアイコン・ヘッダ・タイトル下」にコピペします。

 

<style tyle=text/css>

.hatena-module.profile {

display: none;

}

</style>

 

検索ボックス・各種リンクの非表示

検索ボックスはあってもよいかもしれませんが、「はてなブログ」のリンクは要らないですね。

f:id:kminebg1110:20160507183520j:plain

 

④を非表示にするには、以下のHTMLを「ダッシュボード・設定・詳細設定・headに要素を追加」にコピペします。

なお、「検索ボックス」を残す場合には、赤文字部分を削除ください。

 

<style>

.footer-action-wrapper{display:none;}

/*↑はてなブログを始めよう等の非表示*/

.touch-item-list{display:none;}

/*↑はてなブログ開発ブログ等のリンクの非表示*/

.search-box{display:none;}

/*↑検索ボックスのの非表示*/

</style>

 

フッタのPowerd byの非表示

⑤の「Powerd by」を非表示とするためには、以下のHTMLを「ダッシュボード・スマホアイコン・ヘッダ・タイトル下」にコピペします。

 

<style type="text/css"> .footer {
display: none;
/* Powered byを非表示 */
} </style>

 

最下部のダッシュボード関連の非表示

ここまでくると、最下部のダッシュボードも非表示にしたくなったので、消してみました。以下のHTMLを「ダッシュボード・スマホアイコン・ヘッダ・タイトル下」にコピペします。

 

▼このショートカットを利用したことがないので、要らないと判断。

f:id:kminebg1110:20160507195109j:image

 

<style type="text/css">

#footer-menu {

display: none;

}</style>

 

まとめ

以下の画像が完成版となります。記事もテスト記事のみのため、何もない状態で全く「はてなブログ」とはわからない状態です。これでカスマイズの素材ができました。

 がしかし、読み込みスピードは、非表示前と全く変わりません。このあたりが唯一「はてなブログ」らしいところです。

 なお、HTMLを「ダッシュボード・スマホアイコン・ヘッダ・タイトル下」など同じところに貼り付けるものは、最初の<style type="text/css">と最後の</style>を残し、全てをその間にコピペしても効果は同じです。

 

f:id:kminebg1110:20160507195522j:image