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

スポンサーリンク

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

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

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

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

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

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

まずはローカル上で確認できる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

  1. div#utilities dl dd ul {
  2. margin: 0;
  3. list-style-position: inside;
  4. list-style-type: none;
  5. }
  6. /* IE Hack */
  7. *html div#utilities dl dd ul {
  8. margin: 0;
  9. list-style-position: outside;
  10. list-style-type: none;
  11. }
  12. div#utilities li {
  13. margin: 0.4em 0 0.4em 5px;
  14. }
  15. /* IE Hack */
  16. *html div#utilities li{
  17. margin: 0.4em 0 0.4em 0;
  18. }

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

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

  1. li.atom,
  2. li.rss {
  3. margin-left: 5px!important;
  4. list-style-type: none;
  5. }
  6. *html li.atom,
  7. *html li.rss {
  8. margin-left: -15px!important;
  9. list-style-type: none;
  10. }
  11. li.atom a,
  12. li.rss a {
  13. padding-top: 3px; /*RSSアイコンの位置修正*/
  14. padding-left: 20px!important;
  15. background-image: url(images/mark/icon_feed.gif)!important;
  16. background-repeat: no-repeat;
  17. background-position: 0 0.1em;
  18. }
  19. *html li.atom a,
  20. *html li.rss a {
  21. padding-top: 3px; /*RSSアイコンの位置修正*/
  22. padding-left: 20px!important;
  23. background-image: url(images/mark/icon_feed.gif)!important;
  24. background-repeat: no-repeat;
  25. background-position: 0 0 0 -1em;
  26. }

見出しと太字表示を修正

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

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

  1. div.textBody {
  2. font-size: 100%;
  3. body.individual div.textBody {
  4. font-size: 100%;
  5. line-height:180%;
  6. word-break: break-all;
  7. }

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

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

  1. p,
  2. pre,
  3. cite,
  4. blockquote {
  5. font-size: 95%;
  6. }
  7. li,dt,dd {
  8. font-size: 80%;
  9. }

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

  1. h1 {
  2. font-weight:bold;
  3. color: #000;
  4. }
  5. h2 {
  6. font-weight:bold;
  7. color: #000;
  8. }
  9. h3 {
  10. font-weight:bold;
  11. color: #000000;
  12. border-left:5px solid #3D81EE;
  13. letter-spacing:-0.05em;
  14. padding-top: 1px;
  15. padding-bottom: 2px;
  16. padding-left: 7px;
  17. border-bottom:1px solid #3D81EE;
  18. }
  19. h4 {
  20. font-weight:bold;
  21. color: #5EB524;
  22. border-left:4px double #5EB524;
  23. padding-left: 7px;
  24. margin: 5px 0 10px 0;
  25. }

boldの色変更

  1. strong {
  2. color: #FF8040;
  3. }

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

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

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

の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; ?>
スポンサーリンク
NO IMAGE
この記事をお届けした
sorariumの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

『[wordpress備忘録] IEの表示崩れをCSSハックで修正etc』へのコメント

  1. 名前:タロウ 投稿日:2008/07/17(木) 10:40:24 ID:42aef89b7

    こんにちは!
    最近、フリーペーパーのWebサイトをWordpressで作っているので
    色々と参考にさせて頂いてます。

    <サイト>http://www.futuradesignlab.com/mag/

    そらさんのブログ、色んな方向の記事が素敵なバランスで調和していて
    いつも楽しみにしてます。更新がんばってくださいね〜。

  2. 名前:そら 投稿日:2008/07/17(木) 19:34:16 ID:4cdc7256f

    こんにちはー、タロウさん!
    わー、なんかポップだけれど綺麗で楽しいサイトだ。タロウさんも執筆してるんですねー、こういうちょっと裏話的なコンテンツはちょっとわくわくしますね。

    いやぁ、なんだか、全くテーマに統一性がなくて、時々困っちゃってるんですけど(笑)
    でも統一性を持たせようとすると今度は書く意欲がなくなってきちゃうんで
    もうそれはやーめた!っとw

    そやって言ってもらえるのすごぉく、すごぉく嬉しいんですよ。
    ありがとうございます。
    私もいつもRSS readerに登録してタロウさんのブログ見てますよん。
    お互い更新頑張りましょう!