[wordpress備忘録] IEの表示崩れをCSSハックで修正etc

wordpressのテンプレート修正メモ。

IEの表示崩れを、CSSハックで修正
CSSの見出しタグ<h1>…を修正
インデックスページのタイトル前markerを、hoverした時のみ水色に変更
月間アーカイブをドロップダウンリストに修正
トップ画像を変更
カテゴリページに日付も挿入

私がいつも使用しているブラウザはFirefox3。時折Opera、会社で毎朝起動時のみSafariという使い方をしているんですが、まだまだIEを使っておられる方は多いかと思います。

会社のサイトで、ユーザー情報を見ると「IE」を使っているのは、なんと90％以上、残り5%が「Firefox」、その他、という構成になるんですが、sorariumに関して言うならば、記事内容がデザイン系やライフハック系が多いためか、わりとコアなユーザー層に見ていただいてるんじゃないでしょうか。というのも、うちのサイトの先月の内訳を見てみると、「IE」が70％、「Firefox」が18％、「Safari」が8.8％、その他と、随分違います。

以前、アクセスレポ―トでちょっとブラウザのシェアについて書きましたが、2006年度とほとんど変わりなしですね。もうちょっとFirefoxが増えててもいいような気もしますが。

それはそうとして、こう結果でも出ているように少なくとも7割以上の人たちがIEを使っていることがわかります。なのに、どうしてもこのvicunaというスキンではサイドバーが崩れてしまうんです、うちの場合。直さなきゃ、直さなきゃと思っていながらなかなか手をつけられなかったのですが、アップグレードをしたついでにやっと重い腰を上げることにしました。ついでにもろもろ修正したので、備忘録メモ。

1 まずはローカル上で確認できるStyleTestをダウンロード
2 1. IEの表示崩れを、CSSハックで修正
- 2.1 サイドバー部分のlistの表示崩れを修正。
- 2.2 RSSアイコンの背景画像と位置を修正。
3 見出しと太字表示を修正
- 3.1 本文のフォントサイズも変更
- 3.2 サイドバーのフォントサイズ変更
4 2. CSSの見出しタグ<h1>…を修正
- 4.1 boldの色変更
5 3. インデックスページのタイトル前markerを、hoverした時のみ水色に変更
6 4. 月間アーカイブをドロップダウンリストに修正
7 5. トップ画像を変更
8 6.カテゴリページに日付も挿入

まずはローカル上で確認できるStyleTestをダウンロード

wordpressのskinで「wp.vicuna」を使っている場合、ローカル上で確認出来るファイルがあるのでstyleTestを以下からダウンロードします。

Vicunaのスキンをローカルで編集・調整する方法
編集作業を軽減するために、VicunaのXHTML構造と同じHTMLファイルを用意しました。このファイルを使い、ローカルでスキンの編集と表示の確認をした後、完成したCSSファイル一式をサーバーニアップロードすることでローカルでの表示と実際にVicunaを使って運営されているブログが同じように表示されます。

wp-content > themes > wp.vicuna > style-flat

の中に放り込んでおく。あとはその中にあるindex.htmlを開けばいい。いちいちサーバーにアップしなくていいから便利。

1. IEの表示崩れを、CSSハックで修正

問題はIEのみ表示が崩れる、ということ。Firefoxでは2でも3でもきちんと表示され、Operaでも大丈夫だったのに。こういう場合は、CSSハック！IEにだけ適用されるCSSの記述を追加すればよい。IE6.0にだけ適用させたい場合はセレクタの前に「*html」を記述する。

サイドバー部分のlistの表示崩れを修正。

p-content > themes > wp.vicuna > style-flat > subSkin> 3-context.css

div#utilities dl dd ul {
margin: 0;
list-style-position: inside;
list-style-type: none;
}
/* IE Hack */
*html div#utilities dl dd ul {
margin: 0;
list-style-position: outside;
list-style-type: none;
}
div#utilities li {
margin: 0.4em 0 0.4em 5px;
}
/* IE Hack */
*html div#utilities li{
margin: 0.4em 0 0.4em 0;
}

RSSアイコンの背景画像と位置を修正。

wp-content > themes > wp.vicuna > style-flat > subSkin> 2-class.css

li.atom,
li.rss {
margin-left: 5px!important;
list-style-type: none;
}
*html li.atom,
*html li.rss {
margin-left: -15px!important;
list-style-type: none;
}
li.atom a,
li.rss a {
padding-top: 3px; /*RSSアイコンの位置修正*/
padding-left: 20px!important;
background-image: url(images/mark/icon_feed.gif)!important;
background-repeat: no-repeat;
background-position: 0 0.1em;
}
*html li.atom a,
*html li.rss a {
padding-top: 3px; /*RSSアイコンの位置修正*/
padding-left: 20px!important;
background-image: url(images/mark/icon_feed.gif)!important;
background-repeat: no-repeat;
background-position: 0 0 0 -1em;
}

見出しと太字表示を修正

本文のフォントサイズも変更

wp-content > themes > wp.vicuna > style-flat > subSkin> 1-subSkin.css

div.textBody {
font-size: 100%;
｝
body.individual div.textBody {
font-size: 100%;
line-height:180%;
word-break: break-all;
}

サイドバーのフォントサイズ変更

wp-content > themes > wp.vicuna > style-flat > 1-element.css

p,
pre,
cite,
blockquote {
font-size: 95%;
}
li,dt,dd {
font-size: 80%;
}

2. CSSの見出しタグ<h1>…を修正

h1 {
font-weight:bold;
color: #000;
}
h2 {
font-weight:bold;
color: #000;
}
h3 {
font-weight:bold;
color: #000000;
border-left:5px solid #3D81EE;
letter-spacing:-0.05em;
padding-top: 1px;
padding-bottom: 2px;
padding-left: 7px;
border-bottom:1px solid #3D81EE;
}
h4 {
font-weight:bold;
color: #5EB524;
border-left:4px double #5EB524;
padding-left: 7px;
margin: 5px 0 10px 0;
}

boldの色変更

strong {
color: #FF8040;
}

3. インデックスページのタイトル前markerを、hoverした時のみ水色に変更

wp-content > themes > wp.vicuna > style-flat > subSkin> images > icon > 1-subskin.css
この中にタイトル部分のグレーの◎アイコン以外にも色々カラフルなアイコンが入っている。

div.entry h2 a:hover {
background-image: url(images/icon/v_icon150201.gif);
}

のgif画像を変更しておこう。

4. 月間アーカイブをドロップダウンリストに修正

アーカイブ一覧をドロップダウンメニューに » [WordPress] Tips Communityを参考にしました。

<dt>過去記事</dt>
<dd>
<ul class=”archive”>
<!–
<?php vicuna_archives_link(); ?>
–>
<form name=”archiveform” action=””>
<select name=”archive_chrono” onchange=”window.location = (document.forms.archiveform.archive_chrono[document.forms.archiveform.archive_chrono.selectedIndex].value);”>
<option value=”>↓select</option>
<?php wp_get_archives(‘format=option’); ?>
</select>
</form>
</ul>
</dd>

5. トップ画像を変更

wp-content > themes > wp.vicuna > style-flat > images > eyeCatch >long.png

6.カテゴリページに日付も挿入

[tr]Custom Posts Per Page – WordPress Pluginを参考にしました。

<h1><?php echo single_cat_title(); ?> Archive</h1>
<!– タイトルリスト表示 –>
<ul> <?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<li id=”catpost-<?php the_ID(); ?>”><?php the_time(‘Y-m-d (D) h:i’); ?> : <a href=”<?php the_permalink() ?>” title=”<?php the_title(); ?>”> <?php the_title(); ?></a></li>
<?php endforeach; else: ?> </ul>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>