STINGER3のスマートフォン表示のパンくずリストをスタイルシートでリンクボタン化

　wordpressテーマSTINGER3のスマートフォン表示のパンくずリストをスタイルシートでリンクボタン化してみた。

　リンクボタンはボタンのように見えるが押すとリンク先に移動する。

　文字が小さくても、ボタンを押せばリンク先に飛ぶのでスマートフォン表示のときには便利だと思う。

　STINGER3のパンくずリストはリストタグ（<ul> <li>）を使っていないようなので余計に戸惑ったんだけど。

　何とか形になった。

　カスタマイズするのは単一記事の投稿 (single.php)とsmart.css。

パンくずリストのリンクボタン化単一記事の投稿 (single.php)のカスタマイズ
パンくずリストのリンクボタン化smart.cssのカスタマイズ

パンくずリストのリンクボタン化単一記事の投稿 (single.php)のカスタマイズ

<div id="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span></a><span class="bird">></span></div>
    <?php $postcat = get_the_category(); ?>
    <?php $catid = $postcat[0]->cat_ID; ?>
    <?php $allcats = array($catid); ?>
    <?php
while(!$catid==0) {
    $mycat = get_category($catid);
    $catid = $mycat->parent;
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
    <?php foreach($allcats as $catid): ?>
    <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><span class="bird">></span></div>
    <?php endforeach; ?>
</div>

　書き換えたのは赤い文字で示した部分。

　もともとあった>にspanでスタイルを付け加えた。

パンくずリストのリンクボタン化smart.cssのカスタマイズ

　googleぱんくずの下を以下のように変更

/*-----------------------------------
googleぱんくず
------------------------------------*/
div#breadcrumb {
padding: 0 0 5px;margin: 0 0 100px;
width:100%;height:auto;
}
div#breadcrumb div {
float:left;font-size: 13px;
width:30%;
margin:3px;
}
#breadcrumb div a {
display:block;display:table-cell;
vertical-align: middle;
width:100%;height:100px;
text-align:center;
text-decoration:none;
background-color:#ccf;border: inset 3px #fff;
color: #000;
}
.bird{
display:block;display:table-cell;
vertical-align: middle;
font-size: 20px;
text-decoration:none;
background-color:#fff;
color: #000;
}