先日のこと。ブログテーマを、こどみすさん(id:codomisu)のMinimalismに変更しました。初のレスポンシブテーマでまだまだ慣れません(;^_^A
今までのPCとモバイルを別にしたカスタマイズからいくつか変更しましたので、以前のテーマ時からずっと使用させて頂いているもの等も併せ、記録と共にご紹介。
ナビゲーションメニュー
まずはナビゲーションメニュー（メニューバー、グローバルメニューとも言う？）を設置。これはこどみすさんがMinimalism用として公開してくださっているものを。
（上記テーマの紹介リンク内に設置方法の説明あり）
ただ、メニューの前のアイコンは変更。私の投稿カテゴリに合ったアイコンがないものもあったので、統一することにしました。
そして真っ白で色が淋しかったので、アイコンのみ着色。ちょっとしたフォーカルポイントになるかなという狙いもあり。
▼こんな感じになりました。
投稿日・最終更新日
投稿日のアイコンも変更。個人的には、カレンダーよりペンの方が「書いた日」という印象があるので。
そして以前と同様に、最終更新日の表示も。コード使わせて頂いたのはコチラ。
スマホで見た時だけ文字サイズが違っており、何とかしたい。でもレスポンシブだとどこをいじればいいのかイマイチわからず、今は放置しています（・・；）そのうちどのcssを変えればいいのか確認してみよう。
▼こんな感じになりました。
TOPへ戻るボタン
これも以前からずっと設置しています＾＾
▼こんな感じになりました。
引用デザイン
引用デザインも変更。しっかり区別が付くようにしたかったのと、記事内にメリハリを持たせたいので。
▼こんな感じになりました。
リストデザイン
リストデザインも変更しました。そのままだと、枠がない状態で数字がついたり「・」がつく程度で、区別がつきにくかったので。
▼こんな感じになりました。
追記：2017.8.10
このリストデザインのカスタマイズ方法では、他の箇所に影響が出ることがわかり、現在は使用しておりません。
使用しているブログテーマによって影響の有無が変わると思いますので、ご確認をお忘れなく！
目次デザイン
デフォでちゃんと「目次」の文字も入るのですが、前述したリストデザインの変更をしたら、同じ「ol」を使用する中見出しまでリストデザインが適用されてしまうという思いがけない状態になってしまった。
苦肉の策として、中見出しの表示を消すことで、ボックスの中にボックスが表示されるという状態をまぬがれました。
▼こんな感じになりました。
ヨメレバ・カエレバ
こちらも以前からお世話になっています。スッキリしたデザインで重宝しています！
▼こんな感じになりました。
シェアボタン
今回、シェアボタンのデザインをいろいろ探していたら、こんなのを発見！
▷ブログにお洒落なシェアボタンを簡単に設置できる「Add this」を紹介するよ – MUTANT
一度コードを貼り付けてしまえば、どれだけデザイン変更をしても再貼り付けの必要がないという手軽さ！！そこに惹かれて使用してみることにしました。
MUTANTさんの記事内で詳細な設置方法が記載されていますので、興味ある方はぜひ！
カラー設定も、ボタンの形もクリックひとつで変更可能。個人的にはモノクロ（モノトーン）カラーでボタンが作れるのがポイント高いです。
また、シェアされた数などもマイページにログインすれば確認できるのが便利。
サイトはこちら
▷ AddThis – Get more likes, shares and follows with smart website tools
▼こんな感じになりました。
サイドバーのプロフィール
実はサイドバーに設置しているプロフィールは、デフォのモジュールではなく、HTMLのモジュールを使用して作成しました。参考ブログはこちら。
▼こんな感じになりました。
プライバシーポリシーを設置
多くのブログで拝見していたプライバシーポリシー。ほぼコピペさせていただいただけではありますが、当ブログでも設置しています。
参考サイトはこちら。
▼こんな感じになりました。
Googleアドセンス
漫画系の広告をブロック
気持ち悪い漫画サイトの広告（漫画サイト自体は気持ち悪くないのに、アドセンスで出てくる広告は気持ち悪い）をブロックしました。
以降、自分のブログを見るときに、それらが表示されることはなくなりました。
参考ブログはコチラ。
自動挿入＆ダブルレクタングルをPCとスマホで表示数を変更
なんと！2つもの目的を達するすごいコードを公開されている方が！！
今までも自動挿入を使用してきましたが、レスポンシブデザインにしたため、スマホ表示の際にダブルレクタングルのまま表示されると規約違反。その対策として導入。簡単に設定できて素敵すぎます。
記事本文直下に設置＆ダブルレクタングルをPCとスマホで表示数を変更
次は自動ではなく固定の設置。
普通に記事下に設置すると記事下設置のシェアボタンや投稿者のID表示などの下になってしまうのです。そのため、記事本文の直下に入るように設定しました。
参考ブログはこちら。2つのコードを組み合わせた感じです。
ちなみに、シェアボタンもチップさんのコード内に突っ込んでいますので、投稿者のID表示よりも上に表示できています。すごいなぁ。
トップページをカード型レイアウトに
【2017.8.10追記】
ワードプレスなどでよく見る、カード型レイアウト。憧れでしたので、この機会を逃すまいと実装です。
はてなのデフォで一覧形式が開始されたことに伴い、CSSの追記だけで変更できるとのことで、本当に本当に、コピペ一発で変わったので感動です。
Font Awesomeのアイコンを検索できる
【2017.8.10追記】
今回のカスタマイズではFont Awesomeのアイコンにお世話になっているわけですが、公式サイトで目当てのアイコンを探すのは大変でした。
そんなとき発見したのがこちら。
日本語で検索できるし、逆に、Unicodeはわかるのに名称がわからないときも、非常に重宝します！
はてなブックマークで実装したカスタマイズをまとめた
後々わかるように、実装したカスタマイズ記事と、いつか使えそうなカスタマイズ記事のブクマは、タグを分けています。
具体的には、
- 実装したカスタマイズ記事のタグ ⇒ ★ブログカスタマイズ
- いつか使えそうなカスタマイズ記事のタグ ⇒ ブログカスタマイズ
といった程度の区別。
ちなみに、今回紹介しているのはここにまとめてあります。
さいごに
先人たちがこうやって様々なコードや手順を公開してくださるので、こんなど素人でもそれなりな見栄えのブログをデザインすることができます。本当に感謝しかありません。
全くの素人ではありますが、こうやって公開されていない部分の微調整をしたい場合もあります。そんな時はテーマのcssを見て、どこをいじればいいのか確認しながらやってます。
CSSは、作る人によって組み立て方が違っていたりして、見てみるとなかなか面白いです＾＾（内容はちんぷんかんぷんですけどね）
