ブログの文章&画像の装飾方法まとめ♪囲み枠&トリミング

囲み枠&トリミングで文章&画像加工

 

文章や画像を枠で簡単に囲みたい

文章や画像の枠ってどんなのがあるの?

画像や文字ってソフトを用意しないと加工できないの?

 

この記事では、そんな疑問にこたえたいと思います。

本記事内容

  1. 文章の囲み枠のまとめ
  2. 画像の加工方法のまとめ

必要になるのは、HTML&CSSの知識!

と言いたいところですが、この記事ではコピペの使用が基本になっています。

必要になる知識は、コピーとペーストの知識です(笑)

後、「ビジュアル」タブと「テキスト」タブのクリック。

最後に必要なのは、想像力です(^^♪

どこを、どう変更するかまで説明しますので初心者さんでも簡単です♪

ブログの文章の囲み枠まとめ

テキストエディタにコードを追加して文章を囲み枠で装飾

コードのコピペ文の紹介の前に、コピペする場所ち色のコードの紹介からです♪

囲み枠で装飾の方法

「テキスト」タブをクリックして「テキストエリア」にコピペして使用します♪

テキストエリアに囲み枠&トリミングのコードを張り付け

自分で変更するのは、線の形状・線の太さ・線の色、そして囲った中の背景です。

自分で、数字と色コードを変更して自分好みを探してみてください(^^♪

囲み枠の色のコードを取得しよう

下の記事で自分の好きな色を選んで、コードをコピーして使用します♪

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

囲み枠の線の形状の種類

線の種類は10種類から選択ししてコピペしてください。

none/hidden なし   double 二重線
dotted 丸い点線   groove/ridge 立体枠
dashed 四角い点線   inset/outset
solid 実線  

 

大きめの点で文章を囲み枠で装飾

線の種類は[dotted」を選択

点線の大きさを10pxにしました。

色は「pink」を指定しました。

<!-------- コピペ文  ---------->
<div style="padding: 10px; margin-bottom: 10px; border: 10px dotted pink; border-radius: 10px; width: 80%;">
点線の大きさを10pxにしました。
色は「pink」を指定しました。
</div>
<!----------------------------------->

実線で文章を囲み枠で装飾

線の種類は[solid 」を選択

枠線の太さは10pxにしてみました。

色は「#c2e6f2」に指定しました。

<!-------- コピペ文  ---------->
<div style="padding: 10px; margin-bottom: 10px; border: 10px solid #c2e6f2; width: 80%;">
枠線の太さは10pxにしてみました。
色は「#c2e6f2」に指定しました。
</div>
<!------------------------------------>

二重線で文章を囲み枠で装飾

線の種類は「double」を選択

枠の太さは18pxにしてみました。

枠線の色は「#f5e6e6」に指定しました。

背景色は「#f5e6e6」に指定しました。

<!-------- コピペ文  ---------->
<div style="padding: 10px; margin-bottom: 10px; border: 18px double #bd0921; width: 80%; background-color: #f5e6e6;">
<div>
枠の太さは18pxにしてみました。
枠線の色は「#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>
</div>
<!------------------------------------>

この囲み枠の色違いのコピペ文とコードの紹介は下の記事で紹介しています♪

>>>コピペOK【文章加工】文章を囲み枠で可愛く装飾♪可愛い枠編

プラグインを追加してワンクリックで文章を囲み枠で装飾

使用するプラグインは「 AddQuicktag 」です。

「 AddQuicktag 」プラグインは、HTMLコードを前もって登録しておき、使う時はワンクリックで実行できます(^^♪

設定を初めにしておけば、ワンクリックで簡単に文章を囲み枠で囲んでくれるのです。

ワードプレスプラグインの「 AddQuicktag 」をインストールして有効化します。

囲み枠&トリミングに使うプラグインAddQuicktag

設定でコピペ文のコードをコピペして、コードの名前を決めて入力します。

コード入力の横にあるビジュアルエディタ-にチェックを入れると「 AddQuicktag 」の小窓が表示されるようになります。囲み枠&トリミングに使うプラグインAddQuicktagの使い方

文章を選択した状態で登録したコピペ文を選択してクリックすると文章が囲まれます。

詳しい設定は下の記事で紹介しています♪

>>>コピペOK【文章加工】文章を囲み枠で装飾♪基本プラグイン編

プラグインを使って枠線で囲った中にさらに囲み枠を入れる

使用するプラグインは「 AddQuicktag 」です。

プラグインを使用して、簡単にワンクリックで文章を二重に囲み枠で囲みます。

コピペ文が二重になるので、コードが長くなります。

詳しい設定は下の記事で紹介しています♪

>>>コピペOK【文章加工】文章を囲み枠で可愛く装飾♪可愛い枠プラグイン編

 

画像編集ソフトを使わないブログの画像加工まとめ

画像加工ソフトを使用しないで、コードで画像のみえかたを指定する方法を紹介します♪

画像を丸くトリミングして表示

画像は、通常四角いと思います(笑)

四角い画像をの角を丸くして、丸い画像にします(^^♪

用意した画像は、かわいいメガネッ子ワンちゃん♪

囲み枠&トリミング前の画像

この画像の角を丸くトリミングすると

画像を丸くトリミングする2つの方法

  • CSSを使って画像を丸くトリミングして表示
  • HTMLで指定して画像を丸くトリミングして表示

CSSを使ってブログに使う画像を丸くトリミングして表示

一般的によく説明されている方法です。

CSSにコードを前もって登録して置き、画像詳細の画面で「画像CSSクラス」に登録したコード名を指定して使用します。

詳しい設定は下の記事で紹介しています♪

>>>コピペOK【画像加工】画像を丸くトリミング♪画像編集ソフトはいらない?

HTMLで指定してブログに使う画像を丸くトリミングして表示

段落の背景に画像を使って丸くします。

私は、この方が好きです( ̄▽ ̄;)

画像サイズごとにcssを準備するのが面倒・・・・

という訳で、この方法で必要になるのは画像のURLです。

どこかに、画像を張り付けてください。

「テキスト」タブをクリックして、張り付けた画像を見つけてください。

↓↓↓↓この画像のコードから情報をもらいます。

<img class=”alignnone size-medium wp-image-5492″ src=”https://***wp-***/***/***/**/***.jpg” alt=”” width=”472″ height=”315″ />

使う情報は、縦のサイズ、横のサイズ、アドレスです。

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

こちらの方が楽かなと思って紹介しました( ̄▽ ̄;)

 

 

 

 

こんな感じですね(^^♪

ブログの文章&画像の装飾方法まとめ♪囲み枠&トリミング まとめ

文章を画像の記事をまとめて、ちょこっと追加もして記事を作成してみました(^^♪

囲み枠や画像を真ん中表示にしたい時はコピペ文の前に「<div align=”center”>」を追加してください。

そしてコピペ文の後ろに「</div >」を追加してください(^^♪。

 

/TOOL/TOP/THE THOR

最新情報をチェックしよう!