WordPressテーマ・スワローでショートコードなし（HTMLタグのみ）でデザインされたパーツを表示する

WordPressテーマ・スワローは、ショートコードが豊富に用意されており、HTMLやCSSを書かなくてもさまざまなデザインされたパーツを使えます。

ただショートコードは、そのテーマ固有の表記のため、将来テーマを変更したいときにデザインが反映されず、そのまま残ってしまうというデメリットがあります。

このページでは、スワローで用意されているボタンやボックス（囲み枠）などのデザインされたパーツをHTMLタグで表示するときの書き方を紹介します。

複数カラムのサンプルと書き方

PC表示では、要素が横に並び、スマートフォンでは、縦1列に並ぶように表示させる方法です。

2カラム

HTMLの書き方

<div class="column-wrap cf">
<div class="col2">
<p>左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム</p>
</div>
<div class="col2">
<p>右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム</p>
</div>
</div>

3カラム

HTMLの書き方

<div class="column-wrap cf">
<div class="col3">
<p>左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム</p>
</div>
<div class="col3">
<p>中央カラム中央カラム中央カラム中央カラム中央カラム中央カラム中央カラム</p>
</div>
<div class="col3">
<p>右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム</p>
</div>
</div>

ボタンのサンプルと書き方

デフォルトボタン

「btn-wrap」クラスを指定したdivでaタグを囲むと、このようなボタンとなります。ボタンの色は、外観-カスタマイズのメニューで選んだリンク色が表示されます。

<div class="btn-wrap"><a href="#">デフォルトボタン</a></div>

<div class="btn-wrap big"><a href="#">デフォルトボタン</a></div>

シンプルボタン

<div class="btn-wrap simple"><a href="#">シンプルボタン</a></div>

<div class="btn-wrap simple big"><a href="#">シンプルビッグボタン</a></div>

立体的なボタン

<div class="btn-wrap rich_yellow"><a href="#">立体的なボタン（黄色）</a></div>

<div class="btn-wrap rich_pink"><a href="#">立体的なボタン（ピンク）</a></div>

<div class="btn-wrap rich_yellow big"><a href="#">立体的なボタン（黄色）ビッグ</a></div>

2つ横並びのボタン

ランキングサイトなどの商品紹介ページで使われやすい、横並びのボタンの表示です。

<div class="column-wrap cf">
<div class="col2">
<div class="btn-wrap rich_orange big"><a href="#">評判・詳細を見る</a></div>
</div>
<div class="col2">
<div class="btn-wrap rich_green big"><a href="#">公式サイトを見る</a></div>
</div>
</div>

ボックスのサンプルと書き方

補足や注意書き、強調するときに使える各ボックスの書き方です。

補足

<div class="supplement">
<p>少し小さなフォントで少し目立つような補足説明を追加することができます。<br>少し小さなフォントで少し目立つような補足説明を追加することができます。</p>
</div>

<div class="supplement boader">
<p>シンプルな枠で囲む<br>
少し小さなフォントで補足説明を追加することができます。</p>
</div>

見出し付きボックス

<div class="c_box intitle blue_box"><div class="box_title"><span>青いボックス</span></div>ここにコンテンツを記載</div>

<div class="c_box intitle red_box"><div class="box_title"><span>ここにタイトル</span></div>ここにコンテンツを記載</div>

<div class="c_box intitle yellow_box"><div class="box_title"><span>ここにタイトル</span></div>ここにコンテンツを記載</div>

色の変え方

classを書き換えることで、色が変えられます。以下6種類があります。

• blue_box
• red_box
• yellow_box
• green_box
• pink_box
• glay_box
• black_box

見出し無しボックス

<div class="c_box blue_box">
<p>ここにぼっくす（青）</p>
</div>

色の変え方は、見出しありボックス、見出し無しボックスとも共通です。

まとめ

以上、WordPrssテーマ・スワローの各パーツをショートコードなしで表示するhtmlの書き方を紹介しました。

この方法であれば、将来的にスワローから別のテーマに乗り換えたときに、ショートコードがそのまま表示されてしまうという問題を回避できます。

htmlタグのclassはそのまま残るので、新しいCSSを適用すれば、デザインを一括で切り替えることも可能です。

定期的にWordPressのテーマは変えていきたい人に、参考になりましたら幸いです。

スワロー公式サイトへ