Water and Earth

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

しばらく見た目がおかしくなります

どのタグがどこまでの範囲になるのか背景色つけて確認しようと思うので、しばらくは見た目がダサくなります。

 

container 入れる場所、間違えてたヨ!

Chapter 2-6 にトップページを作成するってのがあるんですよ。

で、Chapter2-8 にヘッダーとフッターを表示ってステップになるんよ。

 

chapter 2-6 で index.php に

<div class=”container”>

(個別記事の場合の出力指定)

(ページのナビ)

</div><!–container–>

って感じで、「container 」って名前の分類を作るんよ。

 

style.css でこのcontainer のスタイルを指定しとくんよ。

本文の横幅はいくつでっせーとかね。

 

で、このcontainer さん。ほかの部分でも利用するんよ。

ヘッダーとフッターにもこのcontainer さんのスタイルを利用してるので、本文と同じ横幅でテキストが収まるようになるんよ。

ただ、ヘッダーとフッターの背景色は index.php で container さんの外側に書いてあるんよ。

 

 

この「最初にcontainer を指定するタグ」と「container を利用するタグ」があるんだけど、書き方はほぼ一緒っていうなんとも紛らわしいものなんです。

いや、最初に「container を指定するタグ」の一番最後に</div><!–container–> って表記するんで、「container さんはここで終わりやでー!」って分かるはずなんだけど、紛らわしいんよ。

で、本の各章内のステップで、そのステップで表記するテンプレートってのが載ってるんだけど、全体が長いから途中で「…略…」とか書いてあるんよ。

 

そんなこんながありまして、一番最初に<div class=”container”> を入れる場所、間違えてたヨ!

どーりでヘッダーの表示が本と異なってたワケだヨ!

『あれ? なんかおかしいなー?』と、ここ数日思ってたけど、こんなミスだったとは…。

 

 

あと、投稿日とカテゴリーの表示の下にタイトルが入ってしまってたんよ。

これも『なんでこんなところにタイトルが…?』と思ってたんだけど、

index.php で、

タイトルのタグ

投稿日タグ カテゴリーのタグ

<?php the_title(); ?>

って入ってたヨ! そりゃー、指示通りにタイトル表示させるワケだよ(タイトル、投稿日、カテゴリーのタグの表記は数行になるので、ざっくり日本語で書いてます)。

これも、本にはタイトルを表示させる<?php the_title(); ?>を書かせてから、

そのタグを使って<h1><?php the_title(); ?></h1> へと書き換えるというか<h1></h1>を前後に追加させるものだったんだけど、別の行にまるまる追加してたよ

 

ウィジェット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> で囲んで背景色をつけただけにしました。

 

 

参考