浪費家ナッツの投資日記

浪費家によるインデックス投資の積立・高配当米国ETF・高配当国内株の運用日記です

はてなブログProに移行したら実行したい3つのこと

スポンサーリンク

f:id:mixnats:20171007224915j:plain

浪費家ナッツです。おはようございます。

 

私事ですが、ついに「はてなブログPro」に移行しました。今後やっていきたいことがたくさんあるのですが、まずはすぐに行った3つのことをまとめておこうと思います。

 

 

 

1.キーワードリンクの無効設定

キーワードリンクとは

はてなブログのキーワードリンクは、下図のように私たちが書いた記事のキーワードに自動でリンクが貼られる機能です。少量であれば我慢もできるのですが、同一キーワードでも全てにリンクが貼られるので、うざったくもあります。

※一部わかりやすさのため赤線でマーキングしています

 

変更前)
f:id:mixnats:20171014211751p:plain

 

変更後)
f:id:mixnats:20171014211811p:plain

 

設定方法

キーワードリンクを外す方法です。まず、設定画面を開きます。

f:id:mixnats:20171014212124p:plain

 

設定画面で、詳細設定タブを選択します。中程にあるキーワードリンクから「記事にキーワードリンクを付与しない」にチェックを入れます。

f:id:mixnats:20171014212148p:plain

 

過去の記事は勝手に修正されない

はてなブログProに移行して、キーワードリンクの設定も変更した。これですっきり!と思い自分のブログを確認すると、まだキーワードリンクが残っている。なんで~と思いヘルプを確認すると・・・。

 

f:id:mixnats:20171014212627p:plain

 引用:http://help.hatenablog.com/entry/config/detail

 

既に公開している記事では、再編集するとキーワードリンクが表示されなくなります。

 

つまり公開済みの記事はひとつひとつ再編集が必要です。再編集は「記事の管理→編集→更新する」でできます。これを済ませてやっとキーワードリンクが表示されなくなります。既に90記事は書いていますが、ひとつひとつ直せと・・・。

 

キーワードリンクを非表示にする裏技

実はこのキーワードリンクをCSSやJavaScriptで非表示にする方法もあります。本記事ではこの方法は省略します。この方法あれば、はてなブログProに移行する必要もありません。ただデメリットもあるようですのでご注意を。

 

 

 

広告を非表示に変更

はてなブログの広告とは

無料版のはてなブログでは、記事の最後に勝手に広告が入ります。塗りつぶしているので分かりづらくなっていますが、「広告」の部分です。この部分もうざったいので消去しました。折角はてなブログProに移行したんだしね。自分で設置しているのであればともかく。

f:id:mixnats:20171014212939p:plain

 

設定方法

設定画面を開く

f:id:mixnats:20171014213148p:plain

 

設定画面で、詳細設定タブを選択。中程にある広告を非表示から「はてなによる広告を表示しない」にチェックを入れます。

f:id:mixnats:20171014213205p:plain

 

変更後イメージ

f:id:mixnats:20171014213334p:plain

 

 

スマホサイトの不要な項目を削除

無料版のスマホサイトは色々なものが表示されていてうざったいですよね。ブログが読まれるようになってくるとスマホからもユーザが増えてきます。再訪してもらうためにもスマホサイトもすっきりさせておきましょう。

 

 

今回の変更はメニューを選んで変更するのではなく、スタイルシートを記載して非表示にする方法で行います。それぞれ部品毎に紹介していきますので、コピペすれば同じカスタマイズができると思います。

 

 

スタイルを記載する場所

デザイン画面を開く

f:id:mixnats:20171014213717p:plain

 

スマートフォン→ヘッダ→タイトル下のテキストエリアに記載します。

f:id:mixnats:20171014213741p:plain

 

 

ヘッダ部分の修正

左側が初期状態です。これを変更して右側のように変更します。

f:id:mixnats:20171014214924p:plain f:id:mixnats:20171014214122p:plain

 

(1)のヘッダ(Hatena Blog部分)を非表示にします。

<style type="text/css">
#globalheader-container {display:none;}
#container {padding-top:20px;}
</style>

 

(2)の○アイコン(青地のナ部分)の非表示

<style type="text/css">
.header-blog-icon {display: none;}
</style>

 

f:id:mixnats:20171014214058p:plain

 

 

プロフィールを非表示にする

左側が初期状態です。これを変更して右側のように変更します。

f:id:mixnats:20171014215137p:plain f:id:mixnats:20171014215159p:plain

 

 

(3)プロフィールを非表示にする

<style type="text/css">
.hatena-module.profile {display: none;}
</style>

 

f:id:mixnats:20171014215302p:plain

 

 

フッタ部分の修正

左側が初期状態です。「記事を書く」の上に注目記事の1~5が置かれています。これを右側のように変更します。削りすぎて差が分かりづらくなっていますが、注目記事以下の表示をことごとく非表示にしています。

f:id:mixnats:20171014215544p:plain f:id:mixnats:20171014215644p:plain

 

(4)記事を書く~を非表示にする

<style type="text/css">
.footer-action-wrapper{display:none;}
</style>

 

(5) はてなブログ開発ブログ~を非表示にする

<style type="text/css">
.touch-item-list{display:none;}
</style>

 

(6) Powered By~を非表示にする

<style type="text/css">
.footer {display: none;}
</style>

 

(7)ダッシュボード~を非表示にする

<style type="text/css">
#footer-menu {display: none;}
</style>

 

f:id:mixnats:20171014215747p:plain

 

 

全部のせ

最後に今回紹介したスマホサイトの設定変更をまとめたスタイルシートを紹介します。

<style type="text/css">
/* =======================
     ヘッダ関連のコントロール
     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」に変更後に行いたいことは、まだまだたくさんあります。ただ、今回はすぐにできること、余分な箇所の非表示設定を中心に変更しました。

 

これだけでもかなり満足感が高まると思います。

 

例えば、ブログヘッダ画像部分

www.nych87.com

www.mitove2.com

 

例えば、グローバルナビ設置

www.americakabu.com

www.c55hero.com

 

 

 

例えば、独自ドメイン

 

それぞれの画面をここで直接紹介して良いか分からないのでTOPページへのリンクだけですが、各ページを見ていただくと分かるように皆さんすっごく凝ってらっしゃる。

 

シンプルなスタイルでいくのもすっきりしていて好きなので、今の設定になっています。でも、カスタマイズしてチラ見しただけでも記憶に残るようなページにもあこがれがあります。

 

最終的にどういう形に落ち着くのか分かりませんが、少しずつカスタマイズしていきたいと思っています。

 

 

 

関連記事

はてなブログでは、公式のデザインテーマの他に有志の方が提供してくださる使いやすいテーマが数多くあります。新テーマ導入のポイントを紹介。

www.mixnats.com

 

 

独自ドメインが取得できる会社が多くありますが、初回の値段だけに惑わされると後から後悔するかもしれません。チェックポイントを紹介。

www.mixnats.com

 

 

はてなブログで独自ドメインでのhttps対応がやっとできるようになりました。設定自体は凄く簡単なのですが、チェックポイントは多いです。私が躓いた箇所を中心に紹介しています。

www.mixnats.com