CSSでテキストに合わせて伸び〜るボタンをつくる

テキスト（文字列）の長さに合わせてボタンの長さも変化する。
そんなボタンをCSSを使って作ってみる。

そして更に、WordPressのカテゴリー表示に、こののび～るボタンを利用してみよう。

スクリーンショット

これが完成イメージ↑（これはただのキャプチャ画像なのでクリックしてもだめですよ。）テキストの長さは変化するけど、背景画像は変えたくない。そんなときに便利。
もちろんこんなモノ自分ひとりで作れるわけないので、参考にさせてもらったサイトはこちら（英語）↓

How to make sexy buttons with CSS

英語が長々と書いてあって全部は読む気にならないので、ここに書かれているCSSコード＋画像を参考に真似してみる。
（だからちょっと間違いがあるかもしれません。以下、自己責任で。）

ステップ1：画像を準備する

通常のボタンとクリック時のボタンの画像が必要みたい。でもここでは簡略化のため、通常のボタンだけでやってみる。（つまりクリックしても変化しない。）
ごにょごにょとがんばってグリーンのボタンを作ってみたところ。ボタンは2つのパーツに分けておく。

左側のパーツ（bg_button_span.png）はテキストを入れるためのボタン。300x24px。
右側のパーツ（bg_button_a.png）はボタンの右端を丸く見せるためのボタン。22x24px。

ステップ2：CSSを記述する

CSSファイルに以下の記述を追加する。画像とテキストのサイズに合わせてheight, margin, padding, line-heightパラメータは適宜変更する。

a.category_bar {
background: transparent url('img/bg_button_a.png') no-repeat scroll top right;
display: block;
float: right;
height: 24px;
margin-right: 2px;
padding-right: 22px;
text-decoration: none;
}a.category_bar span {
background: transparent url('img/bg_button_span.png') no-repeat;
display: block;
color: #fff;
line-height: 14px;
padding: 5px 0 5px 20px;
}

ステップ3：HTMLを記述する

HTMLファイルを開いてボタンを表示したいところに次の記述を追加する。

<a class="category_bar" href="#"><span>ごにょごにょ</span></a>

以上で、のび〜るボタンの完成。どうだろう？ここまでは、先ほどのサイトのほぼコピペ。

次に、これをWordPressのカテゴリー表示に使ってみる。
しかしここで一つ問題が。よく考えたら（というか当然なんだけども）WordPressでカテゴリーを表示するときは「<?php the_category(”); ?>」という関数を使う。そうすると自動的にカテゴリー名が<a>で囲まれたHTMLが返される。だから、ボタンの中のテキストを<span>で囲みたいのにダメぢゃないか！となってしまう。うーん困った。

というわけで最後に・・・

ステップ4：WordPressのカテゴリーテンプレートを編集する

ここから先は正しい方法なのかわからないけど、やってみたらとりあえず意図通りの表示になったので書いておきます。ファイルのバックアップを取っておけば編集を間違っても安心。
ちょっと面倒だけどWordPressのカテゴリー表示に関するphpファイルを編集しちゃいます。 WordPress本体ファイルの中をたどると

WordPress＞wp-includes＞category-template.php

といういかにも怪しい名前のファイルがあるのでこれをテキストエディタで開く。中身はなんだか難しそう。
カテゴリーの出力形式を変更したいので、手がかりになる「href=」みたいなキーワードで検索。そうすると105行目あたりに（バージョンによって違うと思うけど）

$chain .= '<a href="' . get_category_link( $parent->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $parent->cat_name ) . '">'.$name.'</a>' . $separator;

というそれっぽいコードがるので、これを次のように変更。

$chain .= '<a class="category_bar" href="' . get_category_link( $parent->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $parent->cat_name ) . '"><span>'.$name.'</span></a>' . $separator;

つまり<a>にclassを指定して、更にカテゴリー名が<span>で囲まれるように変更したわけです。
他にもあと6カ所ほど同じような表記の部分があるので、それも同様に変更。そうすると、カテゴリー名が意図した形式で出力されるようになる。
自分のブログにアクセスしてソースを見ると確認できる。

以上で終わり。これでやっとカテゴリー名がのび〜るボタンで表示できるようになった。今回はなんだか妙に長いエントリーになってしまった(;´▽｀A“

Take It Crazzzy!