テーマを変更する続きです。 [blogcard url=”https://kimigauchu.com/post-4401/”]
CSSの調整
フォント
英語圏でデザインされているので日本語フォントの調整は必要。
オサレ感出したいし、スマホが多いから明朝体でもいいのだけれど Windows7ユーザーの多さも考えてゴシックが良いかな。（テーマの基本フォントはゴシック体） 游ゴシックも嫌いじゃないけど個人的にMacではヒラギノ角ゴがいいので デザイン系やWebデザイナーからしたらダメかもしれないが、Windowsは游ゴシック、メイリオ順 Macはヒラギノ優先
.entry-content {
font-family:"游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, sans-serif;
font-size: 16px;
}
デフォルトは14pxだったのだけど、さすがに小さいので16に。よって見出しもそれに合わせて大きく（後述）
テーマカラーの選定
このテーマはデフォルトではモノトーンでそれでもよいのだが、差し色がほしい。 Pinterestなどで「color palette」で色の組み合わせ画像のようなものをクリップしまくっているので、そこから好みの物を探す Macの標準アプリにあるDegital Color Meterを起動。
目的の色の上でCommand+Shift+Cすると16進数がコピーされる アクセントカラー部分を置き換える
なお今回は外部CSSファイルは一から作り直した（ほぼコピペだけど）
見出しの調整
大の苦手の見出しレイアウト。
デフォでもいいかと思ったんだけど、H3がでかくてH2が小さかったのでH1～5まで一応調整しました。
見出しはこのサイトを参考にしました（見やすいサイトだ～）
[blogcard url=”https://saruwakakun.com/html-css/reference/h-design”]
プラグイン見直し
GenesisにはデフォルトでカラムCSSが組まれているので、カラムプラグインは不要です（GenesisCoulm）新しいサイトの方は最初からプラグインを入れてなかったのですが
[blogcard url=”http://www.webdesignersacademy.com/genesis-column-classes/”]
ついでなのでこちらのサイトも修正
Genesisを使う前は普通のテーマを使っていましたので、カラム（要するにコンテンツの横並び）
こういうやつ。
を、いちいちタグ打ちするのがめんどうなのでWP Canvas(現Shortcodes by Angie)を使っていました。 タブとか作れて便利ですが、実際のところカラムしか使ってません
結構な数あったので、Seach Regexを使ってショートコード部分を全部置換しました。
WP SVG Icons
[blogcard url=”https://www.evan-herman.com/wp-svg-icons-pro/examples/”]
アイコンフォントぐらいプラグインなくてもできると思ってウェブフォント読み込み＋AddQuicktagでやっていましたが 結局のところ使いたいアイコン名を調べて挿入するのがクッソ面倒なのでほぼ使ってませんでした。 リソースの無駄なのでいっそのことプラグインに頼ることに。 FontAwesomeプラグインもあるんですけど、ショートコードで色と数が指定できるこちらのプラグインにしました。 これも、両方のサイトで使うことにしました。
ショートコードのオプション要素が覚えやすく使いやすいです。color repeat size
[wp-svg-icons icon="lightning" wrap="i" color="#F2EFE1" repeat="3" size="3em"]
