カテゴリー: Twenty Fifteen

wordpressの標準テーマ「Twenty Fifteen」のカスタマイズです

今回はポストナビゲーションです
前の記事や後ろの記事へのリンクですね

“Twenty Fifteenでポストナビゲーションをカスタマイズしたい” の続きを読む

WordPressのテーマ「Twenty Fifteen」では、本文中にリンクを貼っても色が本文と同じな為、ちょっとわかりづらいですよね。

そこで今回は本文中のリンクの色をカスタマイズしようと思います。

カスタマイズは必ず子テーマで行うようにしてください。
子テーマの作り方はこちらを参考に！
http://wpcustom.net/archives/6

“Twenty Fifteenでリンクの色を変えたい” の続きを読む

WordPressの標準テーマ「Twenty Fifteen」のカスタマイズです

前回はサイト上部の余白とウィジェットの上下の余白を小さくしました。
サイトのバランスをとるため
今回はコンテンツエリアの幅を広げ、左右の余白を小さくします。

“Twenty Fifteenでコンテンツエリアの幅を広げたい” の続きを読む

このwordpressのテーマ「Twenty Fifteen」はとてもシンプルなつくりになっていますが
やはり余白が大きいのが気になります

今回はサイト上部の余白およびウィジェットの上下の余白を小さくしていきます

上部の余白を設定しているのは
サイドバーではsite-headerのmargin
サイトメインではsite-mainのpaddingです

サイドバーとサイトメインのバランスを見ながら調整していきます
レスポンシブとなってますので @media screen and (min-width: 59.6875em)の中に記述していきます。

ウィジェットは下の余白のみ設定しています

“Twenty Fifteenでサイト上部&ウィジェットの上下の余白を調整する” の続きを読む

wordpressの標準テーマ「Twenty Fifteen」のカスタマイズです
サイドバーの余白を調整します

これはサイドバーにアドセンス広告を掲載するために行います。
したがって最低でも300pxは欲しいですね。

デフォルトの設定ではサイト幅1404pxのときサイドバーの幅は413px
余白が左右20%ですのでウィジェットの幅は248pxとなります

そこで左右の余白を8%にしてみました
するとウィジェットの幅は346pxとなります

“Twenty Fifteenでサイドバーの余白を少なくしたい” の続きを読む

wordpressのテーマ「Twenty Fifteen」では見出しのフォントサイズが大きく
主張しすぎのように感じたので少し小さく変更することにしました

見出しの装飾についてはコチラを参考にしてください

見出しのフォントサイズは各分岐点ごとに設定してありますので
手間がかかりますが確認しながらそれぞれに設定していきます。

“Twenty Fifteenで記事の見出しのサイズを変えたい” の続きを読む

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」のフォントをかえる” の続きを読む