はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

背景

バブル風背景

今回はバブル風背景を作ってみました! <div style="background-color: #ADD8E6; padding: 50px; border-radius: 10px; position: relative;"> <p>浮遊するバブルエフェクトの内容</p> <div style="position: absolute; top: 10px; left: 50px; background-color: rgba(255, 255, 255, 0.7); width: 30px; height: 30px; border-radius: 50%;"></div> </div>

夜空の背景

今回は夜空をイメージした背景を作ってみました! 静かな夜空 月の輝く夜空 明るい夜空 静かな夜空 <div style="border: 2px solid #1e3a8a; border-radius: 15px; padding: 20px; background: linear-gradient(to bottom, #001f3f, #708090); color: #ffffff; box-shadow: 0 0 15px #696969;"><p style="color: #ffffff;">ここに文章</p></div> ここに文章 濃い青色の背景のグラデーションで静かな夜空を…

ホラーな背景

今回はホラーな雰囲気の背景を作ってみました。 血痕風

水玉の背景

今回はChatGPTを使って水玉の背景を作ってみました。 ピンクの水玉 <div style="background: radial-gradient(circle, #ffccff 20%, transparent 20%) 0 0, radial-gradient(circle, #ffccff 20%, transparent 20%) 25px 25px; background-color: #ffffff; background-size: 50px 50px; padding: 20px; border-radius: 10px;"> <p><strong>ここに文章</strong></p></div>

おしゃれな背景 チェック枠 透過カラー

今回はおしゃれな背景のチェック枠を使ってみたいと思います。 参考にした記事はこちら! yunico-fluffylife.com チェック背景ボックス

ハロウィン用かぼちゃ風の背景

今回はハロウィン用かぼちゃ風の背景を作ってみました。 かぼちゃカラー背景 <div style="background: repeating-linear-gradient(orange, orange 50px, #ff8c00 50px, #ff8c00 100px), repeating-linear-gradient(135deg, #000 2px, transparent 2px, transparent 50px) 0 0 / 100px 100px; padding: 20px; border: 1px solid #333; border-radius: 10px;"></div>

おしゃれな背景 ストライプ枠 透過カラー

今回はおしゃれな背景を使ってみたいと思います。 参考にした記事はこちら! yunico-fluffylife.com ストライプの背景 <div style="border: none; background: repeating-linear-gradient(-45deg, #ECE8E1, #ECE8E1 10px, #FFFFFF 10px, #FFFFFF 20px); padding: 15px;"></div>

おしゃれな背景 ドット枠

今回はおしゃれな背景を使ってみたいと思います。 参考にした記事はこちら! yunico-fluffylife.com ドット背景

背景 グラデーション+立体

今回はグラデーション+立体の背景を使ってみたいと思います。 参考にした記事はこちら! www.moca-memo.com グラデーション+立体の背景

背景 ストライプ

今回はストライプの背景を使ってみたいと思います。 参考にした記事はこちら! www.moca-memo.com 1.太めのストライプ オレンジ系 緑系 水色系 2.中太のストライプ オレンジ系 緑系 水色系 3.細めのストライプ オレンジ系 緑系 水色系 1.太めのスト…

背景 水玉

今回は水玉の背景を使ってみたいと思います。 参考にした記事はこちら! www.moca-memo.com ◆目次 1.白い水玉 オレンジ系 緑系 水色系 紫系 2.色付きの水玉 オレンジ系 緑系 水色系 紫系 1.白い水玉

背景 単色

今回は単色の背景を使ってみたいと思います。 参考にした記事はこちら! smatech.hatenablog.com 単色の背景 <div style="background: #fceff2; border: none; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div> このコードをHTML編集画面に貼り付けるとこうなります↓ ここに本文を入れます♪ 文章幅に合わせて、色を変えてバリエーショ…