メッセージボード その8

メッセージボード その8

カスタマイズ 遊び
2019/05/21
6
vanillaice (Akira)
vanillaice (Akira)
InstructionMessageBoardHTMLCSS初心者向けPlayground

コピペで使える装飾ボードです。

お遊びシリーズは Playground のタグにまとめています。

旧投稿画面をお使いの方は 改行の扱い「HTMLのみ」 に設定してください。

改行「自動」でもできますが、ソースコードをひと繋ぎ改行不可で書く必要が生じ、メンテナンスが大変だと思います。HTMLのみにすると改行したい文章末尾に <br> と書かないと折り返しませんのでご注意を。

CSSはスタイルシートに記載するか、スタイル用JSとして記事内に記載するか選択してください。

利用頻度が低い場合にはスタイルシートではなく記事内でのJS掲載が良いかもしれません。両方ではなくいずれか一方を選ぶようにしてください。
また、長文掲載には向きません のであくまでもメッセージ的・短文での利用をおすすめします。

ポイント画の部分はlazyloadingできるようにbackgroundではなくimgで記載してあります。記事内でlazyloadingをご利用の方は適用をおすすめします。

素材のダウンロード

装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。

それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。

YouTube装飾とお揃いですので、セットで利用する場合は同じ画像を二度DLする必要はありません。

メッセージボードいろいろ

文章をp要素でマークアップしたい方は テキスト の部位を <p>テキスト</p> に変更してください。

赤黒背景

あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。

とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。

この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。

【html】 

<div class="wall-8-1" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  テキスト
</div>

横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像 1箇所) 

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-8-1{margin:30px auto;padding:1.5em;background:url(画像URL) right bottom /70% auto no-repeat,linear-gradient(to bottom,black,rgb(128,0,0));color:white}.wall-8-1 p:first-of-type{margin-top:0!important}.wall-8-1 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像 1箇所) 

.wall-8-1 {
  margin: 30px auto;
  padding: 1.5em;
  background: url(画像URL) right bottom /70% auto no-repeat,
              linear-gradient(to bottom, black, rgb(128,0,0));
  color: white;
}

.wall-8-1 p:first-of-type {
  margin-top: 0 !important;
}

.wall-8-1 p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

画像 (372×332)

流木

あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。

とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。

この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。

【html】
注) 画像アドレスを入れる箇所あり (画像b 1箇所) 

<div class="wall-8-2" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-8-2-imagewrapper">
    <img class="wall-8-2-image" src="画像bURL" alt="">
  </div>
  <div class="wall-8-2-border">
    <div class="wall-8-2-border2">
      <div class="wall-8-2-border2">
        <div class="wall-8-2-text">
          テキスト
        </div>
      </div>
    </div>
  </div>
</div>

横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所) 

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-8-2{display:flex;justify-content:space-between;margin:30px auto}.wall-8-2-imagewrapper{position:relative;z-index:2;width:80%;margin-right:-80%}.wall-8-2-image{width:100%}.wall-8-2-border{width:100%;margin-top:8%}.wall-8-2-border2{width:100%;padding:3%;border:1px solid white;background:url(画像aURL)}.wall-8-2-border3{padding:2%;border:1px solid white;background:rgba(255,255,255,.2)}.wall-8-2-text{padding:1.5em 1.5em 1.5em 18%;border:1px solid white;background:rgba(255,255,255,.7);color:rgb(51,51,51)}.wall-8-2 p:first-of-type{margin-top:0!important}.wall-8-2 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所) 

.wall-8-2 {
  display: flex;
  justify-content: space-between;
  margin: 30px auto;
}

.wall-8-2-imagewrapper {
  position: relative;
  z-index: 2;
  width: 80%;
  margin-right: -80%;
}

.wall-8-2-image {
  width: 100%;
}

.wall-8-2-border {
  width: 100%;
  margin-top: 8%;
}

.wall-8-2-border2 {
  width: 100%;
  padding: 3%;
  border: 1px solid white;
  background: url(画像aURL);
}

.wall-8-2-border3 {
  padding: 2%;
  border: 1px solid white;
  background: rgba(255,255,255,.2);
}

.wall-8-2-text {
  padding: 1.5em 1.5em 1.5em 18%;
  border: 1px solid white;
  background: rgba(255,255,255,.7);
  color: rgb(51,51,51);
}

.wall-8-2 p:first-of-type {
  margin-top: 0 !important;
}

.wall-8-2 p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

画像a (129×150)
画像b (500×541)

リボン・蝶々・薔薇

あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。

とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。

この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。

【html】
注) 画像アドレスを入れる箇所あり (画像a 1箇所) 

<div class="wall-8-3" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-8-3-border">
    <div class="wall-8-3-text">
      テキスト
    </div>
  </div>
  <div class="wall-8-3-imagewrapper">
    <img class="wall-8-3-image" src="画像aURL" alt="">
  </div>
</div>

横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。

【スタイル用JS】(記事末尾に記載) 

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-8-3{display:flex;flex-direction:column;align-items:center;margin:30px auto;color:white}.wall-8-3-border{position:relative;border:3px groove rgb(128,0,0);background:black}.wall-8-3-border::before{content:"";box-sizing:border-box;display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:auto;border:12px groove rgb(128,0,0)}.wall-8-3-border::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:calc(100% - 24px);height:calc(100% - 24px);margin:auto;border:3px groove rgb(128,0,0)}.wall-8-3-text{padding:calc(1.5em + 18px) calc(1.5em + 18px) 15%}.wall-8-3-imagewrapper{position:relative;z-index:2;width:80%;margin-top:-15%;pointer-events:none}.wall-8-3-image{width:100%}.wall-8-3 p:first-of-type{margin-top:0!important}.wall-8-3 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載) 

.wall-8-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto;
}

.wall-8-3-border {
  position: relative;
  border: 3px groove rgb(128,0,0);
  background: black;
}

.wall-8-3-border::before {
  content: "";
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  border: 12px groove rgb(128,0,0);
}

.wall-8-3-border::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  margin: auto;
  border: 3px groove rgb(128,0,0);
}

.wall-8-3-text {
  padding: calc(1.5em + 18px) calc(1.5em + 18px) 15%;
  color: white;
}

.wall-8-3-imagewrapper {
  position: relative;
  z-index: 2;
  width: 80%;
  margin-top: -15%;
  pointer-events: none;
}

.wall-8-3-image {
  width: 100%;
}

.wall-8-3 p:first-of-type {
  margin-top: 0 !important;
}

.wall-8-3 p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

画像a (400×172)

ピンクの薔薇

あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。

とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。

この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。

【html】
注) 画像アドレスを入れる箇所あり (画像b 1箇所) 

<div class="wall-8-4" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-8-4-border">
    <div class="wall-8-4-border2">
      <div class="wall-8-4-text">
        テキスト
      </div>
    </div>
  </div>
  <div class="wall-8-4-imagewrapper">
    <img class="wall-8-4-image" src="画像bURL" alt="">
  </div>
</div>

横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所) 

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-8-4{display:flex;justify-content:space-between;align-items:flex-start;margin:30px auto}.wall-8-4-border{position:relative;width:92%;margin-top:8%;padding:15px;border:3px groove rgb(112,57,83);background:url(画像aURL)}.wall-8-4-border::before{content:"";box-sizing:border-box;display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:calc(100% - 4px);height:calc(100% - 4px);margin:auto;border:2px dotted rgb(112,57,83)}.wall-8-4-border::after{content:"";box-sizing:border-box;display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:calc(100% - 12px);height:calc(100% - 12px);margin:auto;border:6px dotted rgb(112,57,83)}.wall-8-4-border2{border:2px dotted rgb(112,57,83);background:rgba(0,0,0,.3)}.wall-8-4-text{position:relative;z-index:10;padding:1.5em 8% 1.5em 1.5em;color:white;text-shadow:rgb(40,40,40) 1px 1px 0,rgb(40,40,40) -1px -1px 0,rgb(40,40,40) -1px 1px 0,rgb(40,40,40) 1px -1px 0,rgb(40,40,40) 0 1px 0,rgb(40,40,40) 0 -1px 0,rgb(40,40,40) -1px 0 0,rgb(40,40,40) 1px 0 0}.wall-8-4-imagewrapper{position:relative;z-index:2;width:40%;margin-left:-32%}.wall-8-4 p:first-of-type{margin-top:0!important}.wall-8-4 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所) 

.wall-8-4 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 30px auto;
}

.wall-8-4-border {
  position: relative;
  width: 92%;
  margin-top: 8%;
  padding: 15px;
  border: 3px groove rgb(112,57,83);
  background: url(画像aURL);
}

.wall-8-4-border::before {
  content: "";
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin: auto;
  border: 2px dotted rgb(112,57,83);
}

.wall-8-4-border::after {
  content: "";
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  margin: auto;
  border: 6px dotted rgb(112,57,83);
}

.wall-8-4-border2 {
  border: 2px dotted rgb(112,57,83);
  background: rgba(0,0,0,.3);
}

.wall-8-4-text {
  position: relative;
  z-index: 10;
  padding: 1.5em 8% 1.5em 1.5em;
  color: white;
  text-shadow: rgb(40,40,40) 1px 1px 0, rgb(40,40,40) -1px -1px 0,
               rgb(40,40,40) -1px 1px 0, rgb(40,40,40) 1px -1px 0,
               rgb(40,40,40) 0 1px 0, rgb(40,40,40) 0 -1px 0,
               rgb(40,40,40) -1px 0 0, rgb(40,40,40) 1px 0 0;
}

.wall-8-4-imagewrapper {
  position: relative;
  z-index: 2;
  width: 40%;
  margin-left: -32%;
}

.wall-8-4 p:first-of-type {
  margin-top: 0 !important;
}

.wall-8-4 p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

画像a (94×96)
画像b (234×481)

マーガレット

あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。

とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。

この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。

【html】
注) 画像アドレスを入れる箇所あり (画像c 1箇所) 

<div class="wall-8-5" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-8-5-imagewrapper">
    <img class="wall-8-5-image" src="画像cURL" alt="">
  </div>
  <div class="wall-8-5-border">
    <div class="wall-8-5-border2">
      <div class="wall-8-5-text">
        テキスト
      </div>
    </div>
  </div>
</div>

横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所, 画像b 1箇所) 

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-8-5{display:flex;justify-content:space-between;align-items:flex-end;margin:30px auto}.wall-8-5-imagewrapper{position:relative;z-index:3;width:25%;margin-right:-20%}.wall-8-5-image{width:100%}.wall-8-5-border{position:relative;width:95%;padding:3%;border-radius:13px;border:5px ridge rgb(240,104,137);background:url(画像aURL)}.wall-8-5-border2{padding:2%;border-radius:13px;border:3px ridge rgb(240,104,137);background:url(画像bURL)}.wall-8-5-text{position:relative;z-index:2;padding:1.5em 1.5em 1.5em 16%;border-radius:13px;border:3px ridge rgb(240,104,137);background:white;color:rgb(51,51,51)}.wall-8-5 p:first-of-type{margin-top:0!important}.wall-8-5 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所, 画像b 1箇所) 

.wall-8-5 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 30px auto;
}

.wall-8-5-imagewrapper {
  position: relative;
  z-index: 3;
  width: 25%;
  margin-right: -20%;
}

.wall-8-5-image {
  width: 100%;
}

.wall-8-5-border {
  position: relative;
  width: 95%;
  padding: 3%;
  border-radius: 13px;
  border: 5px ridge rgb(240,104,137);
  background: url(画像aURL);
}

.wall-8-5-border2 {
  padding: 2%;
  border-radius: 13px;
  border: 3px ridge rgb(240,104,137);
  background: url(画像bURL);
}

.wall-8-5-text {
  position: relative;
  z-index: 2;
  padding: 1.5em 1.5em 1.5em 16%;
  border-radius: 13px;
  border: 3px ridge rgb(240,104,137);
  background: white;
  color: rgb(51,51,51);
}

.wall-8-5 p:first-of-type {
  margin-top: 0 !important;
}

.wall-8-5 p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

画像a (127×129)
画像b (300×300)
画像c (215×500)

お揃いのYouTube装飾はコチラ

YouTubeを飾ってみる その8

YouTubeを飾ってみる その8

メッセージボードとお揃いのYouTube装飾です。...

vanillaice000.blog.fc2.com

過去のメッセージボードはコチラ

The other way round

The other way round

コピペで使えるデザインメッセージボード集。…

vanillaice000.blog.fc2.com
Related post

Comments  6

オカンチ
2019/05/27 (Mon) 21:49

ソースコード　また　戴いていきます
いつも　ありがとうございます

vanillaice (Akira)
Akira
2019/05/28 (Tue) 01:52

To オカンチさん

オカンチさん、こんばんは ('0')/
はい。ご自由にどうぞ :)

オカンチ
2019/06/03 (Mon) 20:14

使わせて戴きました～
ありがとうございます

vanillaice (Akira)
Akira
2019/06/04 (Tue) 01:30

To オカンチさん

オカンチさん、こんばんは (o'ω')ﾉ

楽しんで頂ければ幸いです :)

-
2019/06/12 (Wed) 13:05

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/06/12 (Wed) 18:31

To 発送の件 内緒さん

こんにちは。
嬉しいですー！いつも頂くばかりですみません ^^;

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
    FC2共有テンプレート一覧 ご質問の前に
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)
「遊び」 カテゴリの一覧を見る