D@imaclogはWordPressで運用しています。テーマは最近リリースされたCocoonというものを使用しています。
無料のテーマでたくさんの機能がついているこのテーマにとてもお世話になっています。
ただ、自分の個性をサイトに出すために、CSSをいじったりしていますので、今回はその話をしたいと思います。特に難しい話ではありません。
ただ、CSS以外にもjsファイルを修正しているところもありますので、その辺も説明したいと思います。
色について
見出しの修正などをするにあたっては、webで使用する色のコードを調べないといけません。
コードはwebを調べれば結構たくさん載っているのですが、ちょっと個性的な色を使用したいなと言うことで、面白い色のコードが表示されているサイトを調べてみるとありました。それがこちら。
https://www.colordic.org/w/
このサイトは、日本の色をコードにして一覧化されています。どういった色があるのかをまず探すのにはとてもよいサイトだと思います。
http://nipponcolors.com
色見本として使用するサイトではありません。サイト全体としてどういった見え方がするのかを調べるためにはこのサイトが良いと思います。
サイト一杯に色が出てきますので、サイトがどんな感じで見えるのかを知るにはこのサイトが良いと思います。
https://ateitexe.com/kasane/
日本の色を重ねる方法に襲色目（かさねいろめ）というものがあるそうです。
襲の色目(かさねのいろめ)は四季折々の変化をその様相の比喩表現によって色彩として感じ取ってきた日本人が作り上げてきた配色法です。
この配色方法はもともと袷仕立て(あわせしたて)された衣服の表地と裏地の配色で平安時代に公家の服飾の中から生まれ、以後、公家の人々の服飾に欠かせないものとして近代まで伝えらました。
日本の染織の中でも特に服飾に見られる最も大きな特徴は、快適さを求めて四季に応じた生地や仕立ての選択が行われているだけでなく、美意識の反映として、それぞれの季節にふさわしい色や模様が選ばれ使用されてきたことにあります。
これは日本が地理的に温帯に属し、気候が四季を持っていることに起因していることに加え、日本人が季節に伴って身の回りで生じる自然の移り変わりを敏感に感じ取っていたからだと考えられます。
季節に応じた服飾のもっとも代表的なものが、誰もが良く知っている平安時代に生まれた女性の「十二単」です。
日本の色の配色を知るうえではこちらのサイトが良いかと思います。
H2とH3の見出しを変える
やはり最初のカスタマイズは、見出しのレイアウトを変更します。
見出しのタグは、.post h2と.post h3というタグを使って変更をしています。
単にh2,h3のタグを使用したら良いのではないかという意見もあると思いますが、このCocoonでは、h2やh3のタグは色々なところで使用されています。
記事内の見出しには、.postというクラスを使用しているので、そのルールに則りました。
ちなみに変更したコードは、こちらになります。Githubのgistのサービスを使用しています。
h2の見出しを変更するCSS
最初の文字を大きくして、下線入れました。下線の色は、緋（アケ）、コードは#CC543Aを使用しています。
AMPで表示されたサイトではgistのJavascriptは表示されませんので、こちらのリンクをクリックしてご参照ください。
h3の見出しを変更するCSS
文字をセンターにして、文字の真ん中に一本のラインを引きました。ラインは真ん中から端になるに連れて消えていくような表示にしています。
AMPで表示されたサイトではgistのJavascriptは表示されませんので、こちらのリンクをクリックしてご参照ください。
サイドバーの見出しのレイアウト変更
サイドバーの見出しも定義されています。
タグは、.sidebar h3です。
サイドバーの見出しの文字の下に、矢印線を付けました。色は緋です。
AMPで表示されたサイトではgistのJavascriptは表示されませんので、こちらのリンクをクリックしてご参照ください。
引用箇所のレイアウトについて
引用箇所は明確に分けてきたかったので、引用箇所もちょっとレイアウトを変更しました。
下地は桜（#FEDFE1）という色を使っています。ポイントで緋（#CC543A）を使い、マークはFontAwesomeを使っています。
ontAwesomeの使い方はこちらのサイトがとてもわかり易いので参考にされてはどうでしょうか。
https://saruwakakun.com/html-css/basic/font-awesome
AMPで表示されたサイトではgistのJavascriptは表示されませんので、こちらのリンクをクリックしてご参照ください。
目次のレイアウトについて
Concoonは標準の機能として目次表示があります。hタグをもとに自動で目次を作ってくるんです。プラグインとしては、Table of Contents Plusがありますが、この簡易版がCocoonに組み込まれているのです。
ただ、これだけだとちょっと味気ないですので、修正をしています。
目次のタイトルにFontAwesomのアイコン
目次のタイトルだけではちょっと味気なかったので、タイトルの左側にFontAwesomeにあるアイコンを入れています。
我ながらうまく行っていると思いますので、ぜひコピペでどうぞ。
AMPで表示されたサイトではgistのJavascriptは表示されませんので、こちらのリンクをクリックしてご参照ください。
目次で表示・非表示をつける
目次を表示させたり、表示させなかったりするJavascriptがあるそうなんで、それを追記しています。
ファイルは、javascript.jsです。場所はテーマフォルダの直下にあります。
AMPで表示されたサイトではgistのJavascriptは表示されませんので、こちらのリンクをクリックしてご参照ください。
もう少し色々と弄りたい
まだまだ変えることができる箇所はあると思います。
ただシンプルさは残しておきたいので、できるだけ大きな変更はせず、Cocoonの良いところをうまく、利用していきたいと思います。
また何かCSSのカスタマイズをした時にはこのブログでお伝えしたいと思います。
コメント