囲み枠

コピーして使える簡単な囲み枠⑧│画像背景

お手軽な囲み枠の使い方

使いたい囲み枠が見つかったら

  1. その下のコードボックスのタイトルバーの「<>」をクリックしてグレー背景・黒文字にしてから
  2. 」をクリックして、コードを全選択します。
  3. 「Ctrl」+「C」キーを押してコピーして、ご自身のサイトに貼り付けてください。

 ※貼り付けるのは「テキスト」(HTML表示)のほうです。
 ※ボックス内でダブルクリックしてもグレー背景・黒文字になります。

背景二重│半透明白│ステッチあり

画像囲み枠の使い方

  1. 使いたい囲み枠の下のタグをメモ帳などにコピーする
      (いきなりブログなどに貼らずに、一旦メモ帳などに貼り付けてから使う)
  2. 「背景画像はこちら」のリンクを開く
  3. 画像の上で右クリックし、「名前を付けて画像を保存」する
  4. 自分のブログやサイトに画像をアップロードする
  5. 画像のURLをコピーする※
  6. 囲み枠のタグの中にある「ここに画像のURL」と置き換える ※( )カッコは消さない
  7. 編集したタグを自分のサイトに貼りつける

画像のURLのコピーの仕方(アメブロの場合)

  1. アメブロの画像フォルダに画像をアップロードします
  2. アップした画像をクリックし、画像を拡大表示させます
  3. 画像の上で右クリックし、「画像アドレスをコピー」を選びます
     これでコピー完了

画像のURLのコピーの仕方(WordPressの場合)

※WordPressの場合は、メディアライブラリーの中の画像をクリックし、「URL」を全てコピーします。

WordPressのメディアのURLをコピーする

ネイビーステッチ

ここに本文

ここに本文

背景画像はこちらから。

オレンジステッチ

ここに本文
ここに本文

背景画像はここから。

ブラウンステッチ

ここに本文
ここに本文

背景画像はこちらから。(ループ可)

ピンクステッチ

ここに本文
ここに本文

背景画像はこちらから。(ループ可)

ブラックステッチ

ここに本文
ここに本文

背景画像はこちらから。

使用上の注意

  • 画像の下に「ループ可」と書いていないものは、画像のタテの長さより長く伸ばすと、画像の境界線が見えてしまいます。
  • 「背景画像はこちら」から画像の大きさをご確認の上、必ずダウンロードしてお使いください。
  • ネットで素材を探す場合、「シームレス」という画像ですと、継ぎ目がわからず、いくらでも大きく引き伸ばせます。
  • 本文を入力する際、改行すると囲み枠が分割してしまう場合があります。その場合は先に改行無しで入力してから、WordPressは「ビジュアル」表示を「テキスト」表示に、アメブロは「通常表示」を「HTML表示」に切り替えて、改行したい箇所に以下の改行タグをコピーして貼り付けてください。

 

 

お問い合せ

サービス一覧

 

 

ABOUT ME
Mizuna
『先生』と呼ばれる講師・コンサルタントのプロモーション環境を構築します。あなたのコンテンツを最大限に活用するため、情報発信、コミュニティ、コンテンツ制作、セールスのWEBインフラをワンストップで構築します。