ブログのボックス（囲み枠）の作り方
このページは、ブログ記事の「ポイント」「注意」「メモ」「まとめ」などを囲むボックス（囲み枠）を無料で作るツールです。26種類のデザインから選び、色・タイトル・本文を変えるだけで、HTMLとCSSをコピペして使えます。プラグインは必要ありません。
3ステップでボックスを作る
- デザインを選ぶ：シンプル枠・二重線・付箋・ノート罫線・タイトル付き・ポイント・注意・Q&Aなど、26種類の一覧から選びます。迷ったら「おまかせ」ボタンで1つ選ばれます。
- タイトルと本文を入れる：本文は1行ごとに段落になります。「箇条書き」「チェック」「番号付き」を選ぶと、1行が1項目のリストになります。
- 色を整えてコピーする：テーマカラーを選ぶか、好きな色を指定して「コピー」を押します。
用途別のおすすめデザイン
| 用途 | おすすめのデザイン |
|---|---|
| 記事の要点・結論 | ポイント、タイトル付き（帯）、左ライン |
| 注意・デメリット | 注意、悪い例、二重線（赤） |
| 補足・豆知識 | メモ、付箋、背景塗り |
| 手順・持ち物の確認 | チェックリスト、ノート罫線 |
| 記事の冒頭のまとめ | タイトル付き（枠上）、タイトル付き（タブ） |
| 読者の疑問への回答 | Q&A |
1つの記事で使うボックスは2〜3種類までにすると、デザインに統一感が出ます。注意は赤、ポイントは黄、補足はグレーのように、意味ごとに色を決めておくのもおすすめです。
「インライン」と「CSSクラス」の違い
インラインは、見た目の指定をHTMLに直接書き込む形式です。CSSの登録が不要で、どのブログにもそのまま貼れます。
CSSクラスは、見た目をCSSとして分けて出力します。CSSをサイトに1回登録すれば、記事に貼るHTMLが短くなり、同じボックスを何度でも使えます。あとで色を変えたいときも、CSSを1か所直すだけで全記事のボックスが変わります。
テーマのボックス機能との使い分け
Cocoon・SWELL・AFFINGERなど、WordPressのテーマによってはボックスの機能が最初から入っています。テーマの機能は手軽な反面、テーマを変えるとデザインが崩れたり、表示されなくなったりすることがあります。このツールで作ったボックスは、見た目の指定をHTMLやCSSとして持っているので、テーマを変えても同じデザインで表示されます。はてなブログのように、ボックスの機能がないブログサービスでも使えます。
ブログへの貼り方
- WordPress：ブロックエディタで「＋」から「カスタムHTML」ブロックを追加して貼り付けます。CSSクラス形式の場合は、CSSを「外観」→「カスタマイズ」→「追加CSS」に貼ります。
- はてなブログ：記事の編集画面で「HTML編集」タブに切り替えて貼り付けます。CSSクラス形式の場合は、CSSを「デザイン」→「カスタマイズ」→「デザインCSS」に貼ります。
貼り付けたあとに本文を書き換えたい場合は、HTMLの中の文章部分だけを編集してください。タグや style の部分を消すとデザインが崩れることがあります。
よくある質問
- 無料で使えますか？
- はい、すべてのデザインを無料で使えます。会員登録も必要ありません。
- テーマのCSSとぶつかりませんか？
- インライン形式は要素に直接スタイルを書き込むため、テーマの影響を受けにくくなっています。CSSクラス形式で既存のクラス名と重なる場合は、「クラス名の先頭」を変えてください。
- 入力した内容は保存されますか？
- このブラウザの中にだけ自動で保存されます。サーバーには送信されません。
- スマホでも崩れませんか？
- ボックスは記事の幅に合わせて伸び縮みします。プレビューの「スマホ」ボタンで表示を確認できます。