浪費家ナッツです。おはようございます。
私事ですが、ついに「はてなブログPro」に移行しました。今後やっていきたいことがたくさんあるのですが、まずはすぐに行った３つのことをまとめておこうと思います。
1.キーワードリンクの無効設定
キーワードリンクとは
はてなブログのキーワードリンクは、下図のように一部のキーワードに対して自動でリンクが貼られます。（一部わかりやすさのため赤線でマーキングしています）少量であれば我慢もできるのですが、同一キーワードでも全てにリンクが貼られるので、うざったくもあります。
変更前) 
変更後)
設定方法
設定画面を開く
設定画面で、詳細設定タブを選択。中程にあるキーワードリンクから「記事にキーワードリンクを付与しない」にチェックを入れます。
過去の記事は勝手に修正されない
はてなブログProに移行して、キーワードリンクの設定も変更した。これですっきり！と思い自分のブログを確認すると、まだキーワードリンクが残っている。なんで～と思いヘルプを確認すると・・・。
既に公開している記事では、再編集するとキーワードリンクが表示されなくなります。
つまり公開済みの記事はひとつひとつ、記事の管理→編集→更新することでキーワードリンクを外す必要があります。既に90記事は書いていますが、ひとつひとつ直せと・・・。
キーワードリンクをCSSやJavaScriptで非表示にする裏技
このキーワードリンクをCSSやJavaScriptで非表示にする方法があるようです。こちらであれば、はてなブログProに移行する必要もありません。ただデメリットもあるようですので、ご注意を。
広告を非表示に変更
はてなブログの広告とは
無料版のはてなブログでは、記事の最後に勝手に広告が入ります。塗りつぶしているので分かりづらくなっていますが、「広告」の部分です。この部分もうざったいので消去しました。折角はてなブログ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ページへのリンクだけですが、各ページを見ていただくと分かるように皆さんすっごく凝ってらっしゃる。
シンプルなスタイルでいくのもすっきりしていて好きなので、今の設定になっています。でも、カスタマイズしてチラ見しただけでも記憶に残るようなページにもあこがれがあります。
最終的にどういう形に落ち着くのか分かりませんが、少しずつカスタマイズしていきたいと思っています。
