テーマの CSS カスタマイズに挑戦
最初からあるテーマも、インターネットでダウンロードできるテーマも、すべて使い勝手が悪いです。
英語が前提で作られているからかもしれません。
CSS の知識があれば、テーマのリデザインをできます。
ここでは、自分で CSS で見た目を変更していきます。
テーマを CSS カスタマイズして、リデザインできます
カスタム CSS を編集すれば、元のテーマファイルを改造せずに見た目を変更できます。
- テーマによっては、Master Style で色の指定が簡単にできます
- 左側にあるサイドメニューにある Code > CSS から多少デザインの手直しができます
- カスタム CSS という種類のものなので、元のテーマの CSS を修正せずにすみます。
- プレビュー状態の時に、右クリックして Inspect Element を選択すると、CSS の ID やクラス名が分かって便利です
- HTML 上でダブルクリックすると、コピペができます
メモ
ThemeFlood というサイトで無料で入手した Rapidweaver テーマの Minalicious をベースに少しづつ自分用にリデザインするためのメモ
このテーマは BootStrap で作られているのだから、Bootstrap のやり方でテーマデザインを変更できるに違いない。まずは、ボタンを設置することからやってみる。Bootstrap の実地を含めた学習にもなるので良いと思う。
現在の Bootstrap が v4.0.0-alpha.6 なのに対して、このテーマは alpha.5 を採用している。
FontAwesome も含まれているので、アイコンも自由に使えるということだ。
テーマ自体は人様の作ったデータなので、タグ構造がよく分からない。なので、Web Developer Tool を使うべきだ。そうすれば、その要素が何という名前なのか一目瞭然なので、あっという間に分かるはず。
Google Chrome にも Web Developer という拡張機能があった。