新狭山北口商店会すかいロードどっとこむ
今あらたに、Themeは、小粋空間さんの WordPress テーマ(テンプレート)・3カラム版 を使わせていただいております。
“2カラム・リキッドレイアウト(左サイドバー)” に変更しています。

商店会サイトのヘッダーのために描いた雲 by 水彩7使い心地がベリーグッド。
末永く愛用させていただけたらと存じます。

ですが、少々手直ししたい所もあり・・・。

  1. 文字が小さい & フォントサイズを 「ポイント」 で設定してあるので、
    [表示] → [文字のサイズ] で文字を大きくできない 
    ==>> ジジババさまには読めないので大きく
  2. 行間隔が狭い
    ==>> ジジババさまには読みにくいので広く
  3. Read more、Comment、Trackback、Category などなど 英語のオンパレード
    ==>> 地域の商店会サイトですから、できるかぎり日本語オンリーで
  4. 色合い
    ==>> 「すかいロード」 らしい色に

本日朝からまる一日、CSSと取り組み、
以上は、ほぼ完了かな。

苦い経験ですが、
(CGIなどでも、そうした苦い経験は積みまくっているハズなのに、喉元すぎて・・・)
商店会のために前に使っていたThemeで、
CSSをさんざん、いじりまくってからブラウザでチェックしたところ、
表示が大きく崩れていました。 
インターネット・エクスプローラの古いバージョンでアウト!でしたね。
がっくり。
今回は、こまめにチェックをしながら、作業を進めています。

困ったこと
エラー表示

ステータスバーのエラー表示 の図(ページでエラーが発生しました)加盟店一覧で、ブラウザのステータスバーにエラーが表示される。
インターネット・エクスプローラ (バージョン4~7)のみ。 
FireFox、Opera、Safari はエラーにならない。

Another HTML-lint gateway や、
DreamWeaver のレポートで確認するなど、原因究明し、直せる部分を直したが、改善されない。

結局、原因は 「電話番号」 と判明。

Skypeがインストールされていると、インターネット・エクスプローラで、
電話番号は、Skypeによって、画像に変換されます。ポップヒントにも、Skype actions などと表示されます勝手に電話番号の表示を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日、やっと原因がわかった。
<dd><dt>のタグが入っているポイントで切れる。
タグがまだ閉じられていないエリアでも、<br>が続いているだけの場所は切れない。

推奨されない属性

加盟店一覧 のページがエラーになっているおかげで、
今回あらたに、 ”推奨されない属性” を知ることができた。

以下の属性は、将来、サポートされなくなる可能性があるようだ。
早めに手直ししておきましょう・・・。><

img align=”right”

実は、使いまくっています。
ちらうら蚤の市の画像は、すべて、この設定ですがな。
ひえぇ~。

回避策
  1. スタイルシートに、以下の書き込みを追加。
    img.migi { float: right;}
    img.hidari { float: left;}
  2. html で以下の属性を追加。
    <img src=”xx.jpg” alt=”xx” title=”xx” class=”migi”  width=”xx” height=”xx” />
img hspace=”xx”
回避策
  1. スタイルシートに、以下の書き込みを追加。
    img {padding-left: 15px;}
target=”_blank”
回避策
  1. とりあえず、削除のみ・・・

新狭山北口商店会のホームページは、
記事も少ないので、すべて直すことができた。

しかし、当ちらうら蚤の市の記事は、
直近5日分くらいを修正したけれど・・・。
ギブアップ。

それにしても。
いやなぁ、しかし、
やっと覚えた記憶をクリアして、あらたな記憶で塗り替えるってのは、
かなりしんどいぜよ。