メッセージボード その5

メッセージボード その5

カスタマイズ
2019/04/04 0
vanillaice (Akira)
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

画像a (300×521)
画像b (200×197)

赤バラ

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

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

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

【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

画像a (477×277)
画像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

(496×416)

白い日傘

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

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

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

【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

画像a (388×299)
画像b (40×40)
画像c (200×200)
画像d (150×171)

ギラギラ

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

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

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

【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)

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

春っぽいお花背景のメッセージボード

「CSSで遊ぼう」のコーナーです。 … そんなのあったんかい (´・ェ・`) お遊びシリーズは Playground のタグにまとめています。今回はお花背景のシンプルなメッセージボードです。YouTube装飾とお揃いにしましたのでそちらもどうぞ。...

お揃いのYouTube装飾はコチラ

YouTubeを飾ってみる その5

お揃いのメッセージボードもあります。...

 0

There are no comments yet.

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

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

カスタマイズ