「point」「check」や「会話形式吹き出し」など、コピペで使えるデザイン集。テンプレートに含めようかなぁ、と考えていたものなども併せて放出しようと思います。つまりもうテンプレートデザインとしては使わないのでみなさんの記事で使えそうならどうぞ (ノﾟｪﾟ)
2022.1.5
記事作成時の注意点について加筆しました。
記事作成時の注意点
- HTMLモードのみ利用可能です。
- Markupはhtmlのことです, 記事作成画面(本文 or 追記(推奨))に記載
- CSSはテンプレートスタイルシートに記載
CSSと記されているコードの記載場所は テンプレートのスタイルシート です。利用頻度が低いなど記事内だけで完結させたい場合は、以下のいずれかの方法を選択し、記事の末尾(最終)に記載します。
- CSSの冒頭に <style>、末尾に </style> を付加し、html要素として扱う
* この場合スタイル自体は適用されますが、バリデートチェックでエラー判定を受けます。 - JSを利用してスタイルを適用する
JSを選択する方は以下の内容にあてはめて記載を行ってください。「ここにCSS」とある部位に各CSSをコピー&ペーストで挿入。
<script>
var styleElm = document.createElement('style');
styleElm.innerHTML = `
ここにCSS
`;
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>air balloon
point!
文章
コードを見る
デフォルトのバルーン内テキストにあまり長い単語や文章は入りませんので注意。サイズ変更などは任意で行ってください。各背景色やドット色などもガイダンスがありますので好みに変更してください。
テキスト内でのhtml使用が予想される場合は p要素 を div要素 に変更した方が無難です(構文エラーの発生を防ぐため)
<div class="air__balloon">point!</div>
<p class="air__balloon_text">文章</p>/* air balloon */
.air__balloon {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 90px;
height: 100px;
margin: 30px 0 0;
background-color: rgb(216,217,235);/* バルーン背景色 */
background-image: radial-gradient(rgb(176,171,212) 20%, transparent 0), radial-gradient(rgb(176,171,212) 20%, transparent 0);/* バルーンドット色 rgb(176,171,212) */
background-position: 0 0,10px 10px;
background-size: 20px 20px;
color: rgb(20,20,20);/* バルーン内テキスト色 */
box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
border-radius: 100%;
font-weight: bold;
font-size: 19px;/* バルーン内テキスト大きさ */
transform: rotate(-6deg);
}
.air__balloon::before {
content: "";
display: block;
position: absolute;
top: 100%;
right: 0;
left: 0;
width: 1px;
height: 20px;
margin: auto;
background: black;
}
.air__balloon::after {
content: "";
position: absolute;
bottom: -7px;
left: 0;
right: 0;
width: 0;
height: 0;
margin: auto;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent rgb(216,217,235) transparent;/* rgb(216,217,235)はバルーン背景色と同じ色 */
border-radius: 4px;
}
.air__balloon_text {
margin: 20px 0 30px !important;
padding: 1em;
box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
border-radius: 4px;
background: rgb(240,240,240);/* テキスト背景色 */
color: rgb(51,51,51);/* テキスト文字色 */
font-size: 16px;/* テキストサイズ */
}
/* darkmode用 */
@media (prefers-color-scheme: dark) {
.air__balloon::before {
background: white;
}
}point!
文章
ソースコードを見る
デフォルトのバルーン内テキストにあまり長い単語や文章は入りませんので注意。サイズ変更などは任意で行ってください。各背景色やドット色などもガイダンスがありますので好みに変更してください。
テキスト内でのhtml使用が予想される場合は p要素 を div要素 に変更した方が無難です(構文エラーの発生を防ぐため)
<div class="air__balloon2">point!</div>
<p class="air__balloon2_text">文章</p>.air__balloon2 {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 90px;
height: 100px;
margin: 30px 0 0;
color: rgb(20,20,20);/* バルーン内テキスト色 */
box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
border-radius: 100%;
background: rgb(231,172,178);
font-weight: bold;
font-size: 19px;/* バルーン内テキスト大きさ */
transform: rotate(-6deg);
}
.air__balloon2::before {
content: "";
display: block;
position: absolute;
top: 100%;
right: 0;
left: 0;
width: 1px;
height: 20px;
margin: auto;
background: black;
}
.air__balloon2::after {
content: "";
position: absolute;
bottom: -7px;
left: 0;
right: 0;
width: 0;
height: 0;
margin: auto;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent rgb(231,172,178) transparent;/* rgb(231,172,178)はバルーン背景色と同じ色 */
border-radius: 4px;
}
.air__balloon2_text {
margin: 20px 0 30px !important;
padding: 1em;
box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
border-radius: 4px;
background-color: rgb(246,234,215);/* テキスト背景色 */
background-image: radial-gradient(rgb(230,202,162) 20%, transparent 0), radial-gradient(rgb(230,202,162) 20%, transparent 0);/* テキストドット色 rgb(230,202,162) */
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
color: rgb(51,51,51);/* テキスト文字色 */
font-size: 16px;/* テキストサイズ */
}
/* darkmode用 */
@media (prefers-color-scheme: dark) {
.air__balloon2::before {
background: white;
}
}会話吹き出し
LINE風
ペンギン
LINE風 左側吹き出し。横幅はテキスト量に依存します。
ネズミ
LINE風 右側吹き出し。
横幅はテキスト量次第です。
ソースコードを見る
名前表記不要の場合は <div class="line__balloon_name">名前</div> を削除。
テキスト量によって横幅が変わりますが、短いテキストでも名前が長いと長い方に合わせますので吹き出しも横幅が広がります。
テキスト内でのhtml使用が予想される場合は p要素 を div要素 に変更した方が無難です(構文エラーの発生を防ぐため)
<div class="line__balloon_l"><!-- 右吹き出しは line__balloon_l を line__balloon_r に変更 -->
<div class="line__balloon_img">
<img src="画像アドレス" width="横実寸" height="縦実寸" alt loading="lazy">
</div>
<div class="balloon__content">
<div class="line__balloon_name">名前</div>
<p class="line__balloon_text">文章</p>
</div>
</div>.line__balloon_l,
.line__balloon_r {
display: flex;
align-items: flex-start;
margin: 20px 0;
}
.line__balloon_r {
flex-direction: row-reverse;
}
.line__balloon_img {
flex-shrink: 0;
position: relative;
width: 15%;
max-width: 70px;
border-radius: 50%;
border: 1px solid rgb(200,200,200);
background: white;/* アイコン背景色不要ならこの一行削除(PNG画像に配慮) */
}
.line__balloon_img::before {
content: "";
display: block;
padding-top: 100%;
}
/* W150 H150 程度の正方形を推奨 */
.line__balloon_img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.line__balloon_l .balloon__content {
margin: 0 0 0 10px;
}
.line__balloon_r .balloon__content {
margin: 0 10px 0 0;
}
.line__balloon_name {
margin: 0 0 -.6em;
color: rgb(80,80,80);
font-weight: bold;
font-size: 13px;/* 名前フォントサイズ */
}
.line__balloon_r .line__balloon_name {
text-align: right;
}
.line__balloon_text {
position: relative;
max-width: 500px;/* 最大横幅 不要ならこの一行削除 */
margin: .6em 0 0 0 !important;
padding: .6em 1em;
border-radius: 25px;
color: rgb(51,51,51);/* 吹き出し テキスト色 */
font-size: 16px;/* テキストフォントサイズ */
}
.line__balloon_l .line__balloon_text {
background: rgb(245,245,245);/* 右吹き出し 背景色 */
}
.line__balloon_r .line__balloon_text {
background: rgb(133,226,73);/* 左吹き出し 背景色 */
}
.line__balloon_text::before {
content: "";
display: block;
position: absolute;
height: 35px;
width: 18px;
background: 0 0;
border: 0;
top: -20px;
}
.line__balloon_l .line__balloon_text::before {
left: -8px;
box-shadow: inset -3px -15px 0 -5px rgb(245,245,245);/* rgb(245,245,245)は左吹き出し背景色と同色 */
border-radius: 40px 0 0 40px;
}
.line__balloon_r .line__balloon_text::before {
right: -8px;
box-shadow: inset 3px -15px 0 -5px rgb(133,226,73);/* rgb(133,226,73)は右吹き出し背景色と同色 */
border-radius: 0 40px 40px 0;
}
/* darkmode用 */
@media (prefers-color-scheme: dark) {
.line__balloon_name {
color: rgb(180,180,180);
}
}考える吹き出し
何かを考えている様子のひよこ
ソースコードを見る
<div class="thinking__balloon">
<p class="thinking__balloon_text">文章</p>
<div class="thinking__balloon_icon">
<img src="画像アドレス" width="横原寸" height="縦原寸" alt loading="lazy">
</div>
</div>.thinking__balloon {
margin: 30px auto;
text-align: center;
}
.thinking__balloon_text {
display: inline-block;
position: relative;
max-width: 500px;/* 吹き出し最大横幅 不要ならこの一行削除 */
margin: 0 0 calc(3px + 18px + 3px + 10px + 3px) !important;
padding: 1em;
border-radius: 25px;
background: rgb(196,225,230);/* 吹き出し背景色 */
color: rgb(51,51,51);/* 吹き出しテキスト色 */
font-size: 16px;/* 吹き出しテキストサイズ */
}
.thinking__balloon_text:before,
.thinking__balloon_text:after {
content: "";
display: block;
position: absolute;
background: rgb(196,225,230);/* 吹き出し背景色と同色 */
border-radius: 50%;
}
.thinking__balloon_text:before {
top: calc(100% + 3px);
left: 15px;
width: 18px;
height: 18px;
}
.thinking__balloon_text:after {
top: calc(100% + 3px + 18px + 3px);
left: 25px;
width: 10px;
height: 10px;
}
.thinking__balloon_icon {
width: 120px;/* アイコン横幅 */
margin: auto;
}
.thinking__balloon_icon img {
width: 100%;
height: auto;
}ぐにゃぐにゃメッセージボード
ある程度の範囲、ある程度の文字数が無いと成り立ちにくいデザインです。
横幅制限で調整しても良いと思います。
ソースコードを見る
テキスト内でのhtml使用が予想される場合は p要素 を div要素 に変更した方が無難です(構文エラーの発生を防ぐため)
<p class="limp__board">文章</p>.limp__board {
position: relative;
z-index: 3;
max-width: 500px;/* 最大横幅 削除しない方が良いです */
margin: 30px auto !important;
padding: 4em;
border-radius: 31% 69% 54% 46% / 45% 43% 57% 55%;
background: rgb(220,131,168);/* 背面背景色 */
color: rgb(51,51,51);/* 吹き出しテキスト色 */
font-size: 16px;/* 吹き出しテキストサイズ */
text-align: center;
}
.limp__board::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: calc(100% - 4px);
height: calc(100% - 4px);
border-radius: 31% 69% 33% 67% / 61% 27% 73% 39%;
background: rgb(250,213,230);/* 前面背景色 */
pointer-events: none;
}封蝋
文章
ソースコードを見る
テキスト横に並びます(p要素テキストは並びませんのでp要素をinline-blockにするなどすれば並びます)
また、marginを付けていませんので何かと並べる場合は適宜指定してください(上下も同様)
テキスト等と並べない場合は inline-flex を flex に変更。
形は3種、色は6種設定していますので組み合わせてご利用ください。
テキストの色が薄くLighthouseで警告を受けますので、after疑似要素でのテキスト挿入を行ってください。
<div class="sealing__box sealing__style1 sealing__color1"></div><!-- sealing__box は全共通、 sealing__style と sealing__color それぞれ末尾の数字で区別 -->
.sealing__box {
display: inline-flex;
position:relative;
width:75px;
height:75px;
font: bold 16px/1.2 Georgia, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, Meiryo, 'Yu Gothic', cursive;
font-style: italic;
text-shadow: -1px -1px 1px rgb(51,51,51,.6), 1px 1px white;
}
/* スタイル3種 */
.sealing__style1 {
border-radius: 100% 80% / 80% 85% 80% 90%;
}
.sealing__style2 {
border-radius: 50% 50% 50% 70% / 50% 50% 70% 60%;
}
.sealing__style3 {
border-radius: 80% 30% 50% 50% / 50%;
}
/* 色6種 */
.sealing__color1 {
background-color: rgb(220,222,219);
color: rgb(180,182,179);
}
.sealing__color2 {
background-color: rgb(201,212,222);
color: rgb(160,172,182);
}
.sealing__color3 {
background-color: rgb(223,221,210);
color: rgb(193,191,190);
}
.sealing__color4 {
background-color: rgb(244,235,233);
color: rgb(214,205,203);
}
.sealing__color5 {
background-color: rgb(206,208,219);
color: rgb(176,178,189);
}
.sealing__color6 {
background-color: rgb(239,232,222);
color: rgb(209,202,192);
}
.sealing__box::before {
content: "";
display: block;
position: absolute;
bottom: 5px;
left: 5px;
width: 65px;
height: 65px;
box-shadow: -8px -2px 8px 1px rgba(255,255,255,.6),
4px 6px 1px 1px rgba(55,55,55,.1);
border-radius: 50%;
}
.sealing__box::after {
content: "Point";/* 表示テキストはここで指定 */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
古紙と組み合わせ(CSS追加あり)
<div class="sealing__text">文章
<div class="sealing__box sealing__style2 sealing__color2"></div>
</div>.sealing__text {
position: relative;
margin: 60px 0 30px;
padding: 1em 1em 1em 86px;
border-radius: 3px;
background: url(data:image/jpeg;base64,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);
color: rgb(51,51,51);
}
.sealing__text .sealing__box {
position: absolute;
top: -30px;
left: 8px;
}メモ
MEMO
ソースコードを見る
マーカーの色は適当に入れていましたので自由に変えてください。
Darkmode対応テンプレートの場合はペンシルアイコンが背景色と同化して見えなくなる可能性がありますのでdarkmode用のmediaqueryを入れてあります。テンプレートが対応していない場合は削除してください(逆darkmode利用者に見えなくなってしまいます)
<div class="memo__board">
<div class="memo__text">MEMO</div>
<div class="memo__icon"></div>
</div>.memo__board {
position: relative;
z-index: 3;
width: 400px;/* パソコンでの見た目 横幅 */
max-width: calc(100% - 30px);/* ペンシルの大きさを変更したら 30px も変更 */
padding: 0 0 0 20px;
font-weight: bold;
font-size: 1.2em;
}
.memo__icon {
color: rgb(51,51,51);/* ペンシルアイコン色 */
position: absolute;
bottom: 17px;
left: calc(100% + 7px);
width: 14px;
height: 4px;
border-radius: 1px;
border: solid 1px currentColor;
background-color: currentColor;
transform: rotate(-45deg) scale(1.8);/* ペンシルの大きさは scale() で調整 */
}
.memo__board::before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 8px;
border-radius: 77% 23% 97% 3% / 0% 70% 30% 100%;
background: linear-gradient(to right, rgb(217,175,217) 0%, rgb(151,217,225) 100%);/* 線のグラデーション */
}
.memo__icon:before {
content: "";
position: absolute;
left: -12px;
top: -1px;
width: 0;
height: 0;
border-left: solid 5px transparent;
border-right: solid 5px currentColor;
border-top: solid 2px transparent;
border-bottom: solid 2px transparent;
}
/* ダークモード用 */
@media (prefers-color-scheme: dark) {
.memo__icon {
color: rgb(220,220,220);/* ダークモード時のペンシルアイコン色 */
}
}まとめ
11月からまた繁忙期に入るためコメントの返信等遅れるかと思います。この記事が今年最後になる可能性もありますので、みなさん良いお年を (ノﾟｪﾟ)
いくらなんでも早すぎか。すみません (∵`)
ゆるくてかわいい無料イラスト素材屋「ぴよたそ」
見るだけでも楽しい無料イラスト素材サイト
There are no comments yet.