スポンサーリンク
子テーマを使おう
Principleを使っていただけるなら、子テーマPrinciple-childも使うことを推奨いたします。スグに出来るので是非やってみてください。
Principleは親子で使ってこそ最強!子テーマについての解説
以下は、子テーマを有効化していることを前提とした解説です。
スポンサーリンク
かんたんカスタマイズ
WordPress管理画面の左の外観→テーマの編集に進むと、子テーマのcssを編集することができます。
子テーマのstyle.cssは以下のようなかんたんカスタマイズという部分があります。
/*************************************************************************/ /* かんたんカスタマイズ */ /*************************************************************************/ /**** ブログタイトル ****/ .blog_title a{ color: #fff; /*文字色*/ } .blog_title{ font-size: 1.8em; /*文字の大きさ*/ line-height: 2; /*行の高さ*/ } /**** 見出し部分 ****/ .h{ color: #021F4D; /*文字色*/ border-bottom: 2px solid #021F4D; /*ライン*/ } /**** グローバルナビの文字の大きさと色 ****/ nav div li a{ font-size: 1em; /*文字の大きさ*/ color: #021F4D; /*文字色*/ } nav div{ border-bottom: 2px solid #021F4D; /*ライン*/ } /**** パンくずリストの文字色 ****/ div.bread a, div.bread ul{ color: #444; } /**** snsボックスの背景色 ****/ div.sns-box{ background-color: #b8bfcc; } /*************************************************************************/ /*************************************************************************/ /*************************************************************************/ /* タブレット(713px以下)andスマホ用 css */ /*************************************************************************/ @media only screen and (max-width: 772px){ /**** ブログタイトル ****/ .blog_title{ font-size: 1.3em; /*文字の大きさ*/ line-height: 1.4; /*行の高さ*/ } }
このかんたんカスタマイズ部分を使って、何が出来るか一つずつ解説していきます。
ブログタイトルをカスタマイズ
/**** ブログタイトル ****/ .blog_title a{ color: #fff; /*文字色*/ } .blog_title{ font-size: 1.8em; /*文字の大きさ*/ line-height: 2; /*行の高さ*/ }
ブログタイトルの文字列の文字色、文字の大きさ、行の高さを編集できます。数値の部分を適当に変えてみてください。
ただし、ここで書き換えたのはパソコンで見た場合にのみ反映されます(色はPCもスマホも共通です)。
スマホ・タブレットで見た場合のブログタイトルの字の大きさ、行の高さを変えたい場合は、もう少し下にある
/*************************************************************************/ /* タブレット(713px以下)andスマホ用 css */ /*************************************************************************/ @media only screen and (max-width: 772px){ /**** ブログタイトル ****/ .blog_title{ font-size: 1.3em; /*文字の大きさ*/ line-height: 1.4; /*行の高さ*/ } }
↑ここの値を書き換えて、適当なサイズにしてください。
↓色はここらで良いのを探してください。
見出し部分をカスタマイズ
メインカラムの一番上や、サイドバーなどの見出し部分の文字色、アンダーラインの色等を変更できます。
サイトのイメージを変えたいなと思ったら、以下の部分をいじってみてください。
/**** 見出し部分 ****/ .h{ color: #021F4D; /*文字色*/ border-bottom: 2px solid #021F4D; /*ライン*/ }
ヘッダーの背景をカスタマイズ
子テーマPrinciple-childフォルダの中に、imagesというフォルダがあって、さらにその中にdenim.jpgというのがあります。
変な名前で恐縮なんですが、denim.jpgがヘッダーの背景画像ファイルです。
なので、子テーマ内のdenim.jpgを上書きしさえすれば、簡単にヘッダーの背景画像が変わります。
無料で使える背景画像はネット上にわんさかあるので、どこかからお洒落なやつを見つけてきてjpgに変換して名前をdenim.jpgにしてしまって、子テーマ(principle-child)のimagesフォルダの中にアップロードして上書きしてしまって下さい。
注:親テーマ(principle)の中にもimagesフォルダがあって、その中にもdenim.jpgがあるのですが、そちらを書き換えても、結局子テーマのdenim.jpgがさらに上書きされて表示されるので、子テーマを有効化している状態で親テーマのファイルを書き換えてもサイトには反映されません。子テーマ(principle-child)の方のdenim.jpgを書き換えるようにしてください。
↓ここらで探せばいいのがあるはずです。
Subtle Patterns | Free textures for your next web project.
ダウンロードしておきたい、無料PSパターンテクスチャ素材まとめPhotoshopVIP |
Webサイトの背景デザインに活用したい、無料Photoshopパターン素材まとめ 2013年度PhotoshopVIP |
Free Paper Texture Pack: 64 High Resolution Card Stock Photos
グローバルナビゲーションをカスタマイズ
グローバルナビゲーションはページの背景の上に直に乗っていますので、背景の色によっては字が見えにくくなってしまいます。
また、表示されているメニューの数によっては、一列で収まりそうで収まらなかったり、微妙に右端が余ってしまったりすると思います。
そんな場合は以下の箇所をいじって、色を変えたり字の大きさを変えたりして、調整してみてください。
/**** グローバルナビの文字の大きさと色 ****/ nav div li a{ font-size: 1em; /*文字の大きさ*/ color: #021F4D; /*文字色*/ } nav div{ border-bottom: 2px solid #021F4D; /*ライン*/ }
パンくずリストの色をカスタマイズ
パンくずリストもグローバルナビと同じく、背景の上に直に乗っているので、背景色によっては見えにくくなってしまいます。
そういう場合は以下の部分で文字色を簡単に変えられます。
/**** パンくずリストの文字色 ****/ div.bread a, div.bread ul{ color: #444; }
snsボックスの色をカスタマイズ
snsボタンを格納している枠の背景色も簡単に変えられます。
ここを変えれば、サイトのイメージを結構変えられると思いますので、いろいろ試してみてください。
WordPress管理画面からカスタマイズ
ヘッダー画像
これは子テーマどうこうは関係ありません。
WordPress管理画面の左の外観→ヘッダーと進むと、ヘッダー画像を変更する画面になります。
ヘッダー画像は1138px × 180pxが推奨です。
お洒落なヘッダー画像を作って、ここからアップロードしてください。
PhotoShopがない人は無料ソフトのGimpなんかもあるので頑張って自作してみてください。
ヘッダー画像を無しにしたい方は、上記のヘッダー画像の管理画面で、「ヘッダー画像を削除」をクリックするだけで、ヘッダー画像なしのスッキリしたデザインに早変わりです!
当サイトでやると、こんな風になります。
お好みでどうぞ。
背景をカスタマイズ
サイト全体の背景も簡単に色を変えたり、画像にしたりすることができます。
外観→背景とクリックします。
画像をアップロードするか、色を選ぶかして、いろいろ試してみてください。
画像は上の「ヘッダーの背景」のところに貼ってあるリンクから探してみて下さい。
配色って難しい
配色はほんとに奥が深くて難しいです。正解がないのであれこれ試して自分で納得するしかありません。
もし配色について勉強したい方は、↓ここらをゆっくり読んでみて下さい。色の世界にハマってしまいますよ。^^;
カテゴリー別配色アイデア100 | Webクリエイターボックス
ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集 | Find Job ! Startup
配色を考えやすくするための様々なルール – YATのBLOG
配色アイデアに困ったら使いたい、無料オンラインツールまとめPhotoshopVIP |
本でしっかり勉強したい↓
7日間でマスターする配色基礎講座 (Design beginner series)
何か分からないことや問題があれば、Twitterかここのコメント欄にでも書き込んでください。
初めまして。
Principleを愛用させてもらっていますが、関連記事を出さないようにするにはどうしたらいいのでしょうか?
変な質問ですがよろしくお願いします。
by baffy 2014/02/25 14:33
解決しました。
お騒がせしました。
by baffy 2014/02/25 17:35
良かったです。
また何かありましたらいつでもどうぞ。^^
by Nobuo@管理人 2014/02/25 23:12
度々すみません。
また聞きたいことがあるのでコメントさせてもらいます。
私のブラウザーはFirefoxを使っているのですが、Firefoxで見ると問題なくカスタマイズした通りに見れるのですがIEで見ると背景とか設定したのが反映されていません。
それと投稿記事も文章のはじが切れて全部読めないんですけど、どこを修正すればいいのかわからない状態なので修正できるようなら教えてもらえないでしょうか?
よろしくお願いします。
by baffy 2014/02/26 21:01
IE8以降なら大丈夫だと思うのですが、IE7以前のバージョンは見捨てました。
baffyさんのIEのバージョンはいくつですか??
by Nobuo@管理人 2014/02/26 23:19
書き忘れました><
IE8です。
壁紙はちゃんと表示されましたが、記事の文章は相変わらず切れたままです。
ちなみにPC2台あるんですが、2台ともIE8でどっちも文字は切れています。
このPrincipleを使い始めて4日目ぐらいなんですが、たまたま今日IEで見たら不具合に気がついたので、いつからそうなってるのかわかりません。
対処法ありますかねぇ?
by baffy 2014/02/27 00:04
IE8は大丈夫だと思っていたのですが、ダメですか??
>いつからそうなってるのかわかりません。
もともとの仕様なので最初からだと思います。
ちなみに僕のIE11ではちゃんと表示されています。
対処法は残念ながら今のところないですね。
唯一の対処法はIEの古いのが滅びてくれることだけです。。IEの古いバージョンのシェアは実際かなり減ってきているらしく、見捨てているサイトが増えてきているらしいです。
せっかく使ってくれているので何とかしたいのですが、申し訳ないです。
by Nobuo@管理人 2014/02/27 00:59
ちゃんと表示されました!
なんとIEのキャッシュクリアして少し時間置いて開いたら文字が全部表示されました。
お騒がせして申し訳ありませんでした。
いくつもテンプレート変えてみましたが、このPrincipleが一番私の好みなので末永く使わせていただきます。
またお邪魔するときがあるかも知れませんが、その時はまたよろしくお願いします。
いろいろありがとうございました。
by baffy 2014/02/27 02:29
キャッシュ??一体何がどうなっていたのかよく分かりませんが解決して良かった良かった。(^^;)
気に入って頂けて嬉しいです。末永く可愛がってやって下さい。
by Nobuo@管理人 2014/02/27 14:54
お世話になっております。
ワードプレス初心者であり、自分に合ったテーマはないかと探していた所、
こちらのサイトに辿り着き、利用させて頂いております!
今まで無料ブログを利用していて、海外のテーマは自分にはハードルが高かったので
非常に分かり易くデザインも良いので重宝しています。
そこでお聞きしたいのですが、
こちらのページの「ヘッダー部分のカスタマイズ」という箇所で、
一通り読んでみたのですが、親と子のくだりがいまいち理解できません。
可能ならばCSSからデニム色のヘッダー部分をカスタマイズしたいのですが
それは可能でしょうか?
宜しくお願い致します。
by saku 2014/04/03 06:36