はてなブログのカスタマイズについて
簡単なWebサイトやWordPressなどいじった人間でないとすごく使いづらい
こんばんは、フリーランスのMKTです。今日ははてなブログを始めて一週間程度の僕が、はてなブログのUIや使い勝手について個人的な感想を綴っていきたいと思います。
まずテンプレートをインストールして、ヘッダーを変えたり更新を続けていた訳ですが、とにかく見辛い。現状の課題としては以下のものがあると思います。
現状の課題
- アイキャッチ画像が設定されていない
- サイドバーがバラバラ
- Twitterウィジェットを表示したい
- アナリティクスを導入したい
- Google Search コンソールを導入したい
- 拡散力がない（SNSシェアボタンがつけれていない）
基本的なところですが、既存のブログをカスタマイズする際にはある程度の制約がありますので、本日少し引っかかった点をいくつかご紹介致します。
- アイキャッチ画像→記事管理から編集することができました。
-
サイドバーがバラバラ→UXから考えると見る順番が上からどんなものかペルソナ設定することによってだいたい予測できますよね？それがまだ設定されていなかったので、とりあえずは入れ替えてみました。あとは装飾がないとやはり気づかれにくいしわかりづらいので、CSSは急ごうと思います。
で自分のTwitterIDを入力し、ウィジェットを構築してサイドバーへ入力することによってタイムラインが表示されます。
・Google Analytics 埋め込み
GAのサイトへ行き、グローバル サイトタグ（gtag.js）を発行後、取得したトラッキングIDを設定画面へ貼り付けます。
グローバルサイトタグは「設定」→「詳細設定」→「検索エンジン最適化」→「
headに要素を追加」で行います。
webをやっていた人間からしてみると勘違いしやすいのが、このデザイン設定にある「ヘッダ」の部分。ここはbody内の<header>部分という認識で作業していいかと思われます。SNS拡散ボタンなどを表示するスクリプトを書くのはここです。
-
Google Search コンソールを導入したい
サイトの確認には上記のGAの設定がhead内にされていれば、非同期でトラッキングコードを取得し、無事サイトが登録されると思います。
-
SNSシェアボタンを導入したい
SNSシェアボタンの設置は、webのことを知らない人からしてみれば少し敷居の高いところかと思われます。
実際に動かすスクリプトは<head>内でもいいのですが、表示は<body>内に設置しなければ表示されません。あれ？と思われた方はChromeなどブラウザのデベロッパーツールを利用し、どこに表示がされているのかを確認すれば一目瞭然かと思われます。
---
5/3更新
便利なSNSシェアボタン作成サービスを発見しました！
AddThis
---
以上、本日ははてなブログのカスタマイズについてお伝えしました！次回は引き続き装飾関連や解析の部分についても記事を書いていこうと思います。
↓↓↓↓↓
お役に立てましたら、FBやTwitter等で当記事を拡散していただければ幸いです。
