初心者がはてなブログProにアップグレード後に行ったPC・スマホ用カスタマイズ

はてなブログProにアップグレードしました。そして、過去から読んでいただいている皆様はすでにお気づきかもしれませんが、大幅にデザインをカスタマイズしました！

紆余曲折あって苦戦した、Proへのアップグレードまでの道のりはこちら。

さて、今回ははてなブログProにしてからカスタマイズした箇所をまとめ、実際に見た参照ページを記事としてまとめました。初心者の方で、Proにアップグレードした後にどんなカスタマイズをしようか？と考えている方の参考になれば幸いです。 

PCスマホ共通設定：広告・キーワードリンク設定など

設定＞詳細設定の以下３つにチェックを入れる。

・キーワードリンクを付与しない

・はてなによる広告を表示しない

・ヘッダとフッタを表示しない

スマホ：デザインを大幅に変更

一番やりたかったのがこれ。スマホからの閲覧が50%もあるのに、ここに手を入れずしてどこに手を入れるのか。という訳で、早速修正していきます。

行った設定は以下。

・ヘッダー画像のサイズを変更

これはMacの標準「プレビュー」機能で画像をトリミングしました。スマホではPC画像と同じだと面積が専有されてしまうため、バナー画像のサイズを小さくしました。

・記事一覧のデザインを変更

比較的最近書かれた記事のようです。男性っぽいイメージで、かつ色味が少し強めなので、カラーコード・線幅を調整してしろベースに修正しました。脱線しますが、このブログの筆者さん、はてなにAdsense貼ってないみたいだけど、どうやって収益２万円あげたんだろう・・？

ボタンに表示するアイコンは、こちらを参考にしました。アイコンWebフォントのコード対応表を記載されているため、非常にわかりやすく参照しやすかったです。

 

・「複合メニューバー」を導入する

こちらを参考にしました。ありがとうございます！

・シェアボタンのカスタマイズ

こちらを参考にしました。ありがとうございます！

こちらのコードでは、ブックマーク数の読み込みのクエリで時間がかかっていたようなので、そのコードを削除して表示しています。

楽しくなって熱中しすぎた結果、あっという間に５時間が経過していました・・・CSSをセレクタまで見て編集するのは、１年前に担当したWebサイトのお仕事以来です。仕事なら納期があるのでまだ良いのですが、愛着のある自分のブログだからこそ、時間を決めて編集しないとどんどん欲望が出てきてしまいますね。のめり込みすぎに注意して、カスタマイズを楽しんでください。

設定・カスタマイズ前後

 ちょっとまだごちゃごちゃしていますね。あと、はてなユーザでログインしているので、画面キャプチャ時に「編集」ボタンがタイトル右上に出てしまってます。頃合いをみて、また修正しようと思います。

今後追加で行おうと思っていること

今後やりたいことは以下です。

・あわせて読みたい　関連記事の表示ウィジェットの検討

・スマホ用トグル実装

初心者の方で、Proにアップグレードした後にどんなカスタマイズをしようか？と考えている方の参考になれば幸いです。