あたりまえ?それさあ。。。

☆★☆あたりまえの毎日にテレビからの刺激を ☆楽天市場はながーいつきあい☆★☆

                           

オリンピックグラデーションのふきだしの コードはこんな感じ

♪ オリンピックグラデーション☆ 金・銀・銅 のイメージです 

     by 【CSS】- LSS様が 基本 星峰アレンジ です
    いつもありがとうございます

♪ なに? 夜の9時過ぎに?
 
     まさか本当に
 
        リアルに高校野球!!

 

☆ この記事のもくじ 

 にほんブログ村 テレビブログ テレビ感想へ
にほんブログ村 にほんブログ村 テレビブログ テレビ感想へ

.•*¨*•.¸ ♫ .•*¨*•.¸ ♫ .•*¨*•.¸   

吹き出し CSS処理 順番に コード表示します

 

 ((#^^#)ー☆<

メダル色グラデーション  コードは ?? こんな感じ

f:id:atarimaesore:20210816171023j:plain


 

 ☆((#^^#)ー☆

♪ LSS 様からの 吹き出しアレンジ コード メダル仕様 トップのやつ
<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

 の  元の イメージ カラー配色 LSS様のを 参考です

little-strange.hatenablog.com

 

 

 ♪ まずはワタシは・・ 

ワタシの テーマ・【パッチワーク】の場合は

レスポンシブ対応できてませんので

CSS処理も HTML編集も ブログの

文章入力画面におさめてしまいます ((#^^#)ー☆
だから スマホでも おんなじデザインになるんです

 

レスポンシブ対応の方は

デザインcssに 

上部のCSS処理部分を貼り付けることで

ブログ作成の際 HTML編集部分のみセッテイングする

ってことが出来るでしょう  ワタシは試してません

 

 ただし【<style><!-- 】 ☆本文☆ 【 --></style>】
最初と最後の部分 を外してください 
そして 自己責任です 
必ず デザインcssは まるごとコピー保存しておきましょう
 それでも デザインcssは ブログまるごとが変化しますので
直せるとは限りませんよ と くぎを刺しておきます  ((#^^#)ー☆

 

 ♪ ワタシにとって CSS処理 HTML編集 は

イメージは 小学生の名札

〇〇市立 □□小学校 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回分 素晴らしかったですよ~ - あたりまえ?それさあ。。。   を見て見て

 
【さくらの日本舞踊 総踊り】祝いまんだらのラストの20分が好き
 

 ☆((#^^#)ー☆ 

♪ 宝塚の記事専用 ワインカラーの吹き出し

文字が 白抜き文字 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>

 ♪  

 が 基本

 

 

 コチラの 色の辞典 から

好きな色を 選んで カスタマイズしてみて下さい
3こ 全部 変えるのも良いし
グラテーションに するのも よいし

www.colordic.org


オリンピックの 金・銀メダルみたいな 球 みたいなのは

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編集画面だけでも 作れるので
ぜひ 挑戦してみては ?

 

【スカパー!】加入月は視聴料0円!加入料も不要!  

 

 ☆((#^^#)ー☆b ☆((#^^#)ー☆

【スカパー!】基本プランなら50ch見放題でお得!

☆((#^^#)ー☆b ☆((#^^#)ー☆

☆((#^^#)ー☆b ☆((#^^#)ー☆

 

☆星峰☆ ( atarimaesore ) 

☆((#^^#)ー☆

あたりまえ?それさぁ。。。 のブログ

読んでいただき  ありがとうございました。

 

 

 

☆((#^^#)ー☆この記事のもくじ☆((#^^#)ー☆

 

☆ 最後までありがとうございます☆((#^^#)ー☆ 
 

全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】