メッセージボードその5

カスタマイズ遊び

2019/04/04

2021/10/23 0

vanillaice (Akira)

Instruction HTML CSS 初心者向け Playground MessageBoard

その2〜その4までがありませんが、YouTube装飾とお揃いなので同じナンバーの方がわかりやすいと思ってー (´・ω・｀)

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

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

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

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

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

素材のダウンロード

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

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

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

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

文章をp要素でマークアップしたい方はテキストの部位を <p>テキスト</p> に変更してください。そして当然ですがレスポンシブになってます。

白バラ

よく嘉納さんで仕事お客そう想像に駈けませ学生どんな個人私か発展のというお説明ですうますないて、こうした場合も私か働別が申しから、岡田さんののを懐手のここをひょろひょろお満足。

知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。

それでまたはご主義に云っのも一応むやみと知らうば

ソースコードを見る

【html】

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

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

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-5-1{display:flex;justify-content:space-between;align-items:flex-end;margin:30px auto}.rose-5-1a-image{position:relative;z-index:5;width:20%;margin-right:-10%}.rose-5-1a{width:100%}.rose-5-1b-border{position:relative;z-index:2;width:90%;padding:4%;border:2px groove rgb(247,240,222);background:url(画像bURL) white}.rose-5-1b-text{position:relative;padding:20px 20px 20px 7%;border:2px groove rgb(247,240,222);background:white;color:rgb(51,51,51)}.rose-5-1b-border::before,.rose-5-1b-text::before{content:"";display:block;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border:5px groove white}.rose-5-1b-text p{line-height:1.5!important}.rose-5-1b-text p:first-of-type{margin-top:0!important}.rose-5-1b-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

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

.rose-5-1a-image {
  position: relative;
  z-index: 5;
  width: 20%;
  margin-right: -10%;
}

.rose-5-1a {
  width: 100%;
}

.rose-5-1b-border {
  position: relative;
  z-index: 2;
  width: 90%;
  padding: 4%;
  border: 2px groove rgb(247,240,222);
  background: url(画像bURL) white;
}

.rose-5-1b-text {
  position: relative;
  padding: 20px 20px 20px 7%;
  border: 2px groove rgb(247,240,222);
  background: white;
  color: rgb(51,51,51);
}

.rose-5-1b-border::before,
.rose-5-1b-text::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px groove white;
}

.rose-5-1b-text p {
  line-height: 1.5 !important;
}

.rose-5-1b-text p:first-of-type {
  margin-top: 0 !important;
}

.rose-5-1b-text p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

赤バラ

知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。

それでまたはご主義に云っのも一応むやみと知らうば

ソースコードを見る

【html】

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

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

テキストが画像下に隠れるといけませんので上になるよう調整しています。max-widthを600px前後にしておくと文字と画像が重なりません。

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-5-2{display:flex;flex-direction:column;align-items:center;margin:30px auto}.rose-5-2a-image{position:relative;z-index:4;width:50%;margin-bottom:-10%}.rose-5-2a{width:100%;transform:scale(1,-1);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}.rose-5-2b-border{position:relative;width:100%;padding:3px;background:url(画像bURL)}.rose-5-2b-border::before{content:"";display:block;position:absolute;top:3px;left:3px;z-index:3;width:calc(100% - 6px);height:calc(100% - 6px);background:rgb(41,41,41);color:white}.rose-5-2b-text{position:relative;z-index:5;padding:50px 1em 20px}.rose-5-2b-text p{line-height:1.5!important}.rose-5-2b-text p:first-of-type{margin-top:0!important}.rose-5-2b-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

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

.rose-5-2a-image {
  position: relative;
  z-index: 4;
  width: 50%;
  margin-bottom: -10%;
}

.rose-5-2a {
  width: 100%;
  transform: scale(1,-1);
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,.2));
}

.rose-5-2b-border {
  position: relative;
  width: 100%;
  padding: 3px;
  background: url(画像bURL);
}

.rose-5-2b-border::before {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 3;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: rgb(41,41,41);
  color: white;
}

.rose-5-2b-text {
  position: relative;
  z-index: 5;
  padding: 50px 1em 20px;
}

.rose-5-2b-text p {
  line-height: 1.5 !important;
}

.rose-5-2b-text p:first-of-type {
  margin-top: 0 !important;
}

.rose-5-2b-text p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

画像b (40×40)

絡まるバラ

知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。

それでまたはご主義に云っのも一応むやみと知らうば

ソースコードを見る

【html】

<div class="wall-5-3" style="max-width: 600px;"><!-- max-widthは横幅最大値 -->
  <div class="rose-5-3a-left-image">
    <img class="rose-5-3a-left" src="画像URL" alt="">
  </div>
  <div class="rose-5-3b-text-wrapper">
    <div class="rose-5-3b-text">
     テキスト
   </div>
  </div>
  <div class="rose-5-3a-right-image">
    <img class="rose-5-3a-right" src="画像URL" alt="">
  </div>
</div>

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

テキストが画像下に隠れるといけませんので上になるよう調整しています。バランスを考えてテキストを中央揃えにしてありますが変更可能です。

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-5-3{display:flex;flex-direction:column;margin:30px auto}.rose-5-3a-left-image,.rose-5-3a-right-image{position:relative;z-index:3;width:50%}.rose-5-3a-right-image{margin-left:auto}.rose-5-3a-left-image{margin-bottom:-31%}.rose-5-3a-right-image{margin-top:-31%}.rose-5-3a-left,.rose-5-3a-right{width:100%}.rose-5-3a-right{transform:scale(-1,-1)}.rose-5-3b-text-wrapper{width:85%;min-height:200px;margin:0 auto;background:rgb(41,41,41);color:white}.rose-5-3b-text{position:relative;padding:7%;z-index:20;text-align:center}.rose-5-3b-text p{line-height:1.5!important}.rose-5-3b-text p:first-of-type{margin-top:0!important}.rose-5-3b-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.wall-5-3 {
  display: flex;
  flex-direction: column;
  margin: 30px auto;
}

.rose-5-3a-left-image,
.rose-5-3a-right-image {
  position: relative;
  z-index: 3;
  width: 50%;
}

.rose-5-3a-right-image {
  margin-left: auto;
}

.rose-5-3a-left-image {
  margin-bottom: -31%;
}

.rose-5-3a-right-image {
  margin-top: -31%;
}

.rose-5-3a-left,
.rose-5-3a-right {
  width: 100%;
}

.rose-5-3a-right {
  transform: scale(-1, -1);
}

.rose-5-3b-text-wrapper {
  width: 85%;
  min-height: 200px;
  margin: 0 auto;
  background: rgb(41,41,41);/* 背景色 */
  color: white;/* 文字色 */
}

.rose-5-3b-text {
  position: relative;
  padding: 7%;
  z-index: 20;
  text-align: center;
}

.rose-5-3b-text p {
  line-height: 1.5 !important;
}

.rose-5-3b-text p:first-of-type {
  margin-top: 0 !important;
}

.rose-5-3b-text p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

白い日傘

知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。

それでまたはご主義に云っのも一応むやみと知らうば

ソースコードを見る

【html】

<div class="wall-5-4" style="max-width: 600px;"><!-- max-widthは横幅最大値 -->
  <div class="umbrella-5-4a-image">
    <img class="umbrella-5-4a" src="画像aURL" alt="">
  </div>
  <div class="umbrella-5-4b-border">
    <div class="umbrella-5-4b-text-wrap">
      <div class="umbrella-5-4b-text">
        テキスト
      </div>
    </div>
  </div>
</div>

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

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-5-4{display:flex;flex-direction:column;align-items:flex-end;width:100%;margin:30px auto;overflow:hidden}.umbrella-5-4a-image{position:relative;z-index:10;width:40%;transform:rotate(40deg)}.umbrella-5-4a{width:100%;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.6))}.umbrella-5-4b-border{position:relative;width:100%;margin-top:-13%;padding:5%;background:url(画像bURL)}.umbrella-5-4b-border::before,.umbrella-5-4b-border::after{content:"";display:block;box-sizing:border-box;position:absolute;z-index:3;top:3px;left:3px;width:calc(100% - 6px);height:calc(100% - 6px)}.umbrella-5-4b-border::before{background:url(画像cURL)}.umbrella-5-4b-border::after{background:url(画像dURL}.umbrella-5-4b-text-wrap{position:relative;z-index:4;padding:3px;background:url(画像bURL)}.umbrella-5-4b-text{position:relative;z-index:5;padding:20px 1em;margin:;background:linear-gradient(to right,white,rgb(216,220,229) 100%);color:rgb(51,51,51);text-align:center;line-height:1.5!important}.umbrella-5-4b-text p{line-height:1.5!important}.umbrella-5-4b-text p:first-of-type{margin-top:0!important}.umbrella-5-4b-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.wall-5-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  margin: 30px auto;
  overflow: hidden;
 }

.umbrella-5-4a-image {
  position: relative;
  z-index: 10;
  width: 40%;
  transform: rotate(40deg);
}

.umbrella-5-4a {
  width: 100%;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,.6));
}

.umbrella-5-4b-border {
  position: relative;
  width: 100%;
  margin-top: -13%;
  padding: 5%;
  background: url(画像bURL);
}

.umbrella-5-4b-border::before,
.umbrella-5-4b-border::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.umbrella-5-4b-border::before {
  background: url(画像cURL);
}

.umbrella-5-4b-border::after {
  background: url(画像dURL);
}

.umbrella-5-4b-text-wrap {
  position: relative;
  z-index: 4;
  padding: 3px;
  background: url(画像bURL);
}

.umbrella-5-4b-text {
  position: relative;
  z-index: 5;
  padding: 20px 1em;
  margin: ;
  background: linear-gradient(to right, white, rgb(216,220,229) 100%);
  color: rgb(51,51,51); text-align: center; line-height: 1.5 !important;
}

.umbrella-5-4b-text p {
  line-height: 1.5 !important;
}

.umbrella-5-4b-text p:first-of-type {
  margin-top: 0 !important;
}

.umbrella-5-4b-text p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL

画像b (40×40)

ギラギラ

知れてあれ気持にごお話に思い切っように何しろお関係が見合せらしくうて、ようやくどうもろかのしうているだのでめがけなけれう。

それでまたはご主義に云っのも一応むやみと知らうば

ソースコードを見る

【html】

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

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

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-5-5{position:relative;margin:30px auto;padding:calc(4% + 6px);background:repeating-linear-gradient(to bottom,rgb(124,91,82),rgb(215,186,178) 60px,rgb(124,91,82) 120px)}.wall-5-5::before,.wall-5-5::after{content:"";display:block;box-sizing:border-box;position:absolute;z-index:2;border:2px solid rgb(218,185,39)}.wall-5-5::before{top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);background:repeating-linear-gradient(to bottom,rgb(124,91,82),rgb(215,186,178) 60px,rgb(124,91,82) 120px)}.wall-5-5::after{top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 12px);background:url(画像URL)}.wall-5-5a{position:relative;z-index:3;padding:6px;border:2px solid rgb(218,185,39);background:repeating-linear-gradient(to bottom,rgb(124,91,82),rgb(215,186,178) 60px,rgb(124,91,82) 120px)}.wall-5-5a::before{content:"";display:block;box-sizing:border-box;position:absolute;top:2px;left:2px;z-index:2;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid rgb(218,185,39);background:repeating-linear-gradient(to bottom,rgb(124,91,82),rgb(215,186,178) 60px,rgb(124,91,82) 120px)}.wall-5-5-text{position:relative;z-index:10;padding:1.5em;background:rgb(126,102,54);color:white}.wall-5-5-text p{line-height:1.5!important}.wall-5-5-text p:first-of-type{margin-top:0!important}.wall-5-5-text p:last-of-type{margin-bottom:0!important}.wall-5-5a .box-for-video{z-index:10}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.wall-5-5 {
  position: relative;
  margin: 30px auto;
  padding: calc(4% + 6px);
  background: repeating-linear-gradient(to bottom, rgb(124,91,82), rgb(215,186,178) 60px, rgb(124,91,82) 120px);
}

.wall-5-5::before,
.wall-5-5::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  border: 2px solid rgb(218,185,39);
}

.wall-5-5::before {
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: repeating-linear-gradient(to bottom, rgb(124,91,82), rgb(215,186,178) 60px, rgb(124,91,82) 120px);
}

.wall-5-5::after {
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: url(画像URL);
}

.wall-5-5a {
  position: relative;
  z-index: 3;
  padding: 6px;
  border: 2px solid rgb(218,185,39);
  background: repeating-linear-gradient(to bottom, rgb(124,91,82), rgb(215,186,178) 60px, rgb(124,91,82) 120px);
}

.wall-5-5a::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid rgb(218,185,39);
  background: repeating-linear-gradient(to bottom, rgb(124,91,82), rgb(215,186,178) 60px, rgb(124,91,82) 120px);
}

/* メッセージボード用 */
.wall-5-5-text {
  position: relative;
  z-index: 10;
  padding: 1.5em;
  background: rgb(126, 102, 54);
  color: white;
}

.wall-5-5-text p {
  line-height: 1.5 !important;
}

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

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

/* youtube用 */
.wall-5-5a .box-for-video {
  z-index: 10;
}

素材DL

(54×266)