メッセージボード その9

メッセージボード その9

カスタマイズ 遊び
2019/09/25
3
vanillaice (Akira)
vanillaice (Akira)
MessageBoardPlayground初心者向けInstructionHTMLCSS

お遊びシリーズは 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="" width="235" height="531" loading="lazy">
  </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="" width="521" height="477" loading="lazy">
  </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="" width="500" height="226" loading="lazy">
  </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="" width="300" height="284" loading="lazy">
  </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="" width="300" height="396" loading="lazy">
  </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

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

vanillaice000.blog.fc2.com

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

The other way round

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

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

vanillaice000.blog.fc2.com
Related post

Comments  3

オカンチ
2019/09/26 (Thu) 07:27

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

vanillaice (Akira)
Akira
2019/09/26 (Thu) 12:30

To オカンチさん

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

オカンチ
2019/09/29 (Sun) 12:09

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

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