【初心者はてなブロガー必読！】はてなブログのスマホ画面にある余計なリンクを取るカスタマイズ
スポンサーリンク
はてなブログのスマホ画面には余計なリンクがある
はてなブログのPROにするまではスマホ画面を放置していたのですが改めて見て見ると色々気付ことがありました。その中でまず気になったのは、、
はてなブログ開発ブログ
週間はてなブログ
はてなブログトップ
この３つの公式ページへのリンクを取りたいな〜と思う事でした
一番下にある開発ブログへのリンクですね
これは私の他のメモブログのスマホプレビュー画面ですが、初心者の方にはどうやってこの部分を取っていいのかわからないですし、どう考えても自分のブログには不要でしたので消したい、でもどうすればいいのか分からない
なんとも位置的に間延びしますし読み終わった人が見る良い位置を陣取っているんですよね、なんで色々調べてみたら簡単に不要なリンクを削除したり余計な要素を消す事が出来るのが分かりました。難しそうに思えますがコピペだけで簡単に出来ますので邪魔だなと思う方は試してみるといいのではないかと思います
私の使ったコードは下記になります
<style type="text/css">
.touch-item-list { display: none; }
</style>
このコードを
はてなブログデザイン-スマホ-ヘッダーのhtml欄にコピペして挿入するだけでOKです
これで余計なリンクによる読者の離脱や関係ないサイトへの発リンクを防ぐ事が可能です。か、かんたんですよね??
はてなブログスマホ画面の不要な要素を削除するカスタマイズコード
その他にもこんなスマホ画面の要素を消すカスタマイズが可能です
基本的にはコピペでOKなのともし間違いがあればトップに貼ったコードを消せば良いだけなので便利に使えるのではないかと思います
<style type="text/css">
ここに下記の不要な要素を選んでコードを入れてください
</style>
はてなブログのアイコンとログインボタンの削除
#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; }
powerdbyはてなの削除
.footer { display: none; }
このコードをstyleのコードの間に挟み込んでコピペしてヘッダーに入れればすっきりした画面の作成が可能です
スマホの画面をコーディネートする事でより読んで欲しい記事を目にしてもらう事が出来る、アドセンスの挿入をする際にベストな場所を確保する事が出来る等のメリットがあると思います
いま調べ中なんですがスマホの画面に読者登録ボタンが見当たらないので
その辺をまた次のエントリーで書いていきたいと思います
☆おすすめの記事