by 【CSS】- LSS様が 基本 星峰アレンジ です
いつもありがとうございます
☆ この記事のもくじ ☆
- ♪ オリンピックグラデーション☆ 金・銀・銅 のイメージです
- ♪ まずはワタシは・・
- ♪ ワタシにとって CSS処理 HTML編集 は
- ♪☆((#^^#)ー☆ ワタシの基本は こんな吹き出し
- ♪ まるで 表彰台 ？ 大きくしてみた
- ♪ 宝塚の記事専用 ワインカラーの吹き出し は
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
((#^^#)ー☆<
メダル色グラデーション コードは ？？ こんな感じ
☆((#^^#)ー☆
<style><!--
.koeMEDARU { position: relative; padding: 20px; background-color: #ffffb2; background-image: radial-gradient(circle at 30% 30%,white,yellow,brown);border-radius: 15px; margin-left: 70px;border:1px solid gold; }
.koeMEDARU::before { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: #fff462; background-image: radial-gradient(circle at 30% 30%,white,#cccccc,#444444);border:1px solid gold;
left: -35px; bottom: 15px; width: 30px; height: 30px; }
.koeMEDARU::after { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: gold; background-image: radial-gradient(circle at 30% 30%,white,#dfa692,#cf9682);
left: -55px; bottom: 10px; width: 15px; height: 15px; }
--></style>
☆上がCSS処理 ☆ 下がHTML編集部分☆
<div class="koeMEDARU">♪ なに？ <strong>夜の9時過ぎ</strong>に？
<br /> <br /> まさか本当に<br /> <br />
リアルに高校野球！！</div>
【CSS】GOLDEN BALL【小ネタ】 - Little Strange Software
の 元の イメージ カラー配色 ＬＳＳ様のを 参考です
ワタシの テーマ・【パッチワーク】の場合は
レスポンシブ対応できてませんので
CSS処理も HTML編集も ブログの
文章入力画面におさめてしまいます ((#^^#)ー☆
だから スマホでも おんなじデザインになるんです
レスポンシブ対応の方は
デザインcssに
上部のCSS処理部分を貼り付けることで
ブログ作成の際 HTML編集部分のみセッテイングする
ってことが出来るでしょう ワタシは試してません
ただし【<style><!-- 】 ☆本文☆ 【 --></style>】
最初と最後の部分 を外してください
そして 自己責任です
必ず デザインcssは まるごとコピー保存しておきましょう
それでも デザインcssは ブログまるごとが変化しますので
直せるとは限りませんよ と くぎを刺しておきます ((#^^#)ー☆
イメージは 小学生の名札
〇〇市立 □□小学校 2年3組 鈴木 花子 みたいなもの
国立✕✕ 付属小学校 2年3組 鈴木 直子 とか
☆ HTML編集 なら すべて書いてある名札をもったお子さん
名札さえ見れば 何処のどんな子かが解る
そして そして
日によって ピンクのスカート はいたり
青いズボンだったり 帽子かぶったり リボンしてみたり
衣装・アクセサリーは つけたい放題 だったりするのです
☆ でも CSS処理 なら ブログの文字入力では
名札が 鈴木 となったり
2年3組 鈴木 花子 となったり
本体の 学校名とか詳しい部分や
お洋服の着せ替えは HTML部分には無くて
デザインcss に入っていたりする
もしかしたら取り違え なんかありそうな 怖さ
※ ちなみに はてなブログアプリ使うと 入力画面のcss
消えちゃうことも しばしば あります
だから 定型文に HTML編集として保管がオススメ
◇◆◇
◇◆◇
<style><!--
.koe { position: relative; padding: 20px; background-color: #ceff9e; border-radius: 15px; margin-left: 70px; }
.koe::before { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: #ceff9e;
left: -35px; bottom: 15px; width: 30px; height: 30px; }
.koe::after { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: #ceff9e;
left: -55px; bottom: 10px; width: 15px; height: 15px; }
--></style>
☆上がCSS処理 ☆ 下がHTML編集部分☆
<p> ◇◆◇</p>
<div class="koe">♪♪♪ここが文字入れ部分 </div>
<p> ◇◆◇</p>
☆((#^^#)ー☆
基本が こんなみどりです #ceff9e になります
グラテーションバーに合わせて
ペールグリーン（囲み枠がpalegreen）の時もあるんですが
・・・
あ 並べると 違いがわかるわ
色替えするなら
♪ background-color: #ceff9e; の部分 3か所が 色 です
好きな色 選んでみたら良いかも
枠線つけるなら
♪ border:1px solid gold; コレは枠線を1pxの細い実線 色がgoldってこと
好きな枠線 一番上大きい枠につけてみるのも良いかも
♪ 上の◇◆◇ から 下の◇◆◇ までを コピーペーストすると
編集見たまま画面でも 操作 貼りつけしやすいです
あとから ◇を 消しても良いし
♪ 文章は Shift+Enter で改行です Enterだったら
なんと もう一つ 吹き出しができちゃいます
文章の途中で Enter してみて ♪
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
♪♪ こんな感じ
♪♪
♪♪
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
☆((#^^#)ー☆
<style><!--
.koeME { position: relative; padding: 60px;
background-color: #ffffb2; background-image:
radial-gradient(circle at 30% 30%,white,yellow,brown);
border-radius: 50%; margin-left: 120px;
border:1px solid gold; }
.koeME::before { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: #fff462; background-image: radial-gradient(circle at 30% 30%,white,#cccccc,#444444);border:1px solid gold;
left: -45px; bottom: 30px; width: 100px; height: 100px; }
.koeME::after { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: gold; background-image: radial-gradient(circle at 30% 30%,white,#dfa692,#cf9682);
left: -85px; bottom: 15px; width: 50px; height: 50px; }
--></style>
☆上がCSS処理 ☆ 下がHTML編集部分☆
<p>.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ </p>
<div class="koeME">
<span style="font-size: 150%;"> ♪♪ 文字は</span><br />
<span style="font-size: 150%;"> ♪♪ こんな感じ</span><br />
<span style="font-size: 150%;"> ♪♪ </span><br />
<span style="font-size: 150%;"> ♪♪ </span> </div>
<p> </p>
<p>.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸</p>
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
基本は
上が CSS処理部分 です
小さいの 銅メダル koeME::after
中くらい 銀メダル koeME::before
大きい文字入れ部分 金メダル 本体
と 3つありますので
3つのバージョンを
コレは大きくなるよう つくりこんであります
pxの サイズ が ずいぶん違うでしょ
下が ブログの ページ上で 表示する部分
HTML編集 文字入れ部分ですね
パソコンの ブラウザ スマホサイズ等で
どんな文字になるのか
とりあえず 4行くらいが良いかも
フォントサイズ変えたし
保証できません 試してみてくださいね
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
♬☆カナリヤcanary yellow #fff462 色は まるバージョン
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ MARUまるバージョン
♪こんな感じ
♪♪
♪♪
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
☆((#^^#)ー☆
<p>.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ </p>
<style><!--
.koeMEMARU { position: relative; padding: 60px;
background-color: #ffffb2; background-image:
radial-gradient(circle at 30% 30%,white,yellow,brown);
border-radius: 50%; margin-left: 60px; width: 100px; height: 100px;
border:1px solid gold; }
.koeMEMARU::before { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: #fff462; background-image: radial-gradient(circle at 30% 30%,white,#cccccc,#444444);border:1px solid gold;
left: -45px; bottom: 15px; width: 100px; height: 100px; }
.koeMEMARU::after { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: gold; background-image: radial-gradient(circle at 30% 30%,white,#dfa692,#cf9682);
left: -85px; bottom: 15px; width: 50px; height: 50px; }
--></style>
☆上がCSS処理 ☆ 下がHTML編集部分☆
<p>.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ MARUまるバージョン </p>
<div class="koeMEMARU">
<span style="font-size: 100%;"> ♪文字は</span><br />
<span style="font-size: 100%;"> ♪こんな感じ</span><br />
<span style="font-size: 100%;"> ♪♪ </span><br />
<span style="font-size: 100%;"> ♪♪ </span> </div>
<p>.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ </p>
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
lavender 色は 四角バージョン
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ SIKAKU四角 バージョン
♪♪ こんな感じ
♪♪
♪♪
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
☆((#^^#)ー☆
<style><!--
.koeMESIKAKU { position: relative; padding: 60px;
background-color: #ffffb2; background-image:
radial-gradient(circle at 30% 30%,white,yellow,brown);
margin-left: 120px;
bottom: 5px; border:1px solid gold; }
.koeMESIKAKU::before { content: ''; position: absolute; display: block;
background-color: #fff462; background-image: radial-gradient(circle at 30% 30%,white,#cccccc,#444444);border:1px solid gold;
left: -45px; bottom: 30px; width: 100px; height: 100px; }
.koeMESIKAKU::after { content: ''; position: absolute; display: block;
background-color: gold; background-image: radial-gradient(circle at 30% 30%,white,#dfa692,#cf9682);
left: -85px; bottom: 30px; width: 50px; height: 50px; }
--></style>
☆上がCSS処理 ☆ 下がHTML編集部分☆
<p>.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸ SIKAKU四角 バージョン</p>
<div class="koeMESIKAKU">
<span style="font-size: 150%;"> ♪♪ 文字は</span><br />
<span style="font-size: 150%;"> ♪♪ こんな感じ</span><br />
<span style="font-size: 150%;"> ♪♪ </span><br />
<span style="font-size: 150%;"> ♪♪ </span> </div>
<p> </p>
<p>.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸</p>
<p> </p>
♪
.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸
CSスカイステージ無料放送で 台湾公演 3回分 素晴らしかったですよ～ - あたりまえ？それさあ。。。 を見て見て
☆((#^^#)ー☆
文字が 白抜き文字 color: #fff になります
<style><!--
.koewine { position: relative; padding: 20px; color: #fff;background-color: #b33e5c; border-radius: 15px; margin-left: 70px; }
.koewine::before { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: #b33e5c;
left: -35px; bottom: 15px; width: 30px; height: 30px; }
.koewine::after { content: ''; position: absolute; display: block;
border-radius: 50%; background-color: #b33e5c;
left: -55px; bottom: 10px; width: 15px; height: 15px; }
--></style>
☆上がCSS処理 ☆ 下がHTML編集部分☆
<div class="koewine">【さくらの日本舞踊 総踊り】祝いまんだらのラストの20分が好き</div>
♪が 基本
コチラの 色の辞典 から
好きな色を 選んで カスタマイズしてみて下さい
３こ 全部 変えるのも良いし
グラテーションに するのも よいし
オリンピックの 金・銀メダルみたいな 球 みたいなのは
border-radius: 50%; で 角を まるくして
background-color: #ffffb2;
background-image: radial-gradient(circle at 30% 30%,white,yellow,brown);
こんな感じの色使い
あっちから 30％ずつ 色を 白 黄色 茶色 に変化させています
コレは おかえりモネ でも 山と海をイメージして 使っています
background: linear-gradient(30deg,yellow, #bbdbf3);
幅・高さによっては 花火みたいに なるかも
今回のは CSS処理 ですが
ブログ入力画面 HTML編集画面だけでも 作れるので
ぜひ 挑戦してみては ？
☆((#^^#)ー☆b ☆((#^^#)ー☆
☆((#^^#)ー☆b ☆((#^^#)ー☆
☆((#^^#)ー☆b ☆((#^^#)ー☆
☆星峰☆ ( atarimaesore )
☆((#^^#)ー☆
あたりまえ？それさぁ。。。 のブログ
読んでいただき ありがとうございました。
☆((#^^#)ー☆この記事のもくじ☆((#^^#)ー☆
- ♪ オリンピックグラデーション☆ 金・銀・銅 のイメージです
- ♪ まずはワタシは・・
- ♪ ワタシにとって CSS処理 HTML編集 は
- ♪☆((#^^#)ー☆ ワタシの基本は こんな吹き出し
- ♪ まるで 表彰台 ？ 大きくしてみた
- ♪ 宝塚の記事専用 ワインカラーの吹き出し は
☆ 最後までありがとうございます☆((#^^#)ー☆
