美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています エジソン君の絵

外部CSSファイルをモバイル対応にしました

Filed under: WordPress — タグ: , — daii @ 1:15 PM
2010年12月30日

最近の携帯電話では、外部CSSファイルを読み込んで表示するものもあるようです。実際にFORMAのi-modeで私のブログを見てみると、外部CSSを読み込んで表示されましたが、メイン部分に設定した margin が無効になり、サイドバーとメイン部分が重なって表示されていました。

携帯電話では、フルブラウザ以外のものはCSSが無効になると思っていましたが、CSSが無効にならないものもあるんですね。CSSを解釈してくれるのなら、ちゃんと全部解釈してほしいものです。

CSSをモバイル対応にしました

そこでブログのCSSファイルの一部に @media handheld{} を追加して、モバイルでもちゃんと表示できるようにしてみました。

@media handheld{
#menu {width:160px;position:relative;top:5px;left:5px;text-align:left}
a:link {color:#00f}
a:visited {color:#60c}
a:focus {color:red}
}

上記のようにサイドバーに相当する、#menu の position:absolute を position:relative に書き換えました。そうすると、サイド部分はメインの後に配置されます。これでサイド部分がメイン部分に重なるのは防げました。

また、CSSの a:hover はモバイルでは適用されないのでモバイル用の、a:focus も記述してみました。 a:link と a:visited もこの順番に必要です。



スポンサーリンク

ホームページのほぼ全ページをHTML文法に忠実になるようにしました

Filed under: Home Page — タグ: , , — daii @ 9:19 PM
2010年12月9日

約1000ページあるホームページをXHTML1.0Transitionalの文法にできるだけ忠実になるようにしました。ほぼ95%以上はチェック完了しましたが、まだ不具合があるかも知れません。

HTML文法のチェック方法


Valid XHTML 1.0 Transitional
このマークがホームページの各ページの左上に付いています。ここをクリックすると、そのページのHTML文法が合格かどうかがわかります。全ページチェックができていませんが、いずれ100%のページで合格にしたいと思っています。
Another HTML-lint gateway

このサイトでは、ページを採点して、100点満点で何点かを表示してくれます。たぶん98点以上になっているはずです。これぐらいの点数が取れれば表示が変になることはまずありません。

なぜ文法に忠実になるようにする必要があるのでしょうか

インターネットエクスプローラー(IE)やFirefoxやOpera等のブラウザは、寛大でHTML文法に少しぐらい従っていなくてもそこそこの表示をします。でもあまりにもひどいHTMLだと、表示してくれないこともあります。また、思った通りの表示にならないこともあります。

100点を取るのが目的ではありませんが、常に文法に気をつけてウェブページを作成したいものです。シンプルで表示の速いページを作成する為にも必要なことだと思っています。そうすることが結局SEO対策にもなります。

よくある文法違反の事例

XHTMLでは<img src=”******” alt=”***” />のように、終了タグの無いものはこのように書く必要があります。このタグを閉じる前のスペースとスラッシュをよく忘れます。

ホームページに使っている画像が表示できない時、前記のalt=”***”のように、代換えのテキストで表示することになっています。これはよく忘れる例です。

楽天の広告等やアクセス解析のスクリプトで”&”という文字がよく出てきますが、この文字は”&amp;”と書いてやる必要があります。この違反はとても多く、この通りに書かなくても、通常は影響がないので、違反のまま使われている例が多いのです。

文法ではないのですが、機種依存文字(丸の付いた数字や、II　IVのようなローマ数字)の使用もよくあります。自分では使わなくても掲示板で誰かが使う場合があります。半角カタカナの使用も指摘されます。

WordPressの検索フォームがXHTML文法エラー(role属性を消す)

Filed under: WordPress — タグ: — daii @ 8:09 PM
2010年12月5日

WordPressのブログに検索フォームを付けると、XHTMLで文法エラーを指摘されます。(http://validator.w3.org/)でチェックするとすぐにわかります。

これはフォームタグにrole属性がついているからです。このrole属性は特に必要ないので除去します。WordPress3.02-jaでも付いています。バージョンアップをしたら、修正の必要があります。

検索フォームにあるrole=”search”は、どこにあるのかすぐにはわかりません。私はTextSSを使って探しました。

該当箇所はWordPress3.02-jaの場合、/wp-includes/general-template.phpの160行目付近にあります。

$form = '<form role=”search” method="get" id="searchform" action="' . home_url( '/' ) . '" >

となっているので、role=”search” を消します。これでエラーは無くなりました。いつもチェックして文法エラーは無くしておきたいものです。

スポンサーリンク

WordPressの各記事の上か下にAdsenseを表示する方法

Filed under: WordPress — タグ: , — daii @ 9:11 PM
2010年12月2日

WordPressの各記事の上か下(前か後)にGoogle Adsenseの広告を表示するようにした場合、表示される記事の数が4つ以上になると、Google Adsenseのコードが4つ以上になってしまって、コンテンツ向けアドセンスは3つまでというプログラムポリシーに違反します。

Google AdsenseをWordPressのブログの最初の記事と3番目の記事にだけ表示する方法をやってみました。うまく表示できましたので、紹介します。プラグインを使ってもできるのでしょうが、プラグインはできるだけ使いたくありませんし、この方が簡単です。

WordPressのテーマのindex.phpを編集します。index.phpの中には次のような箇所があります。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
ここに既存のコードがあります。
<?php comments_template(); // Get wp-comments.php template ?>

アドセンス広告を表示させたい場所が記事の前なら上記の最初の行の次に、記事の後なら上記の最後の行の前に次のコードを追加します。

<?php $ad_count++; ?>
<?php if ($ad_count==1|$ad_count==3) {
print <<<EOD
ここにアドセンスコードを貼り付けます。
EOD;
} ?>

以上でアドセンス広告が最初の記事と3番目記事の上か下だけに表示されます。何番目に表示させるかは「$ad_count==1」の数字を適当に変えてください。

最初と2番目の記事の上か下だけに表示する場合は次のように指定します。

<?php if ($ad_count<=2) {

もちろん、直接index.phpの中にアドセンスコードを書いてもかまいませんが、アドセンスコード等を外部ファイルにしてincludeで読み込んでもかまいません。この方がスマートでしょう。この場合は次のようなコードを挿入する所に書きます。

<?php include ('adsense.php'); ?>

adsense.phpはテーマと同じディレクトリに置きます。このファイルの拡張子は何でもかまいません。

« Newer Posts — Older Posts »

Powered by WordPress