Water and Earth

WordPressでphpやらcssのコーディング 練習に使ってるブログ。でも最近はKali の勉強してます。

ウィジェット2 の問題、解決

widget は、style.css で display:block を指定してある。widget2 はこの指定をなくしたい。ってことで、別々にしてあるのですよ。

「カテゴリー」、「月別アーカイブ」、「最近の投稿」、「RSS」はwidget のスタイルを使用。

本の紹介はwidget2 のスタイルを使用、って感じどす。

 

まず、function.php に

//ウィジェット
register_sidebar();
register_sidebar();

と2つ目を追記。

 

次にindex.php で、1つ目のwidget の下に

<?php dynamic_sidebar(2); ?>

とだけ入れて、ページを表示。「ソースを表示」でソースを見てみる。

 

ソースではすでに<li></li> で囲んであった。

<li></li> はul かol とセット使いみたいなので、index.php のwidget2 の部分に

<div class=”blogmenu2″>
<ul>
<li class=”widget”>
<?php dynamic_sidebar(2); ?>
</ul>
</li>

と表記。

 

style.css のウィジェットの部分にwidget2 のスタイルを追加。

.blogmenu2 ul {margin: 0; padding: 0; list-style: none}
.blogmenu2 .widget {padding: 20px; background-color: #efefef}
.blogmenu2 li a {color: #666666; font-size: 14px; text-decoration: none}

 

うーん、li class=”widget” でいいんだろうか?? textwidget ではなかろうか?とちょっと悩む。あー、でも、自分でつける分類名(class)だからwidget でもいいのか(たぶん…)。

あと、.blogmenu2 ul でpadding を0に指定して、.blogmenu2 .widget でpadding をさらに指定してあるのは、どーなのよ?と思う。ここら辺は本を参考に書いてるので、どっちのパラメータにpadding を入れると表示が好みな感じになるのかまだ不明。

[追記]

.blogmenu .widget の paddingは 1px 25px 30px にしました(上 左右 下)。ここでpadding を使って上のpadding を入れとかないと、いきなり画像が上端になる。でも、padding を指定すると勝手に見出し(ウィジェットタイトル)分のスペースが入ってしまう希ガス。なので、padding 1px (上部)にしてみた。他に何かいい方法はないのだろうか?

 

コードをブログ記事内で書いてあるときは、<pre><code>~</code></pre>で囲むことにしました。今のところ、この書き方だと、どーにも表示が好みじゃないので、<pre style=”background-color:#f5f5f5;”> でスタイルを指定してます。でも、これもやっぱり表示が好みじゃなかったりするけど。。。

→ <pre><code>~</code></pre>で囲むと、今現在スマホでブログ見た時にテキストが背景色掛けてある部分からはみ出ることに気が付いたので、<div style=”background-color:#f5f5f5;”></div> で囲んで背景色をつけただけにしました。

 

 

参考