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

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

　　　　
にほんブログ村　

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

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

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

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

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

2022年2月2日に記事をアップしておきましょう　記念になるから - あたりまえ？それさあ。。。 (hatenadiary.jp)

　　◆　◆　◆　◆

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

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

◆　◆　◆　◆

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

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

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

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

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

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

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

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

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

♬　#ff99cc　は　こんな色

♬　#ffbfdf　は　こんな色

♬　#ffccff　は　こんな色

♬　#ffcce5　は　こんな色

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

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

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

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

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

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

色使いは　

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

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

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

www.colordic.org

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

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

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

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

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

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

楽天市場　5と0のつく日は
エントリー＆楽天カード利用でポイント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>

◆　◆　◆　◆