ブログカスタム

ブログ初心者でもコピペで使えるお洒落な囲み枠の簡単な使い方

お洒落なデザインの囲み枠・・・使いたいけど使い方が分からなかった人に朗報です。WordPressだったら、テーマ(テンプレート)によっては、最初から使えるモノもあるのですが、中には囲み枠が使えないテーマもあります。

 

今回は、誰でも簡単に使えるお洒落な囲み枠の使い方について解説します。今回お伝えする方法は、WordPressだけに限らず、htmlの編集機能がついているブログでも使える方法です。あなたが、この記事を読むことで、お洒落な囲み枠が使える様になります。

 

是非、最後まで読んでくださいね。

 

 

 

囲み枠とは

 

囲み枠とは、ブログに書いた文字に囲み枠をつけることで、文章を目立たせることができます。最近の囲み枠は、単なる四角で囲むだけではありません。お洒落なデザインの囲み枠もたくさんあります。

 

例えばこんな感じです。

タイトル

ここに本文を入れます♪

 

枠にタイトルを入れることができる枠になります。枠の色も変えれるので、あなたのブログに合った色合いにすることも可能です。

 

では、次項で枠を入れる方法について解説しますね。

 

 

 

ブログ本文内に囲み枠を入れる方法

このブログは、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の使い方をまとめているので参考にしてくださいね。

 

 

 

枠の入れ過ぎには気をつけて

 

コピペだけで簡単に入れることが出来るので、ついつい使いすぎてしまうことがあるかもしれません。ですが、1つの記事でたくさん使いすぎると、何を強調しているのか、ぼやけてしまいます。

 

結局、何が言いたかったんだろう・・・と、読者に疑問を残してしまいます。読者にはっきり伝える為にも、あなたが使う際には使いすぎにならない程度に使ってくださいね。

 

 

 

今回のまとめ

今回は「ブログ初心者でもコピペで使えるお洒落な囲み枠の簡単な使い方」をテーマに解説しました。いかがでしたか?

 

文章に枠をつけることで、読者へのアピールができるので、上手く使っていきたいですね。あなたもこの機会に、お洒落な枠線を使ってブログで素敵な演出をしてくださいね。

 

 

 

編集後記

僕がWordPressを始めた頃は、無料テーマを使っていたので、囲み枠の使い方が分かりませんでした。そこから、時間がある時に調べながら使える様になりました。

 

その後、WordPressのテーマを有料のモノに変えたら、最初から囲み枠が用意されていたのには驚きました(笑)でも、有料テーマでも囲み枠の装備が整っていないこともあって、今回は備忘録を兼ねて記事にしてみました。

 

htmlの編集機能がついているブログなら、今回のお伝えした囲み枠は簡単に使えるので、あなたも是非、試してくださいね。

 

 

 

では、今日も素敵な情報発信がんばりましょう。最後まで読んで頂きありがとうございました。このブログの感想・ご意見・質問・相談は コチラ からお願いしますね。

 

 

にほんブログ村 小遣いブログ ブログアフィリエイトへ

あなたの応援に感謝します♪

-ブログカスタム

Copyright© ブログ武器 Ver.2 , 2021 All Rights Reserved Powered by AFFINGER5.