コピーして使える画像背景のバナー風囲み枠1

お手軽な囲み枠の使い方

 

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

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

 ※貼り付けるのは「テキスト」(HTML表示)のほうです。

 ※ボックス内でダブルクリックしてもグレー背景・黒文字になります。

 

コピーして使える簡単な囲み枠1│タイトルなし│実践│白背景

コピーして使える簡単な囲み枠2│タイトルなし│点線│白背景

コピーして使える簡単な囲み枠3│タイトルなし│実線│カラー背景

コピーして使える簡単な囲み枠4│タイトルなし│点線│カラー背景

コピーして使える簡単な囲み枠5│タイトルなし│いろいろ

コピーして使える簡単な囲み枠6│タイトルあり│実践│四角、角丸

コピーして使える簡単な囲み枠7│タイトルあり│いろいろ

※一部一般公開しておりますが、メンバー限定公開の項目があります。よろしければこちらからログイン、または無料メンバー登録をして続きをご覧ください。

 

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

画像囲み枠の使い方


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

 

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

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

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

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

画像のURLとは?

 

ネイビーステッチ


ここに本文

ここに本文

背景画像はこちらから。

 

オレンジステッチ


ここに本文
ここに本文

背景画像はここから。

 

ブラウンステッチ


ここに本文
ここに本文

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

 

ピンクステッチ


ここに本文
ここに本文

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

 

ブラックステッチ


ここに本文
ここに本文

背景画像はこちらから。

 

※画像の下に「ループ可」と書いていないものは、画像のタテの長さより長く伸ばすと、画像の境界線が見えてしまいます。

※「背景画像はこちら」から画像の大きさをご確認の上、必ずダウンロードしてお使いください。

※ネットで素材を探す場合、「シームレス」という画像ですと、継ぎ目がわからず、いくらでも大きく引き伸ばせます。

※本文を入力する際、改行すると囲み枠が分割してしまう場合があります。その場合は先に改行無しで入力してから

WordPressは「ビジュアル」表示を「テキスト」表示に

アメブロは「通常表示」を「HTML表示」に切り替えて、

改行したい箇所に以下の改行タグをコピーして貼り付けてください。

 

 

 

随時手順動画もアップしていきます。

お楽しみに。