What I see

なにを見て、どう思っているのか。

TOSHIKI KIDA

TOSHIKI KIDA
木田 俊樹

Let's meet somewhere in the world
kida-journal.hatenablog.com/


すべて非表示がシンプルでカッコイイ

スポンサーリンク

はてなブログのスマホのデザインを、すべて非表示にしてみたらカッコいいんじゃないか。結果から言うと、はてなブログの標準テンプレートのいらないものをすべて非表示にすると、驚くほどシンプルでカッコよく、読みやすくなりました。というわけで、早速手順です。

 

手順

(はてなProじゃないとそのcssをいじれないので注意)

ダッシュボード→デザインスマートフォンのアイコンをクリック詳細設定のレスポンシブデザインのチェックを外すヘッダのタイトル下の「スマートフォン用にHTMLを設定する」の下の枠に以下のコードをコピペするだけ。

 

<style type="text/css">

/* ヘッダーの非表示 */
#globalheader-container {
display:none;
}

/* ブログタイトル、ブログの説明は表示しています(コメントアウト)。非表示にしたい場合は、コメントを消してください */
/* #header {
display:none;
}

#blog-title{
display:none;
}


#blog-description {
display:none;
}*/


/* アイコンの非表示 */
.header-blog-icon {
display: none;
}

/* プロフィールの非表示 */
.hatena-module.profile {
display: none;
}

/* <記事を書く><記事の管理>の非表示 */
.footer-action-wrapper{
display:none;
}

/* はてなブログを始めよう等の非表示 */
.touch-item-list{
display:none;
}

/* 検索ボックスのの非表示 */
.search-box{
display:none;
}

/* 注目記事の非表示 */
.hatena-module-entries-access-ranking {
display: none;
}

/* Powered byを非表示 */
.footer {
display: none;
}

/* フッターの非表示 */
#footer-menu {
display: none;
}
</style>

 

 

参考

Yukihyさんのこの図ではてなブログのhtmlの構成図を把握できました。この図を見ながら、どんどん消していきましょう。

 

 

 

ヘッダー

左:変更前 右:変更後

 

f:id:toshikida:20160903200210j:plain

 

f:id:toshikida:20160903200159j:plain

 

 

フッター

左:変更前 右:変更後

 

f:id:toshikida:20160903200207j:plain

 

f:id:toshikida:20160903200158j:plain

 

 

 

はてなでブログをはじめてから、気になるデザインのテンプレートをいろいろ試しました。特にスマホ。はてなの標準テンプレートも、レスポンシブル対応のものも、満足のいくものがありませんでした。それで、ちょっとの間、tumblerでカッコイイデザインのテンプレートを探しに行って、ちょっとこころを動かされていました。tumblerって魅力的なデザインがいっぱいあるんですよね。

 

でもtumblerってスクラップブックなのでぐちゃぐちゃになってしまいます。僕は、ちゃんと整理したいので、ブログのほうがよくて、それでなんとかならないかと調べたら、はてなproで、cssを使えば自分でスマホのデザインを変えられるとわかり、自分好みの、満足のいくものに、できました。そんなに難しくありません。コピペだけで大丈夫。

 

ブログは内容ありきなのはもちろんだけど、やっぱり、思った通りのデザインじゃないと、自分で読み返しても読みにくいですよね。いまは、デスクトップよりスマホでサイトを見る機会が多い(だって持ち運びが便利だし起動も早い)から、スマホで読みやすいデザインってものすごく大事です。