商店会のWordPress。CSS漬けの一日
新狭山北口商店会すかいロードどっとこむ。
今あらたに、Themeは、小粋空間さんの WordPress テーマ（テンプレート）・3カラム版 を使わせていただいております。
“2カラム・リキッドレイアウト（左サイドバー）” に変更しています。
使い心地がベリーグッド。
末永く愛用させていただけたらと存じます。
ですが、少々手直ししたい所もあり・・・。
- 文字が小さい ＆ フォントサイズを 「ポイント」 で設定してあるので、
[表示] → [文字のサイズ] で文字を大きくできない
==>> ジジババさまには読めないので大きく - 行間隔が狭い
==>> ジジババさまには読みにくいので広く - Read more、Comment、Trackback、Category などなど 英語のオンパレード
==>> 地域の商店会サイトですから、できるかぎり日本語オンリーで - 色合い
==>> 「すかいロード」 らしい色に
本日朝からまる一日、CSSと取り組み、
以上は、ほぼ完了かな。
苦い経験ですが、
（ＣＧＩなどでも、そうした苦い経験は積みまくっているハズなのに、喉元すぎて・・・）
商店会のために前に使っていたThemeで、
CSSをさんざん、いじりまくってからブラウザでチェックしたところ、
表示が大きく崩れていました。
インターネット･エクスプローラの古いバージョンでアウト！でしたね。
がっくり。
今回は、こまめにチェックをしながら、作業を進めています。
困ったこと
エラー表示
加盟店一覧で、ブラウザのステータスバーにエラーが表示される。
インターネット･エクスプローラ （バージョン4～7）のみ。
FireFox、Opera、Safari はエラーにならない。
Another HTML-lint gateway や、
DreamWeaver のレポートで確認するなど、原因究明し、直せる部分を直したが、改善されない。
結局、原因は 「電話番号」 と判明。
Skypeがインストールされていると、インターネット･エクスプローラで、
勝手に電話番号の表示をSkypeのオリジナル表示にしてしまう。（右側画像参照）
ブラウザのツールバーにある、Skypeアイコンで、
表示させない設定にしたところ、エラーが消えた。
フッターが表示されない
index.php で、フッターをゲットしているのに、なぜ表示されないのか。
==>>
スタイルシートで、フッターを表示させない設定になっていた。
きっと何か理由があってのことなのだろうが・・・。
.layout-two-column-liquid-left #footer,
.layout-two-column-liquid-right #footer,
.layout-one-column-liquid #footer {
display: none;
}
.layout-one-column #footer {
text-align: center;
}
コピーライト表示などがないのは困るので、表示させた。
表示させると何が起こるのだろう？
アヤカシでも出るんだろうか。
（すまん。xxxHOLiC中毒なんじゃ・・・）
複数画像が重なって表示される
インターネット・エクスプローラ5.5、6において、
アクセスのページの画像が複数に重なって表示されてしまっている。
画像が重なっているのはアクセスのページのみ。
9月15日。定義リスト(DL DT) との相性が悪いということがわかった。
リスト(UL LI) に変更して解決。
ヘッダーに大きな隙間が表示される
加盟店一覧のページで発生している問題。
インターネット・エクスプローラのバージョン5、5.5、6 で、
ヘッダーのリンクメニューと、タイトル部分との間に白い空き地ができている。・・・未解決
サイドバーにズレ
インターネット・エクスプローラのバージョン5.5と6で、
[お知らせ] という表示が、せりあがり、ヘッダー領域に食い込んだ。
隙間が生じたり、サイドバーにズレが生じているのは、加盟店一覧のページのみ。
以下の設定で上余白を増やしたところ改善され、解決。
#links-left {
padding-top: 40px;
}
実は当初、CSSでうまく、左サイドバー・上部余白を調整できず、
恥ずかしながら、
sidebar2.phpに、＜br /＞ を2個、入れて調整していた。
あらためて挑戦してみたところ、成功。（よかった）
画像の途中が切れる
9月6日、やっと原因がわかった。
＜ｄｄ＞＜ｄｔ＞のタグが入っているポイントで切れる。
タグがまだ閉じられていないエリアでも、＜br＞が続いているだけの場所は切れない。
推奨されない属性
加盟店一覧 のページがエラーになっているおかげで、
今回あらたに、 ”推奨されない属性” を知ることができた。
以下の属性は、将来、サポートされなくなる可能性があるようだ。
早めに手直ししておきましょう・・・。＞＜
img align=”right”
実は、使いまくっています。
ちらうら蚤の市の画像は、すべて、この設定ですがな。
ひえぇ～。
回避策
- スタイルシートに、以下の書き込みを追加。
img.migi { float: right;}
img.hidari { float: left;} - html で以下の属性を追加。
＜img src=”xx.jpg” alt=”xx” title=”xx” class=”migi” width=”xx” height=”xx” /＞
img hspace=”xx”
回避策
- スタイルシートに、以下の書き込みを追加。
img {padding-left: 15px;}
target=”_blank”
回避策
- とりあえず、削除のみ・・・
新狭山北口商店会のホームページは、
記事も少ないので、すべて直すことができた。
しかし、当ちらうら蚤の市の記事は、
直近5日分くらいを修正したけれど・・・。
ギブアップ。
それにしても。
いやなぁ、しかし、
やっと覚えた記憶をクリアして、あらたな記憶で塗り替えるってのは、
かなりしんどいぜよ。