WordPress初心者がブログを作るよ♪Gush2をカスタマイズしてタイトル背景色を好みの色に。スマートダディ目指して修行中。>WordPress初心者がブログを作るよ♪Gush2をカスタマイズしてタイトル背景色を好みの色に。ついでにタイトル常時左寄せ。最終更新日:2015/02/19無料で国産のカスタマイズしやすいテーマ、Gush2を使ってブログをカスタマイズしてますが、今日は、ブログのイメージを決めると言っていいほど大事な?タイトル部分の背景色を設定します。ついでに、タイトルロゴが表示幅に関係なく左寄せになる様に変更してみました。V1.1.1にて動作確認を行っています。Guhs2でフォントや背景の色を変えるには?1日に書ける記事の限界量の問題で、ちょっと横道にそれるとなかなかシリーズ物が進まなくなっちゃうのが零細趣味運営なSiSO-LABの悩みですが、ようやくWordPressネタに戻ってきました。今回は、タイトル等の背景色のカスタマイズです(...のつもりで書き始めたのですが、結局、タイトル「だけ」になってしまいました)。Gush2のタイトル(ヘッダ)部分の背景は、ちょっと落ち着きのある濃いグレーの背景用グラフィックが設定されています。いったフォントや背景の色情報や枠、背景用グラフィックデータの読み込み等は、スタイルシートという情報に設定されています。Gush2の場合ですと、Guhs2テーマがインストールされているディレクトリの直下に「style.css」というファイルがあり、ここで定義されています。極端な話、style.cssの内容があまり深く理解できなくても、テーマの画像ファイルが保存してい或るディレクトリを見てファイル名を確認したり、ブラウザでサイトを表示させて画面キャプチャし、グラフィックソフトで色情報を読み取り、その数値に従ってstyle.css内を検索するなんて方法でも、かなり正確に修正場所を見つけだすことができます...というか、SiSOは、どうにもあわからなくなると、このような原始的な方法で探しています。注意点としては、Gush2はレスポンシブデザインに対応しているため、スタイルシートの定義も各解像度別に設定されていることがあるということです。1箇所修正するところを見つけたら、もしかしたらもう2ヶ所、同じようなところがあるかも、と思って探せば間違いありません。タイトルの背景色をカスタマイズ今回、ソリッドでパステルな色合いのブログにしようと思っています。いうことで、冒頭に書きましたGush2のデフォルトのタイトル部分の背景画像ですが、これは表示しないようにし、代わりにちょっと軽いイメージのファンタスティックな色(#aaf)に変更してみます。変更する対象ファイルはstyle.cssだけです。Gush2では、表示幅1024px以上の時だけ背景に画像ファイルを指定するようになっており、それより表示幅が小さい場合は、単なる背景色で表示されるようになっています。このせっていはstyle.cssの1673行目にあります。*/}1675行目で指定している画像ファイルを削除し、背景色を「#aaf」に変更すると、以下のようになります。#aaf;続いて、表示幅1024px以下のための色設定も修正します。style.cssの375目から、以下のような設定が定義されています。#fff;}377行目の「#aff」となっている部分を、書き換えます。ついでにタイトルロゴを常時左寄せに変更これは好みの問題ですが...いや、カスタマイズするに当たり、好みの問題もへったくれもなく、すべては好みの問題なわけですが、Gush2では、表示幅が1024px以上の場合はタイトルログ画像が左寄せ、表示幅を狭くすると(スマホやタブレット表示)センタリングされて真ん中に表示されます。いつも左側に引っ付いていてくれる方が安心する気がしますので、常時、左寄せになるよう設定変更しました。style.cssファイルの375行目に、以下のような宣言があります。#fff;}この中の376行目で「center」と宣言している部分がありますので、これを「left」にします。left;というわけで、先ほどの背景色変更と合わせて動作テストをしてみました。色が変わってだいぶイメージが変わりました。続いて、一段、表示幅を狭くしてみました。Gush2オリジナルでは、タイトルロゴが中央に移動するのですが、左寄せのままで狙った通りの動きをしてくれました。一段狭い表示モードです。こちらもバッチリ!CSS色指定の#abcは#aabbccなのねスタイルシートで色指定をするとき、「#abc」とか「#aabbcc」という表記を使うことがあります。これは、「赤、緑、青」(光の三原色)を16進数で表現したものです。16進数は「16で一桁上がる数え方」なため、15まで一桁で数える必要があります。そのため、「10~15」は「a~f」で表現します。そんなわけで、例えば「#ff0000」と書かれていたら赤、「#ffffff」と書かれていたら白、という具合です。ところで、この色設定値、3ケタと6ケタがあります。#aabbcc」であることがわかりました。ネットで調べても文献を見つけられなかったので、実際に表示させてスクリーンキャプチャし、グラフィックソフトで色を確認してみました。3ケタと6ケタを混在して使う場合、注意が必要です。なんてあれこれ書いてたら結構な時間になっていまいました。オマケのネタを書いているうちに時間が無くなっちゃいます。次回は予備ネタみたいなものは少ないはずなので、ちゃんと進めるはず。要注意だね今まであまり気にしたことなかったのですが、今回、「3ケタ色指定の方が気楽かな?」なんて使い始めたところ、微妙に色が合わないところが...と思って調べてみました。3ケタと6ケタを混合で使う場合、要注意です。WordPress初心者がブログを作るよ♪テーマは無料のGush2!WordPressを使い始めて約9か月になりますが、もう1つ新しいサイトを立ち上げてみました。時は試行錯誤の連続でひどいものでしたが、今回は、以前よりはもうちょっと整理した状態で作業内容をまとめながら進めたので、テスト用環境構築からGush2のカスタマイズまで連載記事にしてみました。LINKTweetPocket関連前後記事PREV:WordPress初心者がブログを作るよ♪オリジナルfavicon.icoを作ってGush2の設定変更する方法NEXT:WordPress初心者がブログを作るよ♪Gush2をカスタマイズして、フッタ、メイン(記事周囲)の背景色を好みの色に設定。関連記事2015.02.27WordPress初心者がブログを作るよ♪Gush2をカスタマイズして、戻るボタンの背景変更とアイキャッチ画像無し表示2014.09.15人気記事を表示中の記事にカテゴリに合わせてサイドバーに表示したいな。2017.10.21WordPressのoEmbed、表示されない時があって不安定?なのでプラグインPz-LinkCardにしてみたよ。2014.05.20WordPressの無料テーマGushをカスタマイズしてSiSO-LAB色に~パンくずリスト、ページ移動リンク、コメント欄の色変更2014.05.04WordPressの画像ファイル保存先ってどうなっているの?保存先の変更方法とか。2014.10.22WordPressでカテゴリ別のRSS(フィード情報)を取得する方法。プラグイン不要でさすがWordPress!な気分。2015.03.27WordPress初心者がブログを作るよ♪メニューを作ってみたり、項目の順番を変えてみたり。WordPressの無料テーマGushをカスタマイズ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*PREV:ESBITポケットストーブであれこれ。エスビットタブレットと100均固形燃料の火力を比較。NEXT:WordPress初心者がブログを作るよ♪Gush2をカスタマイズして、フッタ、メイン(記事周囲)の背景色を好みの色に設定。PROFILESiSO-LAB所長兼研究員のSiSOです。あ、趣味のサイトなので実体はありませんけど...。「結果は大事だけど、やっぱり経過を楽しみたいよね!」ということで、雑多な内容で紆余曲折試行錯誤している様子を楽しんで頂ければ幸いです。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。関連人気記事WordPressの画像ファイル保存先ってどうなっているの?保存先の変更方法とか。投稿されたFFFTPでメディアファイルを一括ダウンロードできない?設定変更で回避する方法とか。投稿されたやっぱり簡単だった!無料で透過マルチアイコンを作る方法。サイトにFaviconつけてゴキゲン。投稿されたWordPressで記事引用を簡単に表示しちゃう方法...WordPress4.4から埋め込み(embed)機能に対応していたのね。投稿されたアイキャッチ画像をRSSで表示できるようにWordPressをちょっとカスタマイズしてみる。投稿されたWordPressのoEmbed、表示されない時があって不安定?なのでプラグインPz-LinkCardにしてみたよ。投稿されたローカル環境にセットアップしたWordPress(XAMPP上)の表示確認を、他のパソコンやスマホからアクセスする方法とか。ネットオウル関連新着記事ネットオウル(レンタルサーバー)のWordPressへ海外からログインする方法。海外から実験してみました。2018.03.07WordPressのoEmbed、表示されない時があって不安定?なのでプラグインPz-LinkCardにしてみたよ。2017.10.21WordPressで記事引用を簡単に表示しちゃう方法...WordPress4.4から埋め込み(embed)機能に対応していたのね。2017.03.17WordPress、サイトのアイコン表示は標準機能だけで設定できるのね...小さな画像でも大丈夫。2016.04.18新しいWordPressブログを準備中。カスタマイズ向き国産テンプレートGush2と定番プラグインの話とか。2016.03.07WordPressローカル環境を簡単に2クリックだけでインストールする方法。2016.03.05多趣味なブログ運営は分けるべき?サブドメインがいい?ディレクトリがいい?方針検討中。プラグインでWordPress記事のパーマリンクを別サイトのURLに設定する方法。PC百均浪漫/SiSO-LAB更新情報ダイソー光沢紙のはがき(郵便番号枠入り)インクジェットプリンタ、4年経ってもパッケージ変わらずの定番商品。2019.10.01なんと3個で100円!(税抜)、煮豚風煮たまご、お買い得だね!おつまみ、ラーメンのチョイ足しに。タイマーとかってLR44ばかりじゃないのね。2019.09.06ポイントカード等の整理に便利かな。