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

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

文章や画像を枠で簡単に囲みたいときは、HTMLかCSSです

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

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

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

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

本記事内容

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

必要になるのは、HTML&CSSの知識!囲み枠のコピペが基本になっています。

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

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

どんな囲み枠にして装飾するか想像しながら作成します。後、「ビジュアル」タブと「テキスト」タブのクリック。

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

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

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


< PR >

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

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

囲み枠で装飾の方法

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

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

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

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

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

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


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

囲み枠の線の形状の種類

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

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

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

線の種類は[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;”>

枠の太さは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>

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

>>>コピペ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♪

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

文字は手書き風フォントの「はるひ学園」です。

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

ConoHa WINGだとTHE THORで手書き風フォントが複数使えるのです♪

【THE THOR】簡単に使用♪手書き風日本語フォント!ConoHa WingのWEBフォント

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

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

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

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

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪ 人気ブログランキング

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

もしもからの申請も保険と思ってしておきましょう♪

物販ならアソシエイトに応募と同時に(保険として)もしもからも申請することをお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

A8.netにとうろくして、無料の初心者用のアフィリエイトブログ作成の無料セミナーの参加をオススメします!

広告
広告
ブログの文章&画像の装飾方法まとめ♪囲み枠&トリミング紹介します
最新情報をチェックしよう!