囲み枠

テキスト今回はChatGPTで囲み枠を作ってとお願いしたらどんなものができるのか試してみました！ 「かわいい囲み枠を２つ作って」とお願いしたところ、できたのがこれ。 <div style="border: 2px solid #ff66b2; padding: 15px; border-radius: 10px; background-color: #fff5f8;"> <p style="margin: 0; color: #ff66b2; font-weight: bold;">この枠は、可愛らしいピンクの囲み枠です。</p> </div> この枠は、可愛らしいピンクの囲み枠です。 <di…

今回も見出しに使えそうなおしゃれな囲み枠を使ってみます。 参考にした記事はこちら！ maysun53.com 囲み枠２重線 文字黒 枠は２重線、文字は黒です。 <div style="background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;">ここに文章を入力します</div> このコードをHTML編集画面に貼り付けるとこうなります。↓ ここに文章を入力します #F7F7F7が背景色、#A1A1A1が線の色ですね。 box-shadowで枠の外側の色を指定できる…

今回もおしゃれな囲み枠を使ってみました。 参考にした記事はこちら！ maysun53.com １．ノーマルメモ帳風 メモ帳風囲み枠のコードはこちら。 いったんメモ帳にコピーしてから使ったほうがよいようです。 <div style="display: inline-block; background: #F7F7F7; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;"><div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;"><strong>文章</st…

シンプルな直線の囲い枠のバリエーションを作ってみます。 <div style="background: #fff; padding: 10px; border: 5px solid #c6c6c6;">本文を入れる</div> このコードをHTML編集画面に貼り付けるとこうなります。 本文を入れる 「solid」の部分を変えて線を変えていきます。 「dashed」破線にすると 本文を入れる 「groove」立体的な谷型の線にすると 本文を入れる 「ridge」立体的な山型の線にすると 本文を入れる 「outset」囲まれた部分が浮きあがって見える立体的な線 本文を入れる こんな感じになりました…

少し勉強発表（笑） こんな ことができた 囲み枠 やってみたかった ブログって囲み枠とかあるけど、どうやってやっているのか ずっと不思議だったけどやってみたらできたー！ コピペしててゃりつけてるだけだけど。 HTML編集初めて触ったけど よくこんなコード作れるひといるなぁと不思議。 とても参考になりました。 maysun53.com こうやって教えてくれるからやっていく道筋がわかる。 ありがとうございます❤️

ブログカスタマイズの第8回目です！ 今回は、ブログ記事でよく見かける「タイトル付きの囲み枠」の作り方を紹介します。 「タイトル付きの囲み枠」は、簡単にコピペで作れるとよく紹介されていますが、CSSを使わずにstyleプロパティを直接指定して作成する方法が一般的です。 しかし、この方法では、後でスタイルを変更したい場合に、一つずつ「タイトル付きの囲み枠」を変更する必要があります。 そこで、ここではCSSを使った「タイトル付きの囲み枠」の作り方と、本文の枠にタイトルの枠をどのように重ねているかを解説します。 それでは、早速やっていきましょう！

はてなブログ×BOXデザイン（囲み枠） あなたがブログやWebサイトを見るとき、デザインがよいブログやWebサイトには好印象を持ちますよね。 この記事では、はてなブログのデザイン・カスタマイズのうち、使いやすい「BOXデザイン（囲み枠）」の作り方（コピペOK）を解説します。 紹介するBOX（囲み枠）デザインは5種類。 ①シンプルBOXデザイン（囲み枠） ②帯タイトル付きBOXデザイン（囲み枠） ③短いタイトルのBOXデザイン（囲み枠） ④ラベル付きBOXデザイン（囲み枠） ⑤見出し付きBOXデザイン（囲み枠） 読者に好印象を持ってもらうために、はてなブログの記事の中の強調したい部分や目立たせた…