小粋空間  -  a cheap joke and a play on words site

リクエストにこたえていただいて、ほんとうにありがとうございます。

基本的なことかもしれないのに、
ていねいに教えてくださるので、
ほんとうに助かります。

さっそく、リストを追加してみました。

そうしたら、今度は、項目立ての「○印」が不必要になったのですが、
あの○印をなくすのにはどうしたらいいのかがわかりません。

おんぶにだっこでごめんなさい。

よろしくお願いします。

＞サエコさん
こんにちは。
ご連絡ありがとうございます。
うまく設定できたようで良かったです。

ご質問の件ですが、スタイルシートの該当部分を下記の赤色の内容に修正してください。

.side ul,
.side ol {
    padding-left: 0;
}
.side ul li {
    list-style-type: none;
}
　　　：
.side #categories ul {
    padding-left: 0;
}
.side #categories ul ul {
    padding-left: 10px;
}
.side #categories li {
    list-style-type: none;
}

それではよろしくお願い致します。

[2] Posted by yujiro : November 16, 2007 2:42 PM

お礼が遅くなってしまいました。

「○印」、無事なくなりました。
ありがとうございました。

何度も何度も申しわけないのですが、
今度は、バナーなどが左寄りなってしまうのが気になります。
できれば中央に寄せて設置したいのですが、
これって「ＣＳＳでブロックレベル要素をセンタリングする」の項が該当すると考えていいでしょうか。

それともうひとつ、
バナーとバナーの間を一行あけたくて、
今は「<p> </p>」と入れて設定してあるのですが、
これって合っていますか？

ほんとうに初心者でお手数をおかけしてすみません。
よろしくお願いします。

＞サエコさん
こんにちは。
ご質問の件ですが、センタリングについては、バナーのマークアップを

<p class="ad">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>

として、スタイルシートに下記を追加してください。

.ad {
    text-align: center;
    padding: 10px 0;
}

なお、img 要素の border 属性は非推奨なので外しましょう（ご利用のスタイルシートに罫線を表示しない設定がありますので書かなくても大丈夫です）。

また、上に示した CSS の padding プロパティでバナーとバナーの間も空けています（行間を空けるために空のp要素を挿入するのはお勧めできません）。

ただし、上の CSS では、全てのバナー画像の上下に 10px の余白ができるので、一番最後（または最初）の画像に余白をつけたくない場合は、バナー画像にもうひとつの class 属性（赤色）をそれぞれ指定して、

<p class="ad top">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>
 
<p class="ad middle">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>
 
<p class="ad bottom">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>

CSSは下記のようにします。

.ad {
    text-align: center;
}
.top {
    padding-bottom: 10px;
}
.middle {
    padding: 10px 0;
}
.bottom {
    padding-top: 10px;
}

最初の設定がやや面倒かもしれませんが、一度設定しておけば後は楽だと思いますし、微調整も可能です。

それではよろしくお願い致します。

[4] Posted by yujiro : November 28, 2007 1:40 PM

ていねいにお答えいただきありがとうございました。

センタリングひとつも自分の力でできないで、情けないです。

今度は、「ＷＥＢデザインの新しいルール」の「テンプレート・タグのカスタマイズ」に挑戦してみたところ、レイアウトが崩れてしまいました・・・。

悲しいけれど、ＭＴに挑戦するには、わたしはまだまだ初心者すぎのようで、
挫折しそうです。
ほんとうにお手数をおかけしてしまってすみません。

「img 要素の border 属性は非推奨なので外しましょう」とのこと、
ご指摘ありがとうございます。

これもまたよくわからないのですが、
提供されているアフィリエイトバナーのリンクコードをそのまま貼り付けてあります。
その場合でも、img border="0"というのは取り除いたほうがいいのでしょうか。勝手にとっちゃっても大丈夫なのか気になります。

何度もすみません。よろしくお願いします。

＞サエコさん
こんにちは。
ご質問の件ですが、メインページにある div の終了タグがひとつ多いようです（カラムレイアウト崩れは、開始タグと終了タグの数が一致しない時に発生します）。

とりあえず

</MTEntries>

のすぐ下にある

</div>

を取り除いて、再構築して表示を確認してみてください。
解消しないようでしたらお手数ですが再度ご連絡頂けますでしょうか。

border 要素を取り除くことは、(X)HTMLマークアップ的には正しい作業ですが、「タグを書き換えてはいけない」という旨の規約があれば（またはそれが気になるのであれば）そのままでも構いません。

それではよろしくお願い致します。

[6] Posted by yujiro : November 29, 2007 11:52 AM

ありがとうございました。

無事レイアウトの崩れが解消しました。

センタリングの件ですが、
<p class="ad">　を入れたら、

もしかすると、

<dd class="side">　は取り除いたほうがいいですか？

それと、すみません、もうひとつ。

わたしのブログでいうところの、「日々の成績」のカテゴリーをクリックすると、
monthlyarchiveとなって、10月分しか表示されません。

しかもブログタイトルバナーの上に、変なタグが表示されてしまいます。

これって、php化の失敗でしょうか。
php化をしたときにXML宣言を変更したときのおしりの部分のタグと同じだと思うのですが・・・。

こちらのコメントで質問することではないと思うのですが、
どこでお聞きすればいいのかわからないので、まとめて質問させていただきます。

たびたびでほんとうにすみません。
よろしくお願いします。

＞サエコさん
こんばんは。
ご質問の件ですが、PHP化はほぼ成功しています。

ひとつめの問題は、書籍のP85の手順4と同じ状態になってしまっているようです。つまり、カテゴリー・アーカイブページが、過去に作成した index.html にアクセスしまっています。変なタグが表示されているのもそのせいです。
書籍の記述不足ですいませんが、アーカイブテンプレートについても、FTPツールで、すべての .html ファイルを削除してください（アーカイブファイル用のディレクトリがお分かりでしたらディレクトリをすべて削除して再構築する手もあります）。

また、dd 要素は削除しないでください。理由は、dl 要素の子要素に直接記述できるのは dt または dd のいずれかのみだからです（dd 要素の中はかなり自由に書けます）。
きちんとしたマークアップを書くのは、なれるまで大変だと思いますが、この辺りの話については「XHTMLタグ一覧ツール」がお役にたつかもしれません。

それではよろしくお願い致します。

[8] Posted by yujiro : November 29, 2007 8:51 PM

ありがとうございました。

変なタグも表示されなくなって、無事解決しました。

お聞きすると、すぐに原因がおわかりになるので、
わたしには神様のように思えます。

何度もお手数をおかけしてすみませんでした。

タグのことも少しずつですが理解できるようになってきました。

まったくわからないと、勉強してもなかなか頭に入ってこないのですが、
こうやって教えていただいて、自分でやってみて、うまくいくと、
とても理解しやすいですし、また、なんだか楽しくなってきました。

＞サエコさん
こんにちは。
最初は慣れるまで大変かもしれませんが、少しずつクリアにしていきましょう。
ではでは！

[10] Posted by yujiro : December 3, 2007 2:04 PM

こんばんは。
サイドバーにアマゾン商品を紹介したくて、コチラを参考にやってみたのですが、その下の部分から表示がおかしくなってしまいました。

何がいけないのでしょうか？
分からなくて。

宜しくお願い致します。

＞hi-lite&coffeeさん
こんにちは。
ご質問の件ですが、「表示がおかしく」とは、画像の後に書かれたテキストの回りこみのことでしょうか。
該当の記事のURLと、もう少し具体的な説明を頂ければ幸いです。
それではよろしくお願い致します。

[12] Posted by yujiro : December 10, 2007 1:39 PM

右側のサイドバーの一番上に

<dt class="sidetitle">Now Recommend</dt>
<dd class="side">
<center><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000X4FH0Q/poosblog-22/ref=nosim/" target="_blank"><img src="http://images-jp.amazon.com/images/P/B000X4FH0Q.09.TZZZZZZZ.jpg" alt="アズ・アイ・アム(初回生産限定盤)" border="0" /></a><center/>
</dd>

と記入しました。
そうしましたら、その下のサイドバータイトルから文字が小さくなりcenterよりになってしまいました。

ＩＥでは崩れずに見れるのですがFirefoxだと崩れるようです。

また、ここで書くことではないのですが、失礼します。
友達がコメントを記入してくれたのですが、Permalinkページを見ると、コメントが見れず、コメントの数の分だけ同じエントリーが表示されてしまいます。

このような場合はどこをどのように変えたらよいのでしょうか？宜しくお願い致します。

＞hi-lite&coffeeさん
こんにちは。
ご質問の件ですが、center 要素の終了タグが誤っているようです。

誤

<center/>

正

</center>

また、center 要素は非推奨タグですので、センタリングはスタイルシートでの設定をお勧めします。

同じエントリーが表示される問題は、テンプレートの設定がどこか誤っている（「コメントの詳細」の内容が他のテンプレートの内容になっているか、MTIncludeの関係が適正でない）と思われますので、再度ご確認頂けますでしょうか。

それではよろしくお願い致します。

[14] Posted by yujiro : December 12, 2007 2:06 PM

ありがとうございました。小さなミスに気づきませんでした。

右サイドバーのimgだけセンタリング設定したいのですが、その場合、スタイルシートはどこをどのように変えればいいのでしょうか？

宜しくお願い致します。

＞hi-lite&coffeeさん
こんにちは。
ご質問の件 （再掲）ですが、スタイルシートに

.hoge {
    text-align: center;
}

を追加して、右サイドバーのマークアップを

<dd class="side">

から

<dd class="side hoge">

に変更してください。
hoge の部分は適当な名称に変更してください。

それではよろしくお願い致します。

[16] Posted by yujiro : December 17, 2007 1:49 PM