ブログのテーマを『TwentySeventeen』に変更しました

パソコンを新しく買ったことをキッカケに、ブログのリニューアルに取り掛かっています。

リニューアルといってもデザインをちょこちょこっと変えるだけです。
そしてオリジナルテーマはハードルが高いので、いつものように既存のテーマをカスタマイズすることに。

使用したのは公式テーマの『Twenty Seventeen』です。

公式テーマを使うわけ

前回使っていたのが『Twenty Fifteen』でしたので、二回続けて公式テーマを選んでいます。

今は無料でも高性能で、かつ日本人向けに作られたテーマもたくさんありますよね。知ってます。

STINGER、Simplicity、Cocoon、Lion Blog、SANGO……などなど。
どれもとっても魅力的。

でも人気であるがゆえに、人と被りやすい。かと言って、誰も知らないような個性的なデザインを採用してみれば、とにかくクセが強すぎてカスタマイズがしにくいのです。

公式テーマも公式であるがゆえに人と被りやすいのですが、何故か私の観測範囲内ではそんなに使っている人がいません。

特に今回のテーマはヘッダーメディアにどんな画像を用意するかで、差別化しやすいかな……と目論んで採用しました。

せっかく新しくカメラを買ったので、写真をもっと派手に使えるようなテーマにしたいと思っていたことも選んだ理由のひとつです。

デザイン部分がわりかしプレーンで、カスタマイズしやすくかつ写真が目立つもの……と選んでいくと、むしろTwentySeventeen以外考えられません。

カスタマイズしたこと

ヘッダーメディアの画像

……ということで、サイトの顔とも言うべきヘッダーメディアです。
ホームページを横長の画面で見ると一面に表示されてドキリとしてしまいます。

とりあえず去年から撮りためていた景色の写真をランダムで表示されるようにしてみました。

面白いのでいろんな画像を使いたいのですが、仕組みを理解していないのでひょっとして全部の画像が読み込みされていたらトンデモなく重くなってしまうな……と、とりあえず数枚のみ選んで表示させています。

なんとなく『四季』っぽいもので絞り込みしましたが、そのうち気分転換にテーマを決めて差し替えていこうと思います。

北海道っぽい景色とか、お気に入りの文具とか。
これでまた一つカメラを使う理由ができてワクワクしています♪

Googleフォントによるロゴデザイン

サイトのタイトルはGoogleフォントの『Fascinate』で可愛く。

いいですよね。Googleフォント。
シンプルなものからオシャレなものからポップなものまで揃ってて。

最初は筆記体でオシャレっぽいものを使おうかと思っていたのですが、可読性を重視してこちらに落ち着きました。

配色

参考にしたのは『デザインを学ぶすべての人に贈る、配色アイデア見本101選【2018年保存版】 – PhotoshopVIP』というエントリーから以下のパレットを採用。

#1e94a0
#004e6d
#fec0c1
#dc2543

全体のバランスを見て、ターコイズカラーは少しだけ明度を上げ『#23aebd』に変更しました。

#23aebd
#004e6d
#fec0c1
#dc2543

明度を何段階か上げたり下げたりするのには『0to255』を、よく利用しています。

0to255 – A color tool for finding lighter and darker colors based on any color

見出しデザイン

見出しはCSSデザインをコピペしたりとフォントアイコンを使ったり。

エントリータイトル

ずっと各エントリータイトルに使っている吹き出しデザインなのですが、何年も前にどこかのブログを参考にCSSをコピペして利用していまして。

これを機会に紹介し直そうと思ったのですが、元ネタを見つけられませんでした。

前回から引き続き、配色だけを変えて改めて使わせてもらっています。

コードのメモは別サイトへ → tbd — 吹き出しCSSデザイン

<h2> </h2> から <h6> </h6>

H2とH3

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選を参考に、『途中で色の変わる線』と『両端に線を伸ばす』を使わせてもらっています。

それぞれ配色を変え、H2との差別化のために、H3はブロックレベルをインラインにしています。

H4~H6

あまり派手にはならないよう、『FontAwesome』を利用してアイコンで装飾しました。

個人的には、今回カスタマイズした見出しデザインの中でH4が一番のお気に入りです。

サイドバーのウィジェットタイトル

ウィジェットのタイトルは、可読性とかあまり気にしなくていいので、少し派手めにしています。

使わせてもらったのはCSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版というブログエントリーの中の『色が途中で切り替わる見出し』という項目です。

そのほか細かいところ

全体のボックスサイズ調整

パソコンなど横長の画面で表示していると、メインコンテンツとサイドバーが中央に寄ってる気がしたので、少しメインコンテンツの幅を広げてマージンを取りました。

今はもう殆どスマホから閲覧する人がほとんどなのですが、私がパソコンから見ていて気になるので調整しています。

AmazonへのリンクをAmazletに統一

Amazonアソシエイトリンクが『AmaQuick』と『Amazlet』で混在していてデザインが統一されていなかったため、簡潔な方の『Amazlet』に統一してリンクを貼り直しし、CSSも整えました。

ランキングを非表示に

『Amazlet』ではデフォルトでAmazon内での売上げランキングが表示されるようになっていたのですが、基本的に人気商品を紹介することが少ないので、毎回万単位のランクになっていました。

必要性を感じなかったので、CSSの『disply: none』で非表示にさせました。

ボタンにAmazonアイコンを表示させる

『Amazonで詳細を見る』という文字リンクも、目立つようにCSSボタン化させました。

ポイントは冒頭のAmazonアイコンです。

こちらも『FontAwesome』からアイコンを引っ張ってきているのですが、他のアイコンと書き方が違って表示されず、最初かなり手こずりました。

Amazonアイコンを利用する場合は、フォントファミリーを『Font Awesome 5 Brands』と指定しなければならないようです。

やろうかと思ったけれど、やっぱりやめたもの

『Topへ戻る』ボタン

他のサイトでよく見る『トップへ戻る』ボタンですが、どうやらjQueryを利用するのが一般的なようです。

そのためだけにjQueryを追加する気にもなれず、設置するのを見送りすることにしました。

jQueryを使わない方法もあるようなのですが、そこまでして必要あるものなのかもちょっと疑問です。
私自身、ネサフ中に使うことがほとんどないので。

そのうちエントリーやサイトのフッターにでも『トップに戻る』ボタンを設置すればいいのかな……という考えています。

シェアボタン

はてブやTwitter、Pocktなどへのシェアボタンですが、これもここ数年設置していません。

少しでもサイトを軽くして表示を早くさせた方が閲覧者のためになるのでは。と考えているためです。

きっとシェアする人はスマホの共有機能や、ブラウザの拡張を使って自分なりの方法を確立しているはずです。

今後の予定

フッターの作り込み

「ひとまず一段落」と区切りをつけてはいますが、フッターは背景色を指定したのみで、ほとんど手付かずです。

先述したトップへ戻るボタンの設置も含めて内容を検討し、ついでにもう少し何かしら遊びを加えたいと思います。

サイドバーにあるカテゴリやタグクラウドもフッターに移し、代わりに『GTDまとめ』とか『手帳関連まとめ』とかのページを作って常時見える形にしておこうかな…と考えています。

ファビコンの作り直し

だいぶ前のテーマに合わせて作ったファビコンをずっと使っています。

現状のサイトカラーと調和が取れておらず、ずっと気になっていたのでこれを機会に作り直したいです。

本当は何かしらのソフトを使ってゼロからお絵描きしたいのですが、Googleフォントを流用してお茶を濁すことになりそうな予感がします。

https化

やります。面白みがないので優先度低いのですが。

参考にしたリンク集