テーマ「Lightning」ならコピペで使えるでボタンの装飾

「お問い合わせはこちら」といったリンクを貼る際、ボタンのように装飾が簡単にできると便利です。

image

「ワードプレスでホームページ制作講座」で使用しているテーマ「Lightning」では、CSSフレームワークのBootstrapを採用していますので、ボタンの装飾がコピペで簡単に作れます。

ボタン装飾

表示例①

お問い合わせはこちら

お問い合わせはこちら

HTML①

<a class="btn btn-default btn-lg" href="#">お問い合わせはこちら</a>

<a class="btn btn-primary btn-lg" href="#">お問い合わせはこちら</a>

表示例②

お問い合わせはこちら

お問い合わせはこちら

HTML②

<a class="btn btn-default" href="#">お問い合わせはこちら</a>

<a class="btn btn-primary" href="#">お問い合わせはこちら</a>

表示例③

お問い合わせはこちら

お問い合わせはこちら

HTML③

<a class="btn btn-default btn-sm" href="#">お問い合わせはこちら</a>

<a class="btn btn-primary btn-sm" href="#">お問い合わせはこちら</a>

表示例④

お問い合わせはこちら

お問い合わせはこちら

HTML④

<a class="btn btn-default btn-xs" href="#">お問い合わせはこちら</a>

<a class="btn btn-primary btn-xs" href="#">お問い合わせはこちら</a>

表示例⑤

お問い合わせはこちら

お問い合わせはこちら

HTML⑤

<a class="btn btn-default btn-block" href="#">お問い合わせはこちら</a>

<a class="btn btn-primary btn-block" href="#">お問い合わせはこちら</a>

注意点

  • コピペする場合、HTMLの中の「#」には、リンク先のURLを入れましょう。
  • 「お問い合わせはこちら」の文字は自由に変更してください。
  • ボタンのカラーは管理画面で設定した「キーカラー」の色になります。

 

 

この記事を書いた人

佐々木亜紀
佐々木亜紀
株式会社アドプラス 代表取締役 佐々木亜紀 千葉コワーキングスペース201 オーナー 2009年9月開業。ウェブ制作業務を開始。 WordPressを使った制作を行い、中小企業、個人事業主、女性起業家のサイトを制作する傍ら、SNSなどウェブを使った集客全般のサポートを行う。 2013年よりコワーキングスペースを運営。 中小企業庁 ミラサポ専門家派遣事業登録専門家 千葉県産業振興センター登録専門家

「失敗しない初めてのワードプレスのコツ」のメルマガ

「失敗しない初めてのワードプレスのコツ」のメルマガに興味を持っていただきありがとうございます。

【こんな方のためのメールマガジンです】
・ワードプレスを使いこなして集客したい
・ワードプレスでブログを始めたいけど何からやればいいかわからない
・継続的で安全にワードプレスの運営をしたい

そんな方に役立つメルマガです。