ブログのサイドバーやフッターに複数のリンクボタンを横並びで表示したいと思ったことはありませんか？ 今回は、WordPressのカスタムHTMLウィジェット内で、CSSのみを使って簡単に実現する方法をご紹介します。
テーブルタグを使わない横並びへの挑戦
以前、ブログランキングのリンクボタンを横並びにする際に、HTMLのテーブルタグを使用しましたが、背景色の調整などで少し手間取りました。
そこで今回は、よりシンプルで modern な方法として、CSSのFlexboxを使って横並びを実現する方法を試してみました。
実装方法：カスタムHTMLウィジェットにコードを記述
WordPressの管理画面から、「外観」>「ウィジェット」を開き、「カスタムHTML」ウィジェットを追加します。そして、以下のコードを内容欄に貼り付けます。
HTML
HTML
<div class="button-container">
<a title="ブログ村ランキング" href="(ここにあなたのブログ村ランキングのリンクを貼り付けてください)" target="_blank" rel="noopener"><img src="(ここにあなたのブログ村バナーのURLを貼り付けてください)" alt="ブログ村ランキング" width="110" height="31" /></a>
<a href="(ここにあなたのブログランキングのリンクを貼り付けてください)" target="_blank" rel="noopener"><img src="(ここにあなたのブログランキングバナーのURLを貼り付けてください)" alt="ブログランキング" width="88" height="31" border="0" /></a>
</div>
CSS（<style> タグで囲んでHTML内に記述）
HTML
<style>
.button-container {
display: flex; /* Flexboxレイアウトを有効にする */
gap: 10px; /* ボタン間のスペース（調整可能） */
}
.button-container a {
/* 必要に応じてボタンのスタイルを調整できます */
}
.button-container img {
vertical-align: middle; /* 画像の垂直方向中央揃え */
}
</style>
ポイント：
- 全体を
div要素で囲み、button-containerというクラス名を付けています。 - CSSの
<style>タグをHTML内に直接記述することで、このウィジェット内だけでスタイルを適用できます。 display: flex;によって、子要素の<a>タグが横一列に配置されます。gap: 10px;でボタン間のスペースを簡単に調整できます。vertical-align: middle;で画像の垂直方向の配置を中央に揃えています。
まとめ
CSSのFlexboxを使うことで、テーブルタグを使わずに、よりシンプルかつ柔軟にリンクボタンを横並びで表示できました。ボタン間のスペース調整も簡単に行えるため、デザインの微調整も容易です。
もし、WordPressのウィジェットでリンクボタンの横並びに困っている方がいれば、ぜひこの方法を試してみてください。
コメント