YouTubeとお揃いの装飾ボードです。
お遊びシリーズは Playground のタグにまとめています。
旧投稿画面をお使いの方は 改行の扱い「HTMLのみ」 に設定してください。
改行「自動」でもできますが、ソースコードをひと繋ぎ改行不可で書く必要が生じ、メンテナンスが大変だと思います。HTMLのみにすると改行したい文章末尾に <br> と書かないと折り返しませんのでご注意を。
CSSはスタイルシートに記載するか、スタイル用JSとして記事内に記載するか選択してください。
利用頻度が低い場合にはスタイルシートではなく記事内でのJS掲載が良いかもしれません。両方ではなくいずれか一方を選ぶようにしてください。
また、長文掲載には向きません のであくまでもメッセージ的・短文での利用をおすすめします。
ポイント画の部分はlazyloadingできるようにbackgroundではなくimgで記載してあります。記事内でlazyloadingをご利用の方は適用をおすすめします。
素材のダウンロード
装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。
それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。
YouTube装飾とお揃いですので、セットで利用する場合は同じ画像を二度DLする必要はありません。
メッセージボードいろいろ
文章をp要素でマークアップしたい方は テキスト の部位を <p>テキスト</p> に変更してください。
チューリップ
あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。
とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。
この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。
ソースコードを見る
【html】
<div class="wall-7-1" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
<div class="wall-7-1-border">
<div class="wall-7-1-text">
テキスト
</div>
</div>
</div>
横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。
【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-7-1{margin:30px auto;padding:3%;border:4px ridge rgb(146,6,15);background:url(画像aURL)}.wall-7-1-border{position:relative;padding:6px;border:2px ridge rgb(146,6,15)}.wall-7-1-border::before{content:"";box-sizing:border-box;display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:calc(100% - 4px);height:calc(100% - 4px);margin:auto;border:2px ridge rgb(146,6,15)}.wall-7-1-text{position:relative;z-index:10;padding:1em;border:4px ridge rgb(146,6,15);background:rgba(255,255,255,.5);color:rgb(51,51,51);font-weight:700}.wall-7-1-text p:first-of-type{margin-top:0!important}.wall-7-1-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>文字が若干見づらいので太字処理しています。不要な方は font-weight:700 で検索して削除してください。
【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
.wall-7-1 {
margin: 30px auto;
padding: 3%;
border: 4px ridge rgb(146,6,15);
background: url(画像aURL);
}
.wall-7-1-border {
position: relative;
padding: 6px;
border: 2px ridge rgb(146,6,15);
}
.wall-7-1-border::before {
content: "";
box-sizing: border-box;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: auto;
border: 2px ridge rgb(146,6,15);
}
.wall-7-1-text {
position: relative;
z-index: 10;
padding: 1em;
border: 4px ridge rgb(146,6,15);
background: rgba(255,255,255,.5);
color: rgb(51,51,51);
font-weight: bold;/* 太字処理 */
}
.wall-7-1-text p:first-of-type {
margin-top: 0 !important;
}
.wall-7-1-text p:last-of-type {
margin-bottom: 0 !important;
}太字を解除する方は /* 太字処理 */ のコメントが付いている一行を削除してください。
素材DL
ネイビー
あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。
とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。
この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。
ソースコードを見る
【html】
注) 画像アドレスを入れる箇所あり (画像c 1箇所)
<div class="wall-7-2" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
<div class="wall-7-2-text">
テキスト
</div>
<div class="wall-7-2-imagewrapper">
<img class="wall-7-2-image" src="画像cURL" alt="">
</div>
</div>
横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。
【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所, 画像b 1箇所, 計2箇所)
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-7-2{position:relative;margin:30px auto;padding:4%;background:url(画像bURL),url(画像aURL);color:white}.wall-7-2-text{padding:22% 1em 1em;background:linear-gradient(to right,rgb(55,51,79),rgb(86,97,127))}.wall-7-2-imagewrapper{position:absolute;top:0;right:0;left:0;width:80%;margin:auto}.wall-7-2-image{width:100%}.wall-7-2-text p:first-of-type{margin-top:0!important}.wall-7-2-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所, 画像b 1箇所, 計2箇所)
.wall-7-2 {
position: relative;
margin: 30px auto;
padding: 4%;
background: url(画像bURL),
url(画像aURL);
color: white;
}
.wall-7-2-text {
padding: 22% 1em 1em;
background: linear-gradient(to right, rgb(55,51,79), rgb(86,97,127));
}
.wall-7-2-imagewrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 80%;
margin: auto;
}
.wall-7-2-image {
width: 100%;
}
.wall-7-2-text p:first-of-type {
margin-top: 0 !important;
}
.wall-7-2-text p:last-of-type {
margin-bottom: 0 !important;
}素材DL
クラシック
あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。
とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。
この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。
ソースコードを見る
【html】
注) 画像アドレスを入れる箇所あり (画像a 4箇所)
<div class="wall-7-3" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
<div class="wall-7-3-imagewrapper">
<div class="wall-7-3-image-left"><img src="画像aURL" alt=""></div>
<div class="wall-7-3-image-right"><img src="画像aURL" alt=""></div>
</div>
<div class="wall-7-3-border">
<div class="wall-7-3-text">
テキスト
</div>
</div>
<div class="wall-7-3-imagewrapper2">
<div class="wall-7-3-image-left2"><img src="画像aURL" alt=""></div>
<div class="wall-7-3-image-right2"><img src="画像aURL" alt=""></div>
</div>
</div>
横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。
【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-7-3{display:flex;flex-direction:column;align-items:center;margin:30px auto;color:rgb(51,51,51)}.wall-7-3-imagewrapper,.wall-7-3-imagewrapper2{display:flex;justify-content:space-between;position:relative;z-index:3;width:100%}.wall-7-3-image-left,.wall-7-3-image-right,.wall-7-3-image-left2,.wall-7-3-image-right2{width:30%}.wall-7-3-image-right{transform:scale(-1,1)}.wall-7-3-border{position:relative;z-index:2;margin-top:-16%;width:96%;border:2px groove white;background:url(画像bURL)}.wall-7-3-text{padding:5% 1.5em;border:4px ridge white;background:rgba(255,255,255,.85)}.wall-7-3-imagewrapper2{margin-top:-16%}.wall-7-3-image-left2{transform:scale(1,-1)}.wall-7-3-image-right2{transform:scale(-1,-1)}.wall-7-3 img{width:100%}.wall-7-3-text p:first-of-type{margin-top:0!important}.wall-7-3-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
.wall-7-3 {
display: flex;
flex-direction: column;
align-items: center;
margin: 30px auto;
color: rgb(51,51,51);
}
.wall-7-3-imagewrapper,
.wall-7-3-imagewrapper2 {
display: flex;
justify-content: space-between;
position: relative;
z-index: 3;
width: 100%;
}
.wall-7-3-image-left,
.wall-7-3-image-right,
.wall-7-3-image-left2,
.wall-7-3-image-right2 {
width: 30%;
}
.wall-7-3-image-right {
transform: scale(-1, 1);
}
.wall-7-3-border {
position: relative;
z-index: 2;
margin-top: -16%;
width: 96%;
border: 2px groove white;
background: url(画像bURL);
}
.wall-7-3-text {
padding: 5% 1.5em;
border: 4px ridge white;
background: rgba(255,255,255,.85);
}
.wall-7-3-imagewrapper2 {
margin-top: -16%;
}
.wall-7-3-image-left2 {
transform: scale(1, -1);
}
.wall-7-3-image-right2 {
transform: scale(-1, -1);
}
.wall-7-3 img {
width: 100%;
}
.wall-7-3-text p:first-of-type {
margin-top: 0 !important;
}
.wall-7-3-text p:last-of-type {
margin-bottom: 0 !important;
}素材DL
濃紺の花
あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。
とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。
この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。
ソースコードを見る
【html】
<div class="wall-7-4" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
<div class="wall-7-4-imagewrapper"></div>
<div class="wall-7-4-text">
テキスト
</div>
</div>
横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。
【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像 1箇所)
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-7-4{display:flex;justify-content:space-between;margin:30px auto;color:white}.wall-7-4-imagewrapper{position:relative;z-index:2;width:40%;margin-right:-20%;background:url(画像URL) top left /100% auto repeat-y}.wall-7-4-text{width:80%;margin:15% 0 0;padding:1.5em 1.5em 1.5em 17%;background:black;text-align:right}.wall-7-4-text p:first-of-type{margin-top:0!important}.wall-7-4-text p:last-of-type{margin-bottom:0!important}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像 1箇所)
.wall-7-4 {
display: flex;
justify-content: space-between;
margin: 30px auto;
color: white;
}
.wall-7-4-imagewrapper {
position: relative;
z-index: 2;
width: 40%;
margin-right: -20%;
background: url(画像URL) top left /100% auto repeat-y;
}
.wall-7-4-text {
width: 80%;
margin: 15% 0 0;
padding: 1.5em 1.5em 1.5em 17%;
background: black;
text-align: right;
}
.wall-7-4-text p:first-of-type {
margin-top: 0 !important;
}
.wall-7-4-text p:last-of-type {
margin-bottom: 0 !important;
}素材DL
紫原背景
あなたは多年初めてその満足家というもののところがするうです。すでに時分で妨害者はもっともその病気ないなほどをしていけんがは意味云っますでと、たったにはなるでですたで。
とりを見えたくっものはまあ事実をいかにたうう。近頃岡田さんにお話国家ますます所有にもっある学校この個性あなたか構成にとかいうご接近たなですないが。
この一生も私か間接域を起るて、岡田さんののに子弟のそれへやはりお誘惑と来らけれども私子分を同経験に認めようにいくらご失敗を上っないざるて。
ソースコードを見る
【html】
<div class="wall-7-5" style="max-width: 600px"><!-- max-widthは横幅最大値 -->
テキスト
</div>背景画像は私が大昔に自作したものです。ウォーターマークが入っていたのを消去してごまかしてありますので、よく見ると若干荒い部位があります。ごめんなさい。
横幅制限が不要な場合は style="max-width: 600px" を 削除。数値変更可。
styleの前の半角スペースも忘れずに削除。
【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.wall-7-5{margin:30px auto;padding:1.5em;background:url(画像aURL) top left /100% auto repeat-y;color:white}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
.wall-7-5 {
margin: 30px auto;
padding: 1.5em;
background: url(画像aURL) top left /100% auto repeat-y;
color: white;
}素材DL
お揃いのYouTube装飾はコチラ 
YouTubeを飾ってみる その7
お揃いのメッセージボードもあります。...
過去のメッセージボードはコチラ
春っぽいお花背景のメッセージボード
「CSSで遊ぼう」のコーナーです。 … そんなのあったんかい (´・ｪ・｀) お遊びシリーズは Playground のタグにまとめています。今回はお花背景のシンプルなメッセージボードです。YouTube装飾とお揃いにしましたのでそちらもどうぞ。...
メッセージボード その5
その2〜その4までがありませんが、YouTube装飾とお揃いなので同じナンバーの方がわかりやすいと思ってー (´・ω・｀)...
メッセージボード その6
YouTubeとお揃いの装飾ボードです。...
There are no comments yet.