ストームトゥルーパーは作ったかい？
去年の８月に始めたブログだったが、年末にカテゴリを整理しようと一回カテゴリをリセットしようとして、誤って記事を全て削除してしまって再開したこのブログ。
文字通り気持ち新たに、ブログも刷新したのである。
いい機会だとも思ったので、様々な方のカスタマイズ方法を参考にしながらブログをカスタマイズすることにした。今回はどこをカスタマイズしたのか、まとめておきたい。 *1
はてなブログのテーマ
当初は公式テーマであるEpicを利用していたが、Pro会員にならずスマホのデザイン（見出しとか）を変更できないかなーと思っていたので、レスポンシブのテーマにすることにした。
そこで選択したのが、このMaterial。オシャレで素敵！
2カラムにした
Materialの作成者でもあるウェブ学さんの記事を参考に、２カラムにした。
フォントを変更した
フォントの変更方法もMarterialに記載されてある。ちなみに、私はNoto Sans CJK JPにした。ゴシックな見た目なのに、文章でも読み易い好きなフォントだ。
html,
body {
font-family:'Noto Sans CJK JP';
}
TOPページ
いつも参考にしているゆきひーさんの記事を参考にし、下記の２点を反映させた。
- 一覧時のフッターを非表示
- 「続きを読む」のボタンの大きさを変更
各記事
各記事のカスタマイズはゆきひーさんの記事をがっつり参考にした。本当に感謝しかない。
見出し
「hタグ css デザイン」と検索すればたくさん出てくるのだけれど、はてなブログということもあり、ゆきひーさん一択。めちゃわかりやすい。後述するが、関連記事の見出し部分は少々自分でいじってみた
SNSボタン
WordPressを使うときはSNS Count Cacheというプラグインに頼りっぱなしだったのでどうしようと思ったのだが、分かりやすかった。Twitterについてもcount.jsoonを利用した。
本当はjqueryをフッタに置きたかったのだが、うまく作動しなかったので、ゆきひーさんに質問してみるとすぐに返してくれた。はてな独自の変数があるからということらしい。
このコードが記事下でしか動かない理由は、実は今開いている記事のURLやタイトル名を取得するときに、はてなブログでしか使えない変数として、{Permalink}{Title}などを使っています。これが「記事上」「記事下」の部分でのみ使えるのでといった感じです。
http://staff.hatenablog.com/entry/2014/12/24/130250本当はjQueryなどはフッターなどに入れたいですよね。
ちなみに、記事上のSNSボタンはPC時もスマホ時もLINEを非表示にしている。理由としてはLINEはコミュニケーションツールとしての側面が高いため、タイトルを読んだだけでシェアする人は少数だろうと仮説を立てた。
TwitterやFacebook、はてなは自己ブランディングの側面や行列の店に並んでしまう理論が強く働くため、むしろ記事上の設置は重要だと思う。
フォローボタン
自分でInstagramを追加したり、ちょっとだけいじった。サイドバーにも設置した。
関連記事
そのままコピペした。
面識もない私がここまで持ち上げるのも気持ち悪く思われるかもしれないが、ゆきひーさん最強だと思う。本当に感謝です。（IDコールがたくさん入ってたら、申し訳ないです。）
その他に変更したもの
CSSのデザインだけではなく、使えそうなブログパーツをいくつか実装したり、ルールを変えたりもしたので紹介する。
Embedly
こういうやつ。
以前より読ませていただいている寝ログさんの記事を参考にして、Chrome拡張のCreate Linkを活用している。
なお、毎回スクリプトファイルを貼り付けるのは読み込み的に良くないと思ったので、フッターに下記の１行を追加している。
<script src="//cdn.embedly.com/widgets/platform.js"></script>
SnapWidget
こりのろっささんの記事を参考にして、サイドバーに設置した。簡単にできるのでオススメ。
ただソースを見てみるとSnapWidgetのGAタグが埋め込まれているのを見つけたので、嫌な人はやめたほうがいいかもしれない。
カエレバ・ヨメレバ
初めてWordPressを触った日に参考にしていたサイトが、ちゅんこさんの主婦ライフ。はてなブログにもコピペで出来ると思う。こんな感じ。
文末表現を「です・ます調」から変更
（急に色合いが変わった）
「です・ます調」のほうが個人的には書きやすいのだが、レパートリーが少ないし、読み手としてリズム感がよくないと感じたので、文末表現を変えた。「だ・である」調を意識して書いている。
本を読むときこの表現のほうが読み進めやすいなと感じたから実践している。（´-`）.｡oO（文章上手くなりたい）
編集や文章の本を何冊か購入して読んだので、別記事で紹介もしたい。
今後やってみたいこと・修正したいこと
修正したいもの、実装したいもの、それぞれ１つずつある。
注目記事のモジュールの修正
サイドバーにある注目記事モジュールなのだが、なぜか１記事しか表示されない。アクセス順に５つ出るように設定しているはずなのに……
原因がわからない（もしくは単にアクセスが皆無なだけか計測期間上のズレなのか）ので、一旦は様子を見るが、ご存知の人がいれば教えて欲しい（切実）
イベトラの設置
内部リンククリックと外部リンククリックの測定に、イベントトラッキングを使おうと思ってjQueryをコピペしたのだが、まるっきし作動しなかった……
jQueryを勉強して解決するものなのか、もしくはGoogle Tag Managerを使えばできそうなので試してみたい。*2
下記は当初参考にしたページなので、紹介しておきたい。
まとめ
みなさんのおかげでこのブログがあると再認識。本当にありがとうございます。
あくまでもアウトプットの場として個人ブログを始めた身なので、他の方に有益かどうか考えて書いているわけではないけれど、皆さんからいただいた情報や優しさの恩返しとして、次の人に何か少しでも与えられる人になれるように意識も変えていければと思います。
*1:ちなみに私のリテはWordPressをちょこっとカスタマイズして簡単なサイトを作れる程度である。（過去に作成したLEATHER ROOM）HTML、CSSはある程度問題なく使えるレベルと思って欲しい。
*2:タグマネの計測タグは<body>直下が理想なので、[デザイン] - [カスタマイズ] - [ヘッダ] - [タイトル下]に設置すれば問題ないと思う。