月別: 2015年11月

wordpressのテーマ「Twenty Fifteen」はデフォルトではサイトが真っ白になりますね
前回、見出しに装飾を加えたのでついでにサイトカラーもかえましょう
これはCSSをさわることなくダッシュボードから簡単にできます

外観－カスタマイズ で以下の設定画面が出てきます。

ここでは、テーマの変更のほか、
・サイト基本情報
・色
・ヘッダー画像
・背景画像
・メニュー
・ウィジェット
が設定できます

サイトカラーを変更するために「色」を選択します

ベース配色で6色の中から選択することができます
背景色
ヘッダー・サイドバーテキスト色
ヘッダー・サイドバー背景色
で色を変更できますので、自分好みに調節しましょう

最後に保存して終了になります。
サイトカラーを変更するだけでサイトのイメージが変わってきますね

wordpressのテーマ「Twenty Fifteen」では
記事の見出し（h1.h2.h3…など）はなにも装飾されていませんよね

少しさみしいのでかんたんなデザインで装飾します

twentyfifteenでは「entry-content」と「comment-content」を指定します。
entry-contentだけでは表示されませんでしたのでご注意を！

h1はタイトルで使っているので見出しには使えません。
ここではh2からh4までの見出しを装飾します。

まずはh2です
左と下にオレンジの線で装飾しました

h3はデザインは同じに、色を少し薄くしてみました。

h4は下線を点線にして色を薄くしました

表示はこのようになります

見出し2

見出し3

見出し4

見出しはCSSを編集して色々装飾できます
自分のサイトに合ったデザインにしてみたらいいかもしれませんね

前回フォントを見やすく直しましたが
記事タイトルの大きさが気になりはじめましたので
もう少し小さくしようかと思い親テーマのCSSを見てみました。

スマホ表示では気になりませんがPCで見るとタイトルが主張しすぎかなぁと思いましたので・・・

このテーマ「twentyfifteen」はスマホ等でも見やすいようにレスポンシブデザインになっていますが
分岐点は7箇所、8段階もあるデザインとなってます。

“wordpressのテーマ「twentyfifteen」の記事タイトルのサイズ変更” の続きを読む

このwordpressのテーマ「Twenty Fifteen」
最初に行った作業で子テーマを作成したのでこれからカスタマイズを行っていきます。

まず手をつけたところはフォントです
もともと日本語のテーマではありませんので仕方の無いことですが
Twenty Fifteenのフォントではなんか見づらいですよね

そこで見やすいフォントとしてメイリオを指定するようにします。
しかしメイリオフォントがパソコンに入っていない人もいるので
その場合は、ヒラギノ角ゴ Pro W3
それも入っていない場合は、ＭＳ Ｐゴシックで表示されるようにしました。

“テーマ「Twenty Fifteen」のフォントをかえる” の続きを読む