兎組の課題で WordPressのテーマの課題をやっていた時の事。
Twenty twelve のスタイルシート style.css を編集してメニューバーの背景と文字を変更してみたのですが、文字と文字の背景だけが変わっただけ(コードを読めば当たり前なのですが、、、)で、ボタンとボタンの間に隙間ができて思ったように行かず。スタイルシートって何? の状態だったので、その時は諦めて10日ほど放置しましたが、このまま引き下がるのは悔しいので、「HTML/XHTML & スタイルシート レッスンブック」を買ってきてリベンジすることにしました。
WordPress を使うには、スタイルシートの知識は必須のようですね。JavaScript より重要そう。
確かに、JavaScript より、HTML,CSSの方が先ですね。
でも、HTML,CSS もいっきょに習得は、範囲が膨大。
しかも、HTML4 → HTML5 、CSS2 → CSS3 への移行期です。
まぁ、無理せず、ぼつぼつと。
テーマ編集をみんなで共有してはということを考えてみました。
そのままとかエディタでは、膨大過ぎて手に負えません。
ワードにコピーして行番号を入れると、色でマークできるので、助かります。
作ったワードファイルをメディアに入れてみました。
http://homeken.sakura.ne.jp/homeken/wp-content/uploads/2013/08/elevn-css-original.docx
ひらいて、530行目あたりからコメント入れてます。コメントで行番号を変えない注意が必要ですが。
個人で探し出したものを、追加して共有したいです。
ドロップボックスが一番いいのだけど、どうかしら??
う~ん?
テーマファイルの style.css の解読もいいのですが、これとマトモに、格闘すると、ノックアウトをくらう可能性が大きいです。
子テーマ(child)テーマを作って、対処するのがお勧めかと。
子テーマについては、おっつけ、やろうと思ってますが、ちょっと早すぎるかなと躊躇しているところです。
兎」で、子テーマを採用してます。
メインメニューに色をつけるのも、子テーマのstyle.css に数行。
これが、メインのstyle.css を上書きしますので、その部分だけ適用されます。=みてください。
php ファイルも読まないとノックアウトされそうですが、解読してみてノックアウトをくらうのも勉強のうちと思います。
ただ、最終的には子テーマで対処するのがベストでしょうね。兎の中でも進捗はバラバラなので子テーマの話は少し先かな~?
ハイ、ノックアウトくらったら、その顚末の詳細報告も、お願いしますね(笑)。
水田さんにそういわれると、スタイルシートへの足が止まってしまいますが・・・。
仕掛けは少なく、形態はシンプルでいいけど、デザインにこだわりたいんですよね。
でものぶさんが興味を持っていらっしゃるうちに、私も色々教えて頂きたいので、しばらくelevnのスタイルシートと格闘してみます。
ナビの右側にマージンを取る件、これでいかがでしょう。
むかごのwpでテストしました。
————————–
#access a {
color: #eee;
display: block;
margin-right: 20px;・・・・・新規に挿入
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
background-color: #990000;・・・赤い色
}