休日だと思っていたのに…
某日（https://www.saidaiphoto.com/archives/4149/）、お出かけ中に友人の一人から「ホームページのボタン、アイコン部分クリックできないよね？」と不具合報告を頂きました。
実際のボタンを下に表示してみます。確かにアイコン部分をクリックしても反応がない。
部内SE、お出かけ中にムズムズが止まりません。
詳しく聞くとこのボタン、K先輩が作ったものだそうです。バグであれ仕様であれK先輩の顔面に拳をぶち込みに行きたいところですが、その前に修正に取り掛かりたいと思います。
まずは問題点を洗い出す
お出かけから戻り、早速作業に取り掛かります。
各自それぞれの作業をしております。
ボタンについて詳しく見ていくと他にも問題が見えてきました。
問題点は以下の４つです。
- ボタンのアイコン部分がクリックできない
- ボタンにマウスが重なったときに動きがない
- 同じ画像を同ページに２つ以上使うことができない(classでなくidで画像を指定していたため)
- カスタムHTMLを使ってボタンを表示させなければならないので、HTMLを知らない人にとって使いにくい
３と４はホームページ運営サイドの話なので、ホームページを見る方に直接影響するのは１と２ですね。問題を整理できたところで実際のHTMLコードを見ていきます。
<div class="link_button" id="calendar">
<a href="https://www.saidaiphoto.com/plans/">
<div class="text_table two_line">
<div class="text_cell">
<p>イベント予定</p><br>
<p class="small_text">予定表はこちら</p>
</div>
</div>
</a>
</div>CSSは長いので載せませんが、befor/after要素がデザインの重要な役割をしているみたいです。
が、このようなbefore/after要素てんこ盛りのHTML/CSS設計は宗教上ＮＧなので、デザインだけそのままに一から作り直しました。暇だし。
実際にコードを書く
余談ですが、個人的に今回のようにデザインがあらかじめ決まっていると作業は楽です。K先輩に感謝。
作り直したものが下のコードです。
<div class="link_button_i">
<a href="https://www.saidaiphoto.com/plans/">
<div class="icon_container"><i class="calendar"></i></div>
<div class="content_container">
<div class="text_container">
<p>イベント予定</p>
<p class="small_text">予定表はこちら</p>
</div>
</div>
</a>
</div>iタグのclass名でアイコンを指定してます。もちろんボタン全体がクリックできます。
実際のボタンを比較してみます。
できた。たのしい。
HTML/CSSが完成したので、次にこれをショートコードにします。
記事を書く人にとって使いやすくする
ショートコードを使うと、上のような見にくいHTMLを名前の通り短いコードにすることができ、HTMLを簡単に扱うことができます。
今回は以下のような記述方法にしました。
[link_button_saidaiphoto text="ボタンの主テキスト" small_text="ボタンのサブテキスト" url="遷移先のリンク" icon_tag="アイコン画像の指定"]HTMLを知らない人からすればこっちの方が(比較的)理解しやすいと思います。
ただ、ショートコードにするのは割と面倒な作業が必要なので必ずしもここまでしなきゃならないとは思いません。気が向いたらその作業について詳しく書いてみようと思います。
これでボタンは完成したので、過去のページで使われている旧ボタンを新ボタンに差し替えれば今回の修正は完了です。
作業時間４～５時間、賃金０円。
お疲れ様でした！
