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

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

                           

【ブログ作り】 見出しの表現 どうする?? コードを忘備録

 
2月 節分から一年が始まる? イメージチェンジ
  中華街(中国?)では お正月モード オリンピックも・・・

 

あたりまえ?それさあ。。。 - にほんブログ村 にほんブログ村 テレビブログへ   にほんブログ村 その他生活ブログ 家計管理・貯蓄(50代)へ
にほんブログ村 

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

  ((#^^#)ー☆ 今回は CSS や HTML の忘備録 

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

はてなブログアプリ から 手直しすることも多いので
表現方法を見直し中 スマホでも 
ブラウザ? パソコン版で見る で直せば 大丈夫ですが
 アプリからだと CSS 壊れちゃうんですよね

作ったのは昔昔 だから いつもの div を使ってみる

上と下に ◆◆◆が グラデーションの枠

  いつもの div を使って手直ししてみたんです

   

 

結局 HTML 見直しして 今っぽく出来ました

 table だの tr だのって 使わなくても
ワタシがHTML 勉強していた時は tableが必須でした 
  いつもの div を使って 重ねてみた ってレイアウト

いまどきは HTML 編集 よりも CSS利用が良いらしいです

  ちなみに table だの tr だのって 表作りに使います 

 

つまり 上段に ◆ を色変えしながら 

大きさ変えながらレイアウトしてみました

そして 下段は それを 左寄せ を右寄せに
順番を入れ替えて 

真ん中の枠は いつもの枠 を使って

色をそろえて 上中下をくっつけたんです

♬ #ff99cc は こんな色

♬ #ffbfdf は こんな色

♬ #ffccff は こんな色

♬ #ffcce5 は こんな色

 

 枠 さえ 決めちゃえば (^^♪

枠の中を 長文にしてもいいし  長文利用は こちらのページ

【カムカムエヴリバディ】【愛してくださる皆様へ】と ホームページからメッセージ見つけました 【note】とか 子役さんのことも - あたりまえ?それさあ。。。 (hatenadiary.jp)
短くして 見出しにしてもいいし  

 もともとの見出しに アピールが強い場合はやめておいた方がいいですが 

ニャーニャーニャ2月のTHETIME。嶺百花さんの気象中継 何処に行ったでしょう。。 - あたりまえ?それさあ。。。 (hatenadiary.jp)

HTMLだから 見たまま編集で 見れてやりやすいかもです

色使いは 

 LSS (id:little_strange) さんの ブログサイドバーとかにある

カラーピッカーを オススメします

 

コチラの 色 大辞典も便利です

www.colordic.org

世界の伝統色 洋色大辞典 - Traditional Colors of World (colordic.org)

 

はてなブログ】 ならでは?? ほかの無料ブログは

 ほかの無料ブログでも 出来るものですよ

  アメーバブログ とか ほかのブログでも 

   HTML 編集画面で トライしてみて~  

 

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

 

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

楽天市場 50のつく日は
エントリー&楽天カード利用でポイント5倍です   

ぜひぜひ こういう日に お買い物をオススメです

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

 今回 四角枠を 👆上のを参考に作ってみました

   

 ◆◆◆ 文字はここに

◆◆◆◆◆白抜き文字は こんな感じ

   

  ((#^^#)ー☆ 

上記の色使い・コードは こんな感じ

   

<div align="left"><span style="color: #ff99cc; font-size: xx-large;">◆</span> <span style="color: #ffbfdf; font-size: x-large;">◆</span> <span style="color: #ffccff; font-size: large;">◆</span> <span style="color: #ffcce5; font-size: medium;">◆</span></div>
<div style="background-color: #ffcce5; padding: 15px; border-radius: 20px; border: 20px double #fff;">
<p> ◆◆◆ 文字はここに</p>
<p><span style="color: #ffffff;">◆◆◆◆◆白抜き文字は こんな感じ
</span></p>
</div>
<div align="right"><span style="color: #ff99cc; font-size: medium;">◆</span> <span style="color: #ffbfdf; font-size: large;">◆</span> <span style="color: #ffccff; font-size: x-large;">◆</span> <span style="color: #ffcce5; font-size: xx-large;">◆</span></div>

   

f:id:atarimaesore:20220203085507j:plain

仕上がりは こんな感じ になるはず



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

ちなみに ワタシがよく使うのは
こんな感じの グラデーションバー

 

グラデーションバーは カーソルをのせるとキラッキラッ

 グラデーション
    見ているだけで (´∀`*)ウフフとなるワタシ

普段は 見出しH2にして 使っています

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

 ワタシのグラデーションバーlavenderです・・・

コレは 最初の頃 普段使いしていた 色です 

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

 ワタシのグラデーションバーpalegreenです・・・

コレは 普段使いしている 色です 

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

 ワタシのグラデーションバーgoldです・・・

goldは 【がっちりマンデー】の色使い 

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

 ワタシのグラデーションバーpinkです・・・

pinkは 【宝塚歌劇団】【タカラジェンヌ】さんの時に 

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

 ワタシのグラデーションバーpinkです・・・

aquaは 時たま 気分転換で使います 

 

 LSS (id:little_strange) さんの コチラが基本です

little-strange.hatenablog.com

【CSSサンプル】カーソルを載せると動くグラデーションバー - Little Strange Software (hatenablog.com)

 

 

ワタシの ブログではグラデーションバー ここで ご紹介しました

【はてなブログ】グラデーションカラーバーのコードはこんな感じ - あたりまえ?それさあ。。。 (hatenadiary.jp)

atarimaesore.hatenadiary.jp

 

 

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

 

ちなみに オリンピック 的な 見出しもつくってみた

 

 ♪♪ NHKBSプレミアムで 
   1992年12 月の
  ♪♪ 伝説のコンサート

 

atarimaesore.hatenadiary.jp

 コチラの中に コードあるけど 微妙に変更してあります

 

atarimaesore.hatenadiary.jp

 

どうぞ ご自分のブログに 自己責任で使ってみて
 下書き で トライしてみることをオススメします

  一度 下書きに保存すれば
 使いまわしは簡単ですから(^^♪

 

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

  ((#^^#)ー☆  こういうパズル 大好きなんで
ちょっと 見てみて ~~ 


 

サンリオのパズル一覧 – Relajante-公式サイト

https://relajante.jp/collections/sanrio

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

 


 

アソビューの広告

 

 

月初 第一日曜日は スカパー無料放送日

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

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

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

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

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

スマホ・パソコンで もちろんテレビで テレビ

U-NEXT も オススメ 無料トライアルなら31日間無料

NHKオンデマンドも U-NEXT

宝塚歌劇も U-NEXT

毎月 220,000本以上の動画 / 150誌以上の雑誌が
見放題 読み放題 
っていうのも便利よね

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

楽天市場 お買い物マラソン 始まってますよ~~ ここからチェックしてね

 

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

☆星峰☆ ( atarimaesore ) 

☆((#^^#)ー☆

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

この記事のもくじ

あたりまえ?それさあ。。。 - にほんブログ村 にほんブログ村 テレビブログへ   にほんブログ村 その他生活ブログ 家計管理・貯蓄(50代)へ
にほんブログ村 

☆ 最後までありがとうございます☆((#^^#)ー☆ 
  パソコンから ぜひ ブログ村
    飛んでみてね クリックがカウントされるんですよー
 

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