Kirakuzidaiのデザインについて

賛同する人がいるか否かはさておき、私はKirakuzidaiのデザインを気に入っています。そこで、今回は私がCSSでカスタムしていった機能を、ソースコードと共に紹介しようと思います。ちなみに、メインのテーマはWrite Proです。

かんたんリンク

もしもアフィリエイトの簡単リンクの装飾です。画像を非表示にしているのが１番のこだわりです。生活感がなくなって洗練された印象になります。

もしもアフィリエイトでコピーしたHTMLから品番を削除して、統一感を持たせる工夫もしています。

引用と箇条書き

地味ですが、引用と箇条書きにも装飾を入れています。箇条書きは冒頭に記載してあります。引用は下記の通りです。

Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。

Write WordPressテーマ

全体的に色が少ないデザインなので、引用と箇条書きの背景をグレーにすることで記事にリズムを与えています。

外部リンク

これが一番の力作です。外部リンクをボタンとして挿入するときは、もしもアフィリエイトのかんたんリンクをイメージしたボタンで挿入しています。

見ての通りかんたんリンクと全く同じデザインです。これにより統一感が生まれ、完成度が上がります。

まとめ

上記以外にもCSSで多くの装飾を入れていますが、Write Proでしか効かないものが多いのでこの辺にしておきます。CSSの知識は無いので、基本的にChromeの検証を使ってここまで完成させました。多少は時間がかかりますが、いじっているとどうにかなるのでみなさんもぜひ。