きゅうりの王様

日々の日常の生活から役立つ情報をまとめた知恵袋ブログを目指す

【スポンサーリンク】

はてなブログ コードを使用したスマートフォン表示の不要な項目の削除方法

有料会員のはてなブログproあることが前提。

はてなブログのスマホ表示で必要のない要素、項目がある。
はてなブログproでプログラミングを使用して削除することにした。

以下のサイトを参考にさせてもらいました。

www.mataro1.com

CSSでのコード編集方法

編集方法はいかのとおり。

デザイン→スマートフォン→ヘッダ→タイトル下
タイトル下にコードを追加

f:id:cucumberking231:20170331141314j:plain

f:id:cucumberking231:20170331141444j:plain

  1. 最上部のはてなブログアイコンボタンとログインボタンの削除
  2. ブログタイトル上の丸いアイコンの削除
  3. ブログタイトル下の説明文の削除
  4. はてなブログ勧誘・記事を書く・記事の管理の削除
  5. はてなブログ開発ブログなどへのリンク削除
  6. プロフィール削除
  7. 注目記事削除
  8. ダッシュボードなどの削除
  9. powered by hat enabling の削除

以下を で囲む

<style type="text/css">

 /*1.最上部のはてなブログアイコンボタンとログインボタンの削除*/
#globalheader-container {
display: none;
}

/*2.ブログタイトル上の丸いアイコンの削除*/
.header-blog-icon {
display: none;
}

/*3.ブログタイトル下の説明文の削除*/
#blog-description {
display: none;
}

/*4.はてなブログ勧誘・記事を書く・記事の管理の削除*/
.footer-action-wrapper {
display: none;
}

/*5.はてなブログ開発ブログなどへのリンク削除*/
.touch-item-list { display: none; }

/*6.プロフィール削除*/
.profile {
display: none;
}

/*7.注目記事削除*/
.hatena-module-entries-access-ranking {
display: none;
}

/*8.ダッシュボードなどの削除*/
#footer-menu {
display: none;
}

/*9.powered by hat enabling の削除*/
.footer {
display: none;
}

</style>

上記のコードのうち必要なものだけ使用して、削除したくない要素は削除しやすいように記載しました。

f:id:cucumberking231:20170331142005j:plain

f:id:cucumberking231:20170331142025j:plain

こんな感じで削除しました。
ブログ上部の丸いアイコンや説明文は削除せずに残しています。

まとめ

厳密に言うと、今回のコードを使用した削除ではなく非表示にするというのが正しい言い方かなと思います。

はてなブログのテーマは人気の「DUDE」を使用している。
どのテーマでも活用できる。

不要な部分を消すことができ非常に参考になりました。

参考
はてなブログのスマートフォン表示から不要な要素を削除する方法 - またろぐ