この世の果てブログ

読む、観る、買う、行く、食う、寝る、遊ぶ、試す、記す、残す、愛でる、捨てる、生きる

【はてなブログカスタマイズ】デフォルトのスマートフォン表示から不要な要素を削除して、「はてな」っぽさをなくす

【Sponsored Link】

はてなブログのスマートフォン表示のカスタマイズ。

f:id:the-world-is-yours:20141119215743p:plain


俺が使用しているテーマ「Afterrain」はレスポンシブ対応ではないので、iPhone などのスマートフォンでの表示は、はてなブログ純正のものになる。で、このはてなブログ純正画面なのだが、あまり必要性を感じないリンクや装飾がかなりあるので、スタイルシートでじゃんじゃん消していった。基本的には消したい要素の displayプロパティの指定を【none】にして消す方法。要素の指定などで少し詰まった点があったので、記録として。


スマートフォン表示のスタイルシートの記述場所

【ダッシュボード】→【デザイン】→【スマートフォン】→【ヘッダ】の【タイトル下】に記述する。

f:id:the-world-is-yours:20141119215914p:plain

スタイルシートを以下のような styleタグで囲んで記述する。

<style type="text/css">

</style>


以下、消した要素を上から順に。

スクリーンショットは、はてなアカウントにログインした状態でのものなので、非ユーザーやログインしてない状態で表示される画面とは少し異なります。


最上部のはてなブログアイコンとダッシュボードリンク

ログインしてなければ、購読ボタンとサインアップ、ログインのリンクが表示されるが、いらん。

f:id:the-world-is-yours:20141119215952p:plain

以下の記述で消える。

#globalheader-container {
display: none;
}


ブログタイトル上の丸いアイコン

個人的には、いらん。

f:id:the-world-is-yours:20141119220024p:plain

以下の記述で消える。

.header-blog-icon {
display: none;
}


ブログの説明

スマートフォン版だとごちゃごちゃするし、自動で表示されるプロフィールモジュールにも同じ内容が表示されるので、いらん。

f:id:the-world-is-yours:20141119220112p:plain

以下の記述で消える。

#blog-description {
display: none;
}


記事下のはてなID と署名

このブログとはてなの ID を紐付けたくないので、いらん。

f:id:the-world-is-yours:20141119220135p:plain

以下の記述で消える。

.entry-footer-section {
display: none;
}


【記事を書く】【記事の管理】へのリンク

非ユーザーやログインしていな状態だと、はてなブログへのお誘いが表示されるが、これもいらん。

f:id:the-world-is-yours:20141119220207p:plain

以下の記述で消える。

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


はてな関連のリンク

はてなブログ開発ブログ・週刊はてなブログ・はてなブログトップへのリンクが表示されるが、わりとスペースをとるので、いらん。

f:id:the-world-is-yours:20141119220506p:plain

以下の記述で消える。

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


最下段の【ダッシュボード】【PC版】へのリンク

あっても邪魔になるものでもないし、目障りでもないのだが、ついでに消す。

f:id:the-world-is-yours:20141119220539p:plain

以下の記述で消える。

#footer-menu {
display: none;
}


はてなモジュール(プロフィール・検索・注目記事)

これらの要不要は個々人でかなりわかれると思うが、俺はブログのプロフィールに外部サービスを利用することにしたので、プロフィールモジュールを消した。このはてなモジュールの要素名の特定でかなり手こずってしまった。

f:id:the-world-is-yours:20141119220615p:plain

ソースを見ると【hatena-module profile】とあったので、以下のように記述してみたのだが、上手く行かず。

.hatena-module profile {
display: none;
}

で、あれこれ試したのだが、タイトルが残って本文だけが消えたり、タイトルが消えたけど必要なモジュールのタイトルも消えたりと、どうにもこうにも上手くいかずに詰まったのだが、結局以下の記述でプロフィールモジュールが丸ごときれいに消えてくれた。

.profile {
display: none;
}

ということで、俺は表示させているが、検索モジュールを消すなら以下。

.search-box {
display: none;
}

注目記事モジュールは以下。

.hatena-module-entries-access-ranking {
display: none;
}


はてなっぽい要素を排除した結果

f:id:the-world-is-yours:20141119220656p:plain
f:id:the-world-is-yours:20141119220720p:plain
f:id:the-world-is-yours:20141119220734p:plain

すっきり。満足。

スマートフォン表示のスタイルシートを変更できるのは、有料ユーザーに限られているようです。


一応、基本書というか参考書として以下のものを手元に置いておいた。Kindle版もある。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。