Water and Earth

WordPressでphpやらcssのコーディング 練習に使ってるブログ

Chapter 4-2 終了

ようやくウィジェットメニューのデザイン指定に入った。

ここですよ、ココ!知りたかった情報の一つは。

今2年くらい使ってるwordpress のブログがあって、最近テーマを変えたらウィジェット毎のスペースがなんか近いんよ。そこを変更したいんですよねー。使ってるテーマが公式にあがってたテーマなんだけど、ダッシュボードの外観>テーマの編集から変更できるんだろうか?

 

最初、本に出てる通りトップの記事下にナビゲーションを入れて、その下にウィジェットを入れたんよ。で、各ウィジェットの背景に色をつけてみたらナビゲーションとウィジェットのメニューにスペースがない

本に従って style.css で、(ウィジェットの)メニュー部分を四角いボックスに指定してるんで、

.blogmenu .widget {} の中にmargin-top で余白を入れてみたけど、解消されず。

 

そのまま本の内容通りに進んで、見出しデザイン(.blogmenu .widgettitle{})の指定をしてみたらあら不思議。ちゃんと解消された。どーゆうことやろ?

 

私はウィジェットのスペース内に見出しの部分と各リスト(ウィジェット=見出し&各リスト)が入ってると考えてたんだけど、

 

見出し+各リスト=各ウィジェットってカタチなのかな?

 

 

そいや、margine とpadding の使い分けがいまいちわかるような分かんないような。

なんとも微妙な感じ。何か(ウィジェットとか)の外側の余白はmargine で、内側にある余白はpadding と思ってるんだけど、どうなんだろう?

それぞれ英語の意味を調べたら

margin … (ページなどの)余白、欄外、へり

padding …. 詰め物をすること、詰め物、不要な挿入句

とあったので、なんとなく考え方はあってるのかも。

 

 

 

メモ

hover(stylesheet)… カーソルが乗ってる要素にスタイルを適用する。マウスオーバーしてる時になんかしら見た目の変化を起こす時に使う

a:hover … カーソルは乗ってるけど、クリックされてない状態のスタイルを指定

色の指定はWEB色見本 原色大辞典を使用。色の指定、楽しい♪