はてなブログの仕組みもだいぶわかってきたので、見た目と利便性の向上を兼ねていくらかカスタマイズを行いました。
だいぶ落ち着いたので備忘録も兼ねて第一弾としてまとめておくことにします。
基本的にここに設定している内容は、「電磁波に撃たれて眠りたい！」と「BE MY 平米」の両方に設定しています。
解析系ツールの導入
アクセス解析と検索トラフィックの設定を後からやるのも面倒だったので、立ち上げを機にとりあえず設定しました。このへんのサイトを参考にさせてもらってます。
Google Analytics
- Google Analyticsに行って新しいアカウントを登録。ここでいうアカウントはgoogleのアカウントではないので、ブログの種類ごとにアカウントを分けるといいかも。
- アカウントの下に新しいプロパティを作成。ここでいうプロパティが１つのブログに相当します。
- ウェブサイトの名前（適当）、ウエブサイトのURL(ブログのトップURL)、タイムゾーンを日本に設定して「トラッキングIDの取得」を押す
- 表示されたページが下部に勝手にスクロールしてしまうので、上部に移動し「トラッキングID」をコピーする
- ブログの管理ページに行き、「設定」→「詳細設定」→「解析ツール」→「Google Anaytics埋め込み」に上記トラッキングIDを貼り付けて保存
Google Search Console(旧ウェブマスターツール)
- Search Console Home(https://www.google.com/webmasters/tools/home?hl=ja&authuser=0)に行き「プロパティを追加」を押す
- 表示されたダイアログの「管理するプロパティのURLを入力してください」の下にブログのURLを入力して「続行」を押す
- Search Consoleの所有権確認で「別の方法」タブを選び、「HTMLタグ」を選択して「確認」を押す。
- 表示されたmetaタグの中からダブルクォーテーションの中だけ（下記でいうXXXXXXの部分）をコピー。ブラウザでやろうとするとうまくいかないので、メモ帳などに全体をコピーしてから一部をコピーしなおすといい。
<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXX" />
- ブログに戻って「設定」→「詳細設定」→「解析ツール」→「Google Search Console(旧Googleウェブマスターツール)」の下のテキストボックスに、上でコピーした文字列を貼り付けて「変更する」を押す
- Search Consoleに戻り、「クロール」→「サイトマップ」→「サイトマップの追加/テスト」を押して「sitemap_index.xml」と「sitemap_index.xml」の両方を追加する。ページを更新して両方とも追加されていれば成功
まだ引っ越したばかりなのでいまはあんまり活躍してませんが、期待していた記事はPVが上がらず、逆に ノーマークだった超ニッチな情報のページにアクセスが集中していて面白いですね。 今後、個人のSNSや別のブログとのつながりを強めてきたときに威力を発揮しそうです。
テーマの選定
いろいろ調べまくったのですが、結局「Innocent」と「DUDE」の２つにしました。
このあたりは完全に好みだとは思いますが、僕は２カラムレイアウトが好きなのでどちらも採用。走り出しなので今後も変えていく可能性はあります。
ブログエントリからはてなIDを完全に消す
実は、はてなにブログを立てるときにIDの文字入力を間違えてしまい、なんと「mamohacy」ではなく「mamoahcy」にしてしまいました。。。。
このまだとSEO的にも微妙ですし、そもそも混乱の元になりそうだったので、ブログに表示されているすべてのはてなIDを消すことにしました。
上記設定を入れることで、
- PC版 → 記事下
- スマホ版 → ブログヘッダ/フッタ、記事下、ブログ下部のプロフィール
これら全部が完全に削除されます。ちなみにはてなProに契約していない状態でこれをやると怒られるらしいのでフリーで運用している人は注意してください。
ちなみに、僕の場合はPC版のプロフィールページをサイドバーに出しているので、そこに本来のハンドルネームをあえて記載してあります。
フォローボタンをカスタマイズ
PC版のプロフィール欄の下とスマホ版の下部に、各SNSのプロフィールページに飛ぶボタンを設置します。
↓これです
下記ページを参考に設定しました。手順が結構手間（というよりCSSを置く場所がちょっとわかりにくい）なので良く読んだほうがいいです。
シェアボタンをカスタマイズ
はてなのシェアボタンは統一感もなくバラバラででダサいので同様にシェアボタンもカスタマイズします。
↓これです
下記ページを参考に設定しました。こちらも手順がやや分かりにくいで良く読んで作業してください。
使い勝手が向上の同時に、ブログ全体のデザインに統一感が出ました。 デザインはまだまだの部分があるので時間ができたらもうちょっと作り込むと思います。
