はてなブログのスマートフォンのデザインから不要な要素を削除する方法

まず、初めにはてなブログPROの有料会員である必要があります。中には無料会員でも消せるものがあるかもしれません。

はてなブログのスマートフォン表示では必要のない情報が結構表示されています。そのため、今回紹介する方法を実践すれば、不要な要素を消すことができます。

今回は以下の要素を削除する方法についてご説明します。

最上部のログインリンク
ブログアイコン
はてなブログ勧誘、記事を書く、サインイン
はてなブログ開発ブログなどへのリンク
最下部ダッシュボード
Powered by HatenaBlog.

編集方法

デザイン→スマートフォン→ヘッダ→タイトル下
の順でクリックし、タイトル下にコードを追加

または、記事の記事上に追加

また、追加するコードはタイトル下のhtml編集欄にstyleタグで囲んで記述する必要があります。

<style type="text/css">

</style>

f:id:mataro1:20150218191740j:plain

f:id:mataro1:20150219233242j:plain

それでは以下で追加するコードを紹介します。

最上部のはてなブログアイコンとログインボタンの削除

#globalheader-container {
display: none;
}

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

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

ブログタイトル下のブログ説明の削除

#blog-description {
display: none;
}

はてなブログ勧誘・記事を書く・記事の管理の削除

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

はてなブログ開発ブログなどへのリンクの削除

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

その他の削除

プロフィールの削除

.profile {
display: none;
}

注目記事の削除

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

最下部ダッシュボードなどの削除

#footer-menu {
display: none;
}

Powered by Hatena Blog.の削除

.footer {
display: none;
}

まとめ

よく分からないと言う方や読むのが面倒だと言う方は以下にあるコードをスマートフォンデザインのヘッダのタイトル下にコピペして下さい。

最上部のログインリンク
ブログアイコン
はてなブログ勧誘、記事を書く、サインイン
はてなブログ開発ブログなどへのリンク
最下部ダッシュボード
Powered by HatenaBlog.

以上6つを削除するコードです。

<style type="text/css">
#globalheader-container {
display: none;
}
.header-blog-icon {
display: none;
}
#blog-description {
display: none;
}
.footer-action-wrapper {
display: none;
}
.touch-item-list {
display: none;
}
#footer-menu {
display: none;
}
.footer {
display: none;
}
</style>