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

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

カスタマイズ
2019/03/14 0
vanillaice (Akira)
vanillaice (Akira)
Instruction HTML CSS 初心者向け Playground MessageBoard

「CSSで遊ぼう」のコーナーです。
… そんなのあったんかい (´・ェ・`)

お遊びシリーズは Playground のタグにまとめています。今回はお花背景のシンプルなメッセージボードです。YouTube装飾とお揃いにしましたのでそちらもどうぞ。

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

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

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

利用頻度が低い場合にはスタイルシートではなく記事内でのJS掲載が良いかもしれません。両方ではなくいずれか一方を選ぶようにしてください。

素材のダウンロード

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

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

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

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

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

青い小花

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

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

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

【html】

<div class="ms-board-4th-1">
  <div class="ms-board-text-4th-1">
    テキスト
  </div>
</div>

横幅制限が必要な場合は <div class="ms-board-4th-1"><div class="ms-board-4th-1" style="max-width: 数値px;"> に変更。

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.ms-board-4th-1{position:relative;margin:30px auto;box-shadow:5px 6px 10px -3px rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.2);background:url(画像アドレス) bottom right /200px auto no-repeat white;color:rgb(51,51,51)}.ms-board-text-4th-1{padding:1.5em;background:rgba(255,255,255,.6)}.ms-board-text-4th-1 p:first-of-type{margin-top:0!important}.ms-board-text-4th-1 p:last-of-type{margin-bottom:0!important}@media screen and (min-width:650px){.ms-board-4th-1{background-size:300px auto}}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.ms-board-4th-1 {
  position: relative;
  margin: 30px auto;
  box-shadow: 5px 6px 10px -3px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.2);
  background: url(画像URL) bottom right /220px auto no-repeat white;
  color: rgb(51,51,51);
}

.ms-board-text-4th-1 {
  padding: 1.5em;
  background: rgba(255,255,255,.6);
}

.ms-board-text-4th-1 p:first-of-type {
  margin-top: 0 !important;
}

.ms-board-text-4th-1 p:last-of-type {
  margin-bottom: 0 !important;
}

@media screen and (min-width: 650px) {
  .ms-board-4th-1 {
    background-size: 300px auto;
  }
}

素材DL (実寸: 570×573)

黒背景白い小花

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

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

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

【html】

<div class="ms-board-4th-2">
  テキスト
</div>

横幅制限が必要な場合は <div class="ms-board-4th-2"><div class="ms-board-4th-2" style="max-width: 数値px;"> に変更。

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.ms-board-4th-2{position:relative;margin:30px auto;padding:1.5em;box-shadow:5px 6px 10px -3px rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.2);background:url(画像URL) top right /220px auto no-repeat rgb(40,40,40);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}.ms-board-4th-2 p:first-of-type{margin-top:0!important}.ms-board-4th-2 p:last-of-type{margin-bottom:0!important}@media screen and (min-width:650px){.ms-board-4th-2{background-size:300px auto}}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.ms-board-4th-2 {
  position: relative;
  margin: 30px auto;
  padding: 1.5em;
  box-shadow: 5px 6px 10px -3px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.2);
  background: url(画像URL) top right /220px auto no-repeat rgb(40,40,40);
  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) 0px 1px 0, rgb(40,40,40)  0 -1px 0,
               rgb(40,40,40) -1px 0 0, rgb(40,40,40) 1px 0 0;
}

.ms-board-4th-2  p:first-of-type {
  margin-top: 0 !important;
}

.ms-board-4th-2  p:last-of-type {
  margin-bottom: 0 !important;
}

@media screen and (min-width: 650px) {
  .ms-board-4th-2  {
    background-size: 300px auto;
  }
}

素材DL (実寸: 550×358)

野花

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

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

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

ある程度の高さが無いと背景画像の上の方が見切れますのでパソコンでは横幅調整をされると良いと思います。
このサンプルでは max-width: 640px を指定しています。スマートフォンでは横100%になります。

【html】

<div class="ms-board-4th-3">
  テキスト
</div>

横幅制限が必要な場合は <div class="ms-board-4th-3"><div class="ms-board-4th-3" style="max-width: 数値px;"> に変更。

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.ms-board-4th-3{position:relative;margin:30px auto;padding:1.5em;box-shadow:5px 6px 10px -3px rgba(0,0,0,.2);border-radius:5px;border:1px solid rgba(0,0,0,.2);background:url(画像URL) bottom right /60% auto no-repeat white;color:rgb(51,51,51)}.ms-board-4th-3 p:first-of-type{margin-top:0!important}.ms-board-4th-3 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.ms-board-4th-3 {
  position: relative;
  margin: 30px auto;
  padding: 1.5em;
  box-shadow: 5px 6px 10px -3px rgba(0,0,0,.2);
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.2);
  background: url(画像URL) bottom right /60% auto no-repeat white;
  color: rgb(51,51,51);
}

.ms-board-4th-3  p:first-of-type {
  margin-top: 0 !important;
}

.ms-board-4th-3  p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL (実寸: 570×320)

桃色桜

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

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

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

【html】
注) 画像アドレスを入れる箇所あり, lazyloading可

<div class="ms-board-4th-4">
  <div class="msimage-wrapper-4th-4">
    <img class="msimage-4th-4" src="画像URL" alt="">
  </div>
  <div class="ms-board-text-wrapper-4th-4">
    <div class="ms-board-text-4th-4">
      テキスト
    </div>
  </div>
</div>

横幅制限が必要な場合は <div class="ms-board-4th-4"><div class="ms-board-4th-4" style="max-width: 数値px;"> に変更。

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.ms-board-4th-4{display:flex;flex-direction:column;align-items:flex-end;margin:30px auto}.ms-board-text-wrapper-4th-4{padding:1em;box-shadow:5px 6px 10px -3px rgba(0,0,0,.2);background:rgb(174,206,84)}.msimage-wrapper-4th-4{position:relative;z-index:3;width:80%;margin-bottom:-8%}.msimage-4th-4{width:100%}.ms-board-text-4th-4{position:relative;z-index:2;padding:1.5em;box-shadow:5px 6px 10px -3px rgba(0,0,0,.2);background:rgba(255,255,255,.8);color:rgb(51,51,51)}@media screen and (min-width:650px){.ms-board-text-4th-4{padding:3em 1.5em}}.ms-board-4th-4 p:first-of-type{margin-top:0!important}.ms-board-4th-4 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.ms-board-4th-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 30px auto;
}

.ms-board-text-wrapper-4th-4 {
  padding: 1em;
  box-shadow: 5px 6px 10px -3px rgba(0,0,0,.2);
  background: rgb(174,206,84);
}

.msimage-wrapper-4th-4 {
  position: relative;
  z-index: 3;
  width: 80%;
  margin-bottom: -8%;
}

.msimage-4th-4 {
  width: 100%;
}

.ms-board-text-4th-4 {
  position: relative;
  z-index: 2;
  padding: 1.5em;
  box-shadow: 5px 6px 10px -3px rgba(0,0,0,.2);
  background: rgba(255,255,255,.8);
  color: rgb(51,51,51);
}

@media screen and (min-width: 650px) {
  .ms-board-text-4th-4 {
    padding: 3em 1.5em;
  }
}

.ms-board-4th-4  p:first-of-type {
  margin-top: 0 !important;
}

.ms-board-4th-4  p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL (実寸: 570×129)

藍の花

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

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

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

【html】
注) 画像アドレスを入れる箇所あり, lazyloading可

<div class="ms-board-4th-5">
  <div class="ms-board-text-wrapper-4th-5">
    <div class="ms-board-text-4th-5">
      テキスト
    </div>
  </div>
  <div class="msimage-wrapper-4th-5">
    <img class="msimage-4th-4" src="画像URL" alt="">
  </div>
</div>

横幅制限が必要な場合は <div class="ms-board-4th-5"><div class="ms-board-4th-5" style="max-width: 数値px;"> に変更。

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.ms-board-4th-5{display:flex;flex-direction:column;align-items:center;margin:30px auto}.ms-board-text-wrapper-4th-5{margin-bottom:-10%;padding:1em;box-shadow:5px 6px 10px -3px rgba(0,0,0,.2);border-radius:5px;background:repeating-linear-gradient(90deg,rgb(119,135,155) 0,rgb(119,135,155) 15px,rgb(227,227,234) 15px,rgb(227,227,234) 30px)}.ms-board-text-4th-5{position:relative;z-index:2;padding:1.5em;border-radius:5px;box-shadow:5px 6px 10px -3px rgba(0,0,0,.2);background:rgba(255,255,255,.9);color:rgb(51,51,51)}@media screen and (min-width:630px){.ms-board-text-4th-5{padding:3em 1.5em}}.msimage-wrapper-4th-5{position:relative;z-index:3;width:30%}.msimage-4th-5{width:100%}.ms-board-4th-5 p:first-of-type{margin-top:0!important}.ms-board-4th-5 p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.ms-board-4th-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto;
}

.ms-board-text-wrapper-4th-5 {
  margin-bottom: -10%;
  padding: 1em;
  box-shadow: 5px 6px 10px -3px rgba(0,0,0,.2);
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, rgb(119,135,155) 0px, rgb(119,135,155) 15px, rgb(227,227,234) 15px, rgb(227,227,234) 30px);
}

.ms-board-text-4th-5 {
  position: relative;
  z-index: 2;
  padding: 1.5em;
  border-radius: 5px;
  box-shadow: 5px 6px 10px -3px rgba(0,0,0,.2);
  background: rgba(255,255,255,.9);
  color: rgb(51,51,51);
}

@media screen and (min-width: 630px) {
  .ms-board-text-4th-5 {
    padding: 3em 1.5em;
  }
}

.msimage-wrapper-4th-5 {
  position: relative;
  z-index: 3;
  width: 30%;
}

.msimage-4th-5 {
  width: 100%;
}

.ms-board-4th-5  p:first-of-type {
  margin-top: 0 !important;
}

.ms-board-4th-5  p:last-of-type {
  margin-bottom: 0 !important;
}

素材DL (実寸: 345×332)

お揃いのYouTube装飾はコチラ

YouTubeを飾ってみる その4

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

 0

There are no comments yet.

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

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

カスタマイズ