お洒落なデザインの囲み枠・・・使いたいけど使い方が分からなかった人に朗報です。WordPressだったら、テーマ（テンプレート）によっては、最初から使えるモノもあるのですが、中には囲み枠が使えないテーマもあります。
今回は、誰でも簡単に使えるお洒落な囲み枠の使い方について解説します。今回お伝えする方法は、WordPressだけに限らず、htmlの編集機能がついているブログでも使える方法です。あなたが、この記事を読むことで、お洒落な囲み枠が使える様になります。
是非、最後まで読んでくださいね。
Contents Menu
囲み枠とは
囲み枠とは、ブログに書いた文字に囲み枠をつけることで、文章を目立たせることができます。最近の囲み枠は、単なる四角で囲むだけではありません。お洒落なデザインの囲み枠もたくさんあります。
例えばこんな感じです。
枠にタイトルを入れることができる枠になります。枠の色も変えれるので、あなたのブログに合った色合いにすることも可能です。
では、次項で枠を入れる方法について解説しますね。
ブログ本文内に囲み枠を入れる方法
このブログは、WordPressを使っているので、WordPressで説明しますね。
①ブログ作成画面を開きます。
②入力モードを「テキスト」に切り替えます。
③作成画面にコピペ用のhtmlを貼りつけます。
貼りつけ用html
<fieldset style="border: 2px solid #000000; font-size: 100%;padding: 20px;">
<legend>タイトル</legend>ここに本文を入れます♪</fieldset>
④タイトル・本文を入力します。
⑤編集作業が終わったら完成です。
囲み枠のデザインはたくさんあります。ブログに載せるやり方は上記の通りなので、色々使ってみてくださいね。次項で、他のデザイン枠のhtmlをのせておきますね。
デザイン枠集
囲み枠も使い方次第で、読者の目を惹くことができます。この項では、幾つかのデザイン枠を載せておきます。コピペ用のhtmlも載せておくので、コピペして使ってください。
シンプル枠
シンプルな 枠ですが、文章の中に入れることで、伝えたい文章を強調することが出来ます。
コピペ用html
<div style="background: #FFFFFF; border-radius: 10px; border: 2px solid #111111; padding: 10px;">こんな感じの枠です</div>
枠を入れたい場所にコピペして使ってくださいね。最初は作業に慣れていないせいもあって、スムーズに作れないかもしれません。でも、安心してください。回数を重ねると、簡単にできるので今日から試してくださいね。
二重囲み枠
コピペ用html
<div style="border-radius: 10px; border: 4px double #000000; font-size: 100%; padding: 20px;">ここに本文を入れる</div>
背景色のみ枠（枠線なし）
枠線は無く、色のみの枠も中々のお洒落さんですね。色は「カラーコード」から選んで好きな色にできます。
コピペ用html
<div style="background: #ffcc99; border-left: #fceff2 solid 10px; border: #fceff2 solid 1px; font-size: 100%; padding: 20px;">
こんな感じです♪</div>
タイトル付き枠
こんな感じの枠もよく見かけますね。枠にタイトルがついているので結構、目立ちます。あなたのブログでも使ってみてくださいね。
WordPressユーザーはプラグインを使おう
WordPressのプラグイン「AddQuick Tag」を使う事で、ワンクリックで囲み枠を入れることができます。コピペするよりも簡単に出来るので、この機会に「AddQuick Tag」の使い方もおぼえておきましょう。コチラ のページでAddQuick Tagの使い方をまとめているので参考にしてくださいね。
枠の入れ過ぎには気をつけて
コピペだけで簡単に入れることが出来るので、ついつい使いすぎてしまうことがあるかもしれません。ですが、１つの記事でたくさん使いすぎると、何を強調しているのか、ぼやけてしまいます。
結局、何が言いたかったんだろう・・・と、読者に疑問を残してしまいます。読者にはっきり伝える為にも、あなたが使う際には使いすぎにならない程度に使ってくださいね。
今回のまとめ
今回は「ブログ初心者でもコピペで使えるお洒落な囲み枠の簡単な使い方」をテーマに解説しました。いかがでしたか？
文章に枠をつけることで、読者へのアピールができるので、上手く使っていきたいですね。あなたもこの機会に、お洒落な枠線を使ってブログで素敵な演出をしてくださいね。
編集後記
僕がWordPressを始めた頃は、無料テーマを使っていたので、囲み枠の使い方が分かりませんでした。そこから、時間がある時に調べながら使える様になりました。
その後、WordPressのテーマを有料のモノに変えたら、最初から囲み枠が用意されていたのには驚きました（笑）でも、有料テーマでも囲み枠の装備が整っていないこともあって、今回は備忘録を兼ねて記事にしてみました。
htmlの編集機能がついているブログなら、今回のお伝えした囲み枠は簡単に使えるので、あなたも是非、試してくださいね。
あなたの応援に感謝します♪
ブログ ✕ ライティングだけで生活することを目標にブログを書いています。全くのゼロ知識からのスタートでしたが、ようやく道筋が見えてきました。