文章や画像を枠で簡単に囲みたい
文章や画像の枠ってどんなのがあるの？
画像や文字ってソフトを用意しないと加工できないの？
この記事では、そんな疑問にこたえたいと思います。
- 文章の囲み枠のまとめ
- 画像の加工方法のまとめ
必要になるのは、ＨＴＭＬ＆ＣＳＳの知識！
と言いたいところですが、この記事ではコピペの使用が基本になっています。
必要になる知識は、コピーとペーストの知識です(笑)
後、「ビジュアル」タブと「テキスト」タブのクリック。
最後に必要なのは、想像力です(^^♪
どこを、どう変更するかまで説明しますので初心者さんでも簡単です♪
ブログの文章の囲み枠まとめ
テキストエディタにコードを追加して文章を囲み枠で装飾
コードのコピペ文の紹介の前に、コピペする場所ち色のコードの紹介からです♪
囲み枠で装飾の方法
「テキスト」タブをクリックして「テキストエリア」にコピペして使用します♪
自分で変更するのは、線の形状・線の太さ・線の色、そして囲った中の背景です。
自分で、数字と色コードを変更して自分好みを探してみてください(^^♪
囲み枠の色のコードを取得しよう
下の記事で自分の好きな色を選んで、コードをコピーして使用します♪
>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
囲み枠の線の形状の種類
線の種類は10種類から選択ししてコピペしてください。
- ｎｏｎｅ／ｈｉｄｄｅｎ なし
- ｓｏｌｉｄ 実線
- ｄｏｕｂｌｅ 二重線
- ｄｏｔｔｅｄ 丸い点線
- ｄａｓｈｅｄ 四角い点線
- ｇｒｏｏｖｅ/ｒｉｄｇｅ 立体枠
- ｉｎｓｅｔ/ｏｕｔｓｅｔ 立体枠
大きめの点で文章を囲み枠で装飾
線の種類は［ｄｏｔｔｅｄ」を選択
点線の大きさを10ｐｘにしました。
色は「pink」を指定しました。
＊——– コピペ文 ———-＊
<div style=”padding: 10px; margin-bottom: 10px; border: 10px dotted pink; border-radius: 10px; width: 80%;”> 点線の大きさを10ｐｘにしました。 色は「pink」を指定しました。 </div>
実線で文章を囲み枠で装飾
線の種類は［ｓｏｌｉｄ 」を選択
枠線の太さは10ｐｘにしてみました。
色は「#c2e6f2」に指定しました。
＊——– コピペ文 ———-＊
<div style=”padding: 10px; margin-bottom: 10px; border: 10px solid #c2e6f2; width: 80%;”>
枠線の太さは10ｐｘにしてみました。
色は「#c2e6f2」に指定しました。
</div>
二重線で文章を囲み枠で装飾
線の種類は「ｄｏｕｂｌｅ」を選択
枠の太さは18ｐｘにしてみました。
枠線の色は「#f5e6e6」に指定しました。
背景色は「#f5e6e6」に指定しました。
＊——– コピペ文 ———-＊
<div style=”padding: 10px; margin-bottom: 10px; border: 18px double #bd0921; width: 80%; background-color: #f5e6e6;”>
枠の太さは18ｐｘにしてみました。
枠線の色は「#f5e6e6」に指定しました。
</div>
他の枠線のコピペ文とコードの説明など、詳しくは下の記事で紹介しています♪
>>>コピペOK【文章加工】文章を囲み枠で装飾♪基本編
文章を囲み枠で囲った中にさらに囲み枠を入れる
可愛い感じになります♪
囲ってみました(^^♪
先に紹介した囲み枠の中に、もう一つ囲み枠をセットしてあります♪
＊——– コピペ文 ———-＊
<div style=”padding: 20px; background: #800000; width: 350px; height: 190px;”>
<div style=”padding: 20px; border: 5px dashed #FFF; border-radius: 10px; width: 310px; height: 150px; background: #800000;”>
<span style=”color: #fcedf4; font-size: 18pt;”>文章を二重に 囲ってみました(^^♪</span>
</div> </div>
この囲み枠の色違いのコピペ文とコードの紹介は下の記事で紹介しています♪
>>>コピペOK【文章加工】文章を囲み枠で可愛く装飾♪可愛い枠編
プラグインを追加してワンクリックで文章を囲み枠で装飾
使用するプラグインは「 AddQuicktag 」です。
「 AddQuicktag 」プラグインは、HTMLコードを前もって登録しておき、使う時はワンクリックで実行できます(^^♪
設定を初めにしておけば、ワンクリックで簡単に文章を囲み枠で囲んでくれるのです。
ワードプレスプラグインの「 AddQuicktag 」をインストールして有効化します。
設定でコピペ文のコードをコピペして、コードの名前を決めて入力します。
コード入力の横にあるビジュアルエディタ-にチェックを入れると「 AddQuicktag 」の小窓が表示されるようになります。
文章を選択した状態で登録したコピペ文を選択してクリックすると文章が囲まれます。
詳しい設定は下の記事で紹介しています♪
>>>コピペOK【文章加工】文章を囲み枠で装飾♪基本プラグイン編
プラグインを使って枠線で囲った中にさらに囲み枠を入れる
使用するプラグインは「 AddQuicktag 」です。
プラグインを使用して、簡単にワンクリックで文章を二重に囲み枠で囲みます。
コピペ文が二重になるので、コードが長くなります。
詳しい設定は下の記事で紹介しています♪
>>>コピペOK【文章加工】文章を囲み枠で可愛く装飾♪可愛い枠プラグイン編
画像編集ソフトを使わないブログの画像加工まとめ
画像加工ソフトを使用しないで、コードで画像のみえかたを指定する方法を紹介します♪
画像を丸くトリミングして表示
画像は、通常四角いと思います(笑)
四角い画像をの角を丸くして、丸い画像にします(^^♪
用意した画像は、かわいいメガネッ子ワンちゃん♪
この画像の角を丸くトリミングすると
画像を丸くトリミングする2つの方法
- CSSを使って画像を丸くトリミングして表示
- HTMLで指定して画像を丸くトリミングして表示
CSSを使ってブログに使う画像を丸くトリミングして表示
一般的によく説明されている方法です。
CSSにコードを前もって登録して置き、画像詳細の画面で「画像CSSクラス」に登録したコード名を指定して使用します。
詳しい設定は下の記事で紹介しています♪
>>>コピペOK【画像加工】画像を丸くトリミング♪画像編集ソフトはいらない？
HTMLで指定してブログに使う画像を丸くトリミングして表示
段落の背景に画像を使って丸くします。
私は、この方が好きです(￣▽￣;)
画像サイズごとにｃｓｓを準備するのが面倒・・・・
という訳で、この方法で必要になるのは画像のURLです。
どこかに、画像を張り付けてください。
「テキスト」タブをクリックして、張り付けた画像を見つけてください。
↓↓↓↓この画像のコードから情報をもらいます。
使う情報は、縦のサイズ、横のサイズ、アドレスです。
- width=”472“（横のサイズ）
- height=”315“（縦のサイズ）
- /wp-＊＊＊/＊＊＊/＊＊＊/＊＊/＊＊＊.jpg“（アドレス）
使用したい画像の、縦と横のサイズとURLを下のコピペ文にコピペして使用してください。
＊——– コピペ文 ———-＊
<div style=”background-repeat: no-repeat; width: 472px; height: 315px; border-radius: 50%; background-image: url(‘/wp-＊＊＊/＊＊＊/＊＊＊＊/＊＊/＊＊＊.jpg’);”> </div>
枠線を付けたい時は、この文に「border」の指定を追加します。
＊——– コピペ文 ———-＊
<div style=”border: 10px solid pink; background-repeat: no-repeat; width: 472px; height: 315px; border-radius: 50%; background-image: url(‘/wp-***/****/****/**/***.jpg’);”> </div>
この画像が楕円な理由は、画像が横長だからです。
もし、真ん丸にしたい時は正方形の画像が必要になります。
URLの記述を間違えると画像が表示されないので気を付けてください。
ドメイン部分から下の「/」の部分から下をコピペして「’」で囲んでください。
ブログに使う画像に文字を重ねる
画像に文字を表示させたい時にも、画像ソフトは使いません。
画像に文字を重ねる2つの方法
- 画像と文字を重ねる
- 段落の背景画像に画像を表示させて文字を書く
画像と文字を重ねる
親要素を画像、子要素を文字という風にブロックにして表示させる方法です。
画像と文字を重ねる詳しい方法は下の記事で紹介しています♪
>>>コピペOK【画像加工】画像に文字を重ねる♪画僧編集ソフトはいらない？
段落の背景画像に画像を表示させて文字を書く
画像を丸く表示の時にした方法の応用編です(￣▽￣;)
段落の背景として画像を表示させて、文字を書けばOK♪
こちらの方が楽かなと思って紹介しました（￣▽￣;)
文字は手書き風フォントの「はるひ学園」です。
こんな感じですね(^^♪
ConoHa WINGだとTHE THORで手書き風フォントが複数使えるのです♪
【THE THOR】簡単に使用♪手書き風日本語フォント！ConoHa WingのWEBフォント
ブログの文章＆画像の装飾方法まとめ♪囲み枠＆トリミング まとめ
文章を画像の記事をまとめて、ちょこっと追加もして記事を作成してみました(^^♪
囲み枠や画像を真ん中表示にしたい時はコピペ文の前に「<div align=”center”>」を追加してください。
そしてコピペ文の後ろに「</div >」を追加してください(^^♪。
ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
人気ブログランキング
私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。
もしもからの申請も保険と思ってしておきましょう♪
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。
ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/