テーマ「Lightning」ならコピペで使える「枠」の作り方

私が千葉で開催しているマンツーマンレッスンの「ワードプレスでホームページ制作講座」で採用しているテーマ「Lightning」では、CSSフレームワークのBootstrapを採用しています。

コピペで使える枠

HTMLを投稿画面の「テキスト」にコピペしてご利用ください。

外枠の線のみ

表示例

外枠の線のみのシンプルな枠ですね。ここにテキストを入れましょう。

HTM

<div class="panel panel-default"> <div class="panel-body"> 外枠の線のみのシンプルな枠ですね。ここにテキストを入れましょう。 </div> </div>

グレー背景色の枠

表示例

グレーの背景色が入った枠組みです

HTML

<div class="well">グレーの背景色が入った枠組みです</div>

上に見出しがつく枠

表示例

タイトル
テキストをここへ

HTML

<div class="panel panel-default">
<div class="panel-heading">タイトル</div>
<div class="panel-body">テキストをここへ</div>
</div>

パネルの色を変更した枠組み

表示例

タイトル
テキストをここへ

HTML

<div class="panel panel-primary"> <div class="panel-heading">タイトル</div> <div class="panel-body"> テキストをここへ </div> </div>

表示例

タイトル
テキストをここへ

HTML

<div class="panel panel-success">
<div class="panel-heading">タイトル</div>
<div class="panel-body">テキストをここへ</div>
</div>

表示例

タイトル
テキストをここへ

HTML

<div class="panel panel-warning">
<div class="panel-heading">タイトル</div>
<div class="panel-body">テキストをここへ</div>
</div>

表示例

タイトル
テキストをここへ

HTML

<div class="panel panel-info">
<div class="panel-heading">タイトル</div>
<div class="panel-body">テキストをここへ</div>
</div>

表示例

タイトル
テキストをここへ

HTML

<div class="panel panel-danger">
<div class="panel-heading">タイトル</div>
<div class="panel-body">テキストをここへ</div>
</div>

この記事を書いた人

佐々木亜紀
佐々木亜紀
株式会社アドプラス 代表取締役 
千葉コワーキングスペース201オーナー

ウェブ制作8年、実店舗運営5年。
ワードプレス制作と実店舗運営の経験を生かして集客のためのワードプレスの基礎構築講座を主宰。

中小企業庁
ミラサポ専門家派遣事業登録専門家
千葉県産業振興センター登録専門家

講座MENU

制作前の企画作りからワードプレスの制作、集客方法を1日でぎゅっと詰め込んで習得します。

開催日時時間予約状況
10月10日(火)10:30〜16:00満席
10月26日(金)10:30〜16:00満席
10月29日(月)10:30〜16:00満席
11月22日(木)10:30〜16:00満席
11月28日(水)10:30〜16:00満席


11月の予約は終了いたしました。12月の予定がまだ決まっておりません。ご希望の方は個別に調整させていただきますので、メールにてお問合わせください。