浪費家ナッツです。おはようございます。
私事ですが、ついに「はてなブログPro」に移行しました。今後やっていきたいことがたくさんあるのですが、まずはすぐに行った３つのことをまとめておこうと思います。
1.キーワードリンクの無効設定
キーワードリンクとは
はてなブログのキーワードリンクは、下図のように私たちが書いた記事のキーワードに自動でリンクが貼られる機能です。少量であれば我慢もできるのですが、同一キーワードでも全てにリンクが貼られるので、うざったくもあります。
※一部わかりやすさのため赤線でマーキングしています
変更前)
変更後)
設定方法
キーワードリンクを外す方法です。まず、設定画面を開きます。
設定画面で、詳細設定タブを選択します。中程にあるキーワードリンクから「記事にキーワードリンクを付与しない」にチェックを入れます。
過去の記事は勝手に修正されない
はてなブログProに移行して、キーワードリンクの設定も変更した。これですっきり！と思い自分のブログを確認すると、まだキーワードリンクが残っている。なんで～と思いヘルプを確認すると・・・。
既に公開している記事では、再編集するとキーワードリンクが表示されなくなります。
つまり公開済みの記事はひとつひとつ再編集が必要です。再編集は「記事の管理→編集→更新する」でできます。これを済ませてやっとキーワードリンクが表示されなくなります。既に90記事は書いていますが、ひとつひとつ直せと・・・。
キーワードリンクを非表示にする裏技
実はこのキーワードリンクをCSSやJavaScriptで非表示にする方法もあります。本記事ではこの方法は省略します。この方法あれば、はてなブログProに移行する必要もありません。ただデメリットもあるようですのでご注意を。
広告を非表示に変更
はてなブログの広告とは
無料版のはてなブログでは、記事の最後に勝手に広告が入ります。塗りつぶしているので分かりづらくなっていますが、「広告」の部分です。この部分もうざったいので消去しました。折角はてなブログProに移行したんだしね。自分で設置しているのであればともかく。
設定方法
設定画面を開く
設定画面で、詳細設定タブを選択。中程にある広告を非表示から「はてなによる広告を表示しない」にチェックを入れます。
変更後イメージ
スマホサイトの不要な項目を削除
無料版のスマホサイトは色々なものが表示されていてうざったいですよね。ブログが読まれるようになってくるとスマホからもユーザが増えてきます。再訪してもらうためにもスマホサイトもすっきりさせておきましょう。
今回の変更はメニューを選んで変更するのではなく、スタイルシートを記載して非表示にする方法で行います。それぞれ部品毎に紹介していきますので、コピペすれば同じカスタマイズができると思います。
スタイルを記載する場所
デザイン画面を開く
スマートフォン→ヘッダ→タイトル下のテキストエリアに記載します。
ヘッダ部分の修正
左側が初期状態です。これを変更して右側のように変更します。
 |
 |
(1)のヘッダ(Hatena Blog部分)を非表示にします。
#globalheader-container {display:none;}
#container {padding-top:20px;}
</style>
(2)の○アイコン(青地のナ部分)の非表示
.header-blog-icon {display: none;}
</style>
プロフィールを非表示にする
左側が初期状態です。これを変更して右側のように変更します。
 |
 |
(3)プロフィールを非表示にする
.hatena-module.profile {display: none;}
</style>
フッタ部分の修正
左側が初期状態です。「記事を書く」の上に注目記事の1～5が置かれています。これを右側のように変更します。削りすぎて差が分かりづらくなっていますが、注目記事以下の表示をことごとく非表示にしています。
 |
 |
(4)記事を書く～を非表示にする
.footer-action-wrapper{display:none;}
</style>
(5) はてなブログ開発ブログ～を非表示にする
.touch-item-list{display:none;}
</style>
(6) Powered By～を非表示にする
.footer {display: none;}
</style>
(7)ダッシュボード～を非表示にする
#footer-menu {display: none;}
</style>
全部のせ
最後に今回紹介したスマホサイトの設定変更をまとめたスタイルシートを紹介します。
/* =======================
ヘッダ関連のコントロール
Line1:Hatena Blogヘッダを消去
Line2:タイトル上部の余白調整
Line3:円形アイコンを消去
======================= */
#globalheader-container {display:none;}
#container {padding-top:20px;}
.header-blog-icon {display: none;}
/* =======================
プロフィール
Line1:非表示
======================= */
.hatena-module.profile {display: none;}
/* =======================
フッタ関連
Line1:記事を書くを消去
Line2:はてなブログ開発ブログを消去
Line3:Powered Byを消去
Line4:ダッシュボード～を消去
======================= */
.footer-action-wrapper{display:none;}
.touch-item-list{display:none;}
.footer {display: none;}
#footer-menu {display: none;}
</style>
まとめ
「はてなPro」に変更後に行いたいことは、まだまだたくさんあります。ただ、今回はすぐにできること、余分な箇所の非表示設定を中心に変更しました。
これだけでもかなり満足感が高まると思います。
例えば、ブログヘッダ画像部分
例えば、グローバルナビ設置
例えば、独自ドメイン
それぞれの画面をここで直接紹介して良いか分からないのでTOPページへのリンクだけですが、各ページを見ていただくと分かるように皆さんすっごく凝ってらっしゃる。
シンプルなスタイルでいくのもすっきりしていて好きなので、今の設定になっています。でも、カスタマイズしてチラ見しただけでも記憶に残るようなページにもあこがれがあります。
最終的にどういう形に落ち着くのか分かりませんが、少しずつカスタマイズしていきたいと思っています。
関連記事
はてなブログでは、公式のデザインテーマの他に有志の方が提供してくださる使いやすいテーマが数多くあります。新テーマ導入のポイントを紹介。
独自ドメインが取得できる会社が多くありますが、初回の値段だけに惑わされると後から後悔するかもしれません。チェックポイントを紹介。
はてなブログで独自ドメインでのhttps対応がやっとできるようになりました。設定自体は凄く簡単なのですが、チェックポイントは多いです。私が躓いた箇所を中心に紹介しています。