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

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

カスタマイズ 遊び
2019/03/14
0
vanillaice (Akira)
vanillaice (Akira)
InstructionHTMLCSS初心者向けPlaygroundMessageBoard

「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

YouTubeを飾ってみる その4

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

vanillaice000.blog.fc2.com
Related post

Comments  0

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