PICK-UP

li要素内で改行

Makito's Wandering the World WordPress

Makito’s Wandering the Worldのトップページで3件目以降の記事はタイトルのみ表示させるようにしてあります。
それで各タイトルをli要素でリストにしてあるのですが、各liのmargin-bottomに変な隙間が生じました。

margin-bottomに隙間

margin-bottomに隙間

で色々とCSSをいじってみて、margin-bottomにマイナスをかけると各ブラウザーで綺麗に表示出来るようになったのですが、IEの互換表示で悲惨なことに・・・。
この部分は、content-title.phpというファイルを読み込んで表示させているのですがその時のソースコードが下記。

<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<span>(<?php echo get_the_date(); ?>)</span>
</li>

そうなんです!この記事のタイトルにもあるように、li要素内で改行をすると、あんまり芳しくないみたい!

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span>(<?php echo get_the_date(); ?>)</span>

にすると、上手くいきました。

li要素内で改行しなければよかったのか~♪

li要素内で改行しなければよかったのか~♪


今更、IEとか互換とかで悩まされるとは・・・。

RECENT POSTS

パンくずリスト

Makito's Wandering the World WordPress

Makito’s Wandering the Worldのシングルページやカテゴリーページのナビゲーションの下に、パンくずリストを表示させてみました。
最初は、下記ソースでやってみました

<div id="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo home_url(); ?>" itemprop="url"><span itemprop="title">トップ</span></a>&rsaquo;
    </div>
    
    <?php $postcat=get_the_category(); ?>
    <?php $catid=$postcat[0]->cat_ID; ?>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo get_category_link($catid); ?>" itemprop="url"><span itemprop="title"><?php echo get_cat_name($catid); ?></span></a>&rsaquo;
    </div>
    
    <div><?php the_title(); ?></div>
</div>

ただ、これだとカテゴリーの”子”が表示できません。
で、結局Breadcrumb NavXT Settingsなるプラグインを使ってしまいました。
インストールして、下記ソースを書けば”親”だろうが”子”だろうが、びしっと表示してくれます!

<?php
if(function_exists('bcn_display'))
{bcn_display();} 
?>

便利なもんです♪

li要素内で改行

Makito's Wandering the World WordPress

Makito’s Wandering the Worldのトップページで3件目以降の記事はタイトルのみ表示させるようにしてあります。
それで各タイトルをli要素でリストにしてあるのですが、各liのmargin-bottomに変な隙間が生じました。

margin-bottomに隙間

margin-bottomに隙間

で色々とCSSをいじってみて、margin-bottomにマイナスをかけると各ブラウザーで綺麗に表示出来るようになったのですが、IEの互換表示で悲惨なことに・・・。
この部分は、content-title.phpというファイルを読み込んで表示させているのですがその時のソースコードが下記。

<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<span>(<?php echo get_the_date(); ?>)</span>
</li>

そうなんです!この記事のタイトルにもあるように、li要素内で改行をすると、あんまり芳しくないみたい!

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span>(<?php echo get_the_date(); ?>)</span>

にすると、上手くいきました。

li要素内で改行しなければよかったのか~♪

li要素内で改行しなければよかったのか~♪


今更、IEとか互換とかで悩まされるとは・・・。