メッセージボード その9

メッセージボード その9

カスタマイズ
2019/09/25 3
vanillaice (Akira)
vanillaice (Akira)
MessageBoard Playground 初心者向け Instruction HTML CSS

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

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

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

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

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

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

素材のダウンロード

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

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

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

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

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

ペンダント

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

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

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

【html】
注)画像アドレス記載箇所あり(画像 1箇所)

<div class="wall-9-1" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-9-1-imagewrapper">
    <img class="wall-9-1-image" src="画像URL" alt="">
  </div>
  <div class="wall-9-1-border">
    <div class="wall-9-1-text">
      文章
    </div>
  </div>
</div>

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-9-1{display:flex;justify-content:space-between;align-items:flex-end;margin:30px auto}.wall-9-1-imagewrapper{position:relative;z-index:2;width:30%;pointer-events:none}.wall-9-1-image{width:100%}.wall-9-1-border{position:relative;width:88%;margin-left:-18%;background:rgb(51,51,51)}.wall-9-1-border::before{content:"";display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 4px);height:calc(100% - 4px);border:5px ridge rgb(148,114,79)}.wall-9-1-text{position:relative;z-index:3;width:calc(100% - 14px);margin:auto;padding:5% 5% 5% 10%;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-9-1-text p:first-of-type{margin-top:0!important}.wall-9-1-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

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

.wall-9-1-imagewrapper {
  position: relative;
  z-index: 2;
  width: 30%;
  pointer-events: none;
}

.wall-9-1-image {
  width: 100%;
}

.wall-9-1-border {
  position: relative;
  width: 88%;
  margin-left: -18%;
  background: rgb(51,51,51);
}

.wall-9-1-border::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 5px ridge rgb(148, 114, 79);
}

.wall-9-1-text {
  position: relative;
  z-index: 3;
  width: calc(100% - 14px);
  margin: auto;
  padding: 5% 5% 5% 10%;
  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-9-1-text p:first-of-type {
  margin-top: 0 !important;
}

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

【素材DL】

画像 (235×531)

枯れ葉

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

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

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

【html】
注) 画像アドレス記載箇所あり (画像 1箇所)

<div class="wall-9-2" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-9-2-imagewrapper">
    <img class="wall-9-2-image" src="画像URL" alt="">
  </div>
  <div class="wall-9-2-border">
    <div class="wall-9-2-text">
      文章
    </div>
  </div>
</div>

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-9-2{display:flex;justify-content:space-between;align-items:flex-start;margin:30px auto}.wall-9-2-imagewrapper{position:relative;z-index:2;width:92%;pointer-events:none}.wall-9-2-image{width:100%}.wall-9-2-border{position:relative;width:100%;margin:33% 0 0 -100%;padding:3%;border-radius:5px;background:rgb(186,179,156)}.wall-9-2-text{padding:12% 1em 1em;border-radius:5px;background:rgb(219,207,195);color:rgb(51,51,51)}.wall-9-2-text p:first-of-type{margin-top:0!important}.wall-9-2-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

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

.wall-9-2-imagewrapper {
  position: relative;
  z-index: 2;
  width: 92%;
  pointer-events: none;
}

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

.wall-9-2-border {
  position: relative;
  width: 100%;
  margin: 33% 0 0 -100%;
  padding: 3%;
  border-radius: 5px;
  background: rgb(186,179,156);
}

.wall-9-2-text {
  padding: 12% 1em 1em;
  border-radius: 5px;
  background: rgb(219,207,195);
  color: rgb(51,51,51);
}

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

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

【素材DL】

画像 (521×477)

ペーパー

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

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

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

【html】
注) 画像アドレス記載箇所あり (画像a 1箇所)

<div class="wall-9-3" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-9-3-imagewrapper">
    <img class="wall-9-3-image" src="画像aURL" alt="">
  </div>
  <div class="wall-9-3-text">
    文章
  </div>
</div>

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-9-3{position:relative;z-index:3;margin:30px auto}.wall-9-3-imagewrapper{position:relative;z-index:2;width:90%;pointer-events:none}.wall-9-3-image{width:100%}.wall-9-3-text{position:relative;margin-top:-23%;padding:22% 1em 3%;background:url(画像bURL) left top /100% auto;color:rgb(51,51,51)}.wall-9-3-text::before{content:"";position:absolute;right:2%;bottom:4%;left:auto;z-index:-1;width:50%;max-width:300px;height:40%;background:hsla(0,0%,50%,.5);box-shadow:0 20px 10px hsla(0,0%,50%,.5);transform:rotate(3deg)}.wall-9-3-text p:first-of-type{margin-top:0!important}.wall-9-3-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.wall-9-3 {
  position: relative;
  z-index: 3;
  margin: 30px auto;
}

.wall-9-3-imagewrapper {
  position: relative;
  z-index: 2;
  width: 90%;
  pointer-events: none;
}

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

.wall-9-3-text {
  position: relative;
  margin-top: -23%;
  padding: 22% 1em 3%;
  background: url(画像bURL) left top /100% auto;
  color: rgb(51,51,51);
}

.wall-9-3-text::before {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 4%;
  left: auto;
  z-index: -1;
  width: 50%;
  max-width: 300px;
  height: 40%;
  background: hsla(0,0%,50%,.5);
  box-shadow: 0 20px 10px hsla(0,0%,50%,.5);
  transform: rotate(3deg);
}

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

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

【素材DL】

画像a (500×226)
画像b (612×418)

ハート

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

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

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

【html】
注) 画像アドレス記載箇所あり (画像 1箇所)

<div class="wall-9-4" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-9-4-imagewrapper">
    <img class="wall-9-4-image" src="画像URL" alt="">
  </div>
  <div class="wall-9-4-border">
    <div class="wall-9-4-text">
      文章
    </div>
  </div>
</div>

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-9-4{display:flex;justify-content:space-between;margin:30px auto}.wall-9-4-imagewrapper{position:relative;z-index:2;width:32%;pointer-events:none}.wall-9-4-image{width:100%}.wall-9-4-border{position:relative;width:95%;margin:14% 0 0 -27%;border:2px groove rgb(85,83,42)}.wall-9-4-border::before{content:"";display:block;position:absolute;top:50%;left:50%;width:100%;height:100%;border:7px ridge rgb(85,83,42);transform:translate(-50%,-50%)}.wall-9-4-border::after{content:"";display:block;position:absolute;top:50%;left:50%;width:calc(100% - 14px);height:calc(100% - 14px);border:12px ridge rgb(85,83,42);transform:translate(-50%,-50%)}.wall-9-4-text{padding:15% 30px 30px;background:rgb(250,250,250);color:rgb(51,51,51)}.wall-9-4-text p:first-of-type{margin-top:0!important}.wall-9-4-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

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

.wall-9-4-imagewrapper {
  position: relative;
  z-index: 2;
  width: 32%;
  pointer-events: none;
}

.wall-9-4-image {
  width: 100%;
}

.wall-9-4-border {
  position: relative;
  width: 95%;
  margin: 14% 0 0 -27%;
  border: 2px groove rgb(85,83,42);
}

.wall-9-4-border::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 7px ridge rgb(85,83,42);
  transform: translate(-50%, -50%);
}

.wall-9-4-border::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 12px ridge rgb(85,83,42);
  transform: translate(-50%, -50%);
}

.wall-9-4-text {
  padding: 15% 30px 30px;
  background: rgb(250,250,250);
  color: rgb(51,51,51);
}

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

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

【素材DL】

画像 (300×284)

バフォメット

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

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

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

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

<div class="wall-9-5" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
  <div class="wall-9-5-border">
    <div class="wall-9-5-text">
      文章
    </div>
  </div>
  <div class="wall-9-5-imagewrapper">
    <img class="wall-9-5-image" src="画像aURL" alt="">
  </div>
</div>

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
注) 画像bはYouTube装飾と共通素材です。

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-9-5{display:flex;justify-content:space-between;align-items:flex-end;margin:30px auto}.wall-9-5-imagewrapper{position:relative;z-index:2;width:32%;margin-left:-22%;pointer-events:none}.wall-9-5-image{width:100%;filter:drop-shadow(0 5px 6px hsla(0,0%,35%,.5))}.wall-9-5-border{position:relative;width:90%;margin-bottom:8%;border:2px groove rgb(50,50,50);background:url(画像bURL)}.wall-9-5-border::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:4%;border:4px ridge rgb(50,50,50);background:black}.wall-9-5-text{position:relative;z-index:3;padding:7% 15% 20% 8%;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-9-5-text p:first-of-type{margin-top:0!important}.wall-9-5-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
注) 画像bはYouTube装飾と共通素材です。

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

.wall-9-5-imagewrapper {
  position: relative;
  z-index: 2;
  width: 32%;
  margin-left: -22%;
  pointer-events: none;
}

.wall-9-5-image {
  width: 100%;
  filter: drop-shadow(0 5px 6px hsla(0,0%,35%,.5));
}

.wall-9-5-border {
  position: relative;
  width: 90%;
  margin-bottom: 8%;
  border: 2px groove rgb(50,50,50);
  background: url(画像bURL);
}

.wall-9-5-border::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 4%;
  border: 4px ridge rgb(50,50,50);
  background: black;
}

.wall-9-5-text {
  position: relative;
  z-index: 3;
  padding: 7% 15% 20% 8%;
  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-9-5-text p:first-of-type {
  margin-top: 0 !important;
}

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

素材DL

画像a (300×396)
画像b (100×100)

お揃いのYouTube装飾はコチラ

YouTubeを飾ってみる その9

メッセージボードとお揃いのYouTube装飾第9段、秋仕様です。...

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

The other way round

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

 3

There are no comments yet.
オカンチ

嬉しい! メッセージボード!
楽しんで作らせて戴きます
ありがとうございます

2019/09/26 (Thu) 07:27
vanillaice (Akira)
Akira
To オカンチさん

はい。またいろいろアレンジしてみてくださいね :)

2019/09/26 (Thu) 12:30
オカンチ

幾つか 作らせて戴き 楽しませて貰ってます
数値や色などを替え のんびりと楽しみたいと思います
ありがとうございます

2019/09/29 (Sun) 12:09

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ