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

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

コピペで使える枠

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

外枠の線のみ

表示例

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

HTML

<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>

1日で作るワードプレス講座

ホームページを制作しながら、ワードプレスの操作方法を学んでいく講座です。

HTMLやCSS、PHPなどの専門的な知識は一切必要なく見やすいサイトが出来上がります。

マンツーマンのワークショップでノートパソコンを持ち込んで作業します。
基本的なワードプレスの操作を学び、これからのサイト運営にお役立てください。