読者です 読者をやめる 読者になる 読者になる

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

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

はてなブログ はてなブログ-カスタマイズ

f:id:kminebg1110:20160507210018j:plain

このたび、「はてなブログ」にて、とあることをテーマとして「ミニ特化型ブログ(特化型ブログの更にテーマを絞り込んだもの)」を開設するべく準備中です。

ブログのテーマなどはともかく、準備中にあらためて感じた「はてなブログ・スマホサイト」のイマイチなところは、以下の2点です。

  • デザインがイマイチ。余分なものが多い。
  • 何もカスタマイズしていないデフォルト状態にもかかわらず、読み込みが遅すぎ。

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

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

 

スポンサーリンク

 

 

はてなブログ・スマホ版で非表示にした項目など

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

 

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

 

追尾ヘッダーの非表示

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