囲み枠

囲み枠も素敵なものがたくさん作られていてどれを使おうか迷うほどです。 まずはシンプルな囲み枠を使ってみます。 シンプルな直線の囲み枠 <div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">本文を入れる</div> このコードをHTML編集画面に貼り付けるとこうなります。 本文を入れる 線の太さは「2」の部分を変えればよさそうです。 「5」にするとこんな感じ。 本文を入れる 線の色は#FFC0CBの部分を変えればよさそうです。 たとえば（#2a83a2）を使ってみると、 本文を入れる こんな感じになります。 シ…

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

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

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

数日前から適用していますが、「囲み枠」「目次」「蛍光マーカー」のデザインを少し変更してみました。少し前に見出しのデザインを変更して、それによって他のデザインも気になってきて変更してみた次第です。関連記事【はてなブログ-カスタマイズ】見出しデザインをCSSで変更どの変更も色合いを調整したくらいのものですが、せっかくなので変更した内容を書いていこうと思います。それではサクッと本題へ。

ダイエットのデメリット 原因と対策 太りやすくなる 髪、肌の状態が悪くなる骨がもろくなる免疫力が下がる 精神的に不安定になる 私の経験したデメリット まとめ 参考にさせていただいたページ ダイエットしようと 思っている方や 現在ダイエット中の方は 健康のためだったり 見た目をよくするためだったり それぞれ 何か目的が あって はじめられたと思います 今回は ダイエットの デメリットについて 紹介し その対策と 私が実践したこと 経験したことについて 書きます ダイエットのデメリット 下記のようなデメリットが 挙げられます １．太りやすくなる２．髪、肌の状態が悪くなる３．骨がもろくなる４．免疫力…

今回は見出しにも使える囲み枠を使ってみたいと思います。 参考にした記事はこちら！ www.moca-memo.com ふせん風囲み枠 ピンク系 黄色系 緑系 紫系 水色系 ふせん風囲み枠 <div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ここに本文を入れます♪</div> このコードをHTML編集画面に貼り付けるとこうなります。↓ ここに本文を入れます♪ 文章幅に合わせたいときはdisplay:in…

今回もおしゃれな囲み枠を探してみました。 参考にした記事はこちら！ maysun53.com 囲み枠２重線 文字白 文字を白抜きにして枠を２重線にします。 <div style="background: #696969; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;"><p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p></div> このコードをHTML編集画面に貼り付けるとこ…

今回は少し凝ったおしゃれな囲み枠を使ってみたいと思います。 <div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #333333; background: #ffe0f0; box-shadow: 0 0 0 5px #ffe0f0; border: dashed 2px #ffffff;">ここに本文</div> このコードをHTML編集画面にはりつけます。 そうするとこうなります。 ここに本文 色を変えてみます。 #ffe0f0の部分を変えていきます。 #ff…

【iFreeNEXTインド株インデックス】を運用中です。運用期間は特定口座で10ヶ月，NISA口座の成長投資枠で8ヶ月です。2つの口座の運用成績についてまとめましたので，よろしければお付き合い下さい！ 【iFreeNEXTインド株インデックス】2つの口座で運用中 【iFreeNEXTインド株インデックス】10ヶ月目の運用成績（特定口座） 【iFreeNEXTインド株インデックス】8ヶ月目の運用成績（NISA口座） 【iFreeNEXTインド株インデックス】今月もオルカンに勝利 【iFreeNEXTインド株インデックス】回復に向かって 【iFreeNEXTインド株インデックス】2つの口座で運用中…

FXトレードに興味を持ち、学び始めたばかりの方や、ある程度の経験を積んでいる中級者にとって、最も重要なステップの一つが「デモトレード」です。 デモトレードとは、仮想資金を使って実際の相場でトレードを行うシミュレーションのことです。 リスクを負わずに市場での経験を積むことができ、実際の資金を投入する前にトレード戦略を試す絶好の機会となります。 本記事では、デモトレードの重要性、具体的な検証ツールの紹介、そしてデモトレードを最大限に活用するための方法について解説します。 ◆ポイント◆ ここに本文を入力します。見出し付き直線の囲み枠例です。 1 │ デモトレードのメリット 2 │ デモトレードで使用…

【iFreeNEXTインド株インデックス】を運用中です。運用期間は特定口座で9ヶ月，NISA口座の成長投資枠で7ヶ月です。2つの口座の運用成績についてまとめましたので，よろしければお付き合い下さい！ 【iFreeNEXTインド株インデックス】2つの口座で運用中 【iFreeNEXTインド株インデックス】9ヶ月目の運用成績（特定口座） 【iFreeNEXTインド株インデックス】7ヶ月目の運用成績（NISA口座） 【iFreeNEXTインド株インデックス】今月もオルカンに勝利 【iFreeNEXTインド株インデックス】小さな下落にほっとして 【iFreeNEXTインド株インデックス】2つの口座で運…

本ページにはプロモーションが含まれます。 当ブログのHTML/CSSコードをご紹介します。 はてなブログの「箇条書き」「番号付きリスト」を魔改造して簡単に囲み枠(ボックスデザイン)が出てくるようにしました。 使えそうであればご自由にコピペしていただき構いません。 当ブログの箇条書きと番号付きリスト 引用元 みやもとメモ デザインテーマ・設定 箇条書きのコード 【デザインCSS】に貼るコード CSS解説 番号付きリストのコード 【デザインCSS】に貼るコード CSS解説 当ブログの箇条書きと番号付きリスト これは当ブログの箇条書きです。 箇条書き機能ををほとんど使っていなかったので、箇条書きボタ…

人は自分で選択したいという「心理的コントロール」を求める性質があります。自分がやりたい仕事を、自分がやりたいようにするといったような感じにです。 ただ、仕事は全てが自分の好きなように進むわけではありません。「やらされている」と感じながらする仕事もあるでしょう。 それが少しならイイですが、大半を「やらされている仕事」になりネガティブな感情を持つようになると、「自分は何をやっても駄目だ、、」と感じてしまうこともあります。 そういった時に人はネットショッピングで爆買いをしてしまったりします。 多くの人がストレスを感じるとしてしまう「ネットでの買いすぎ」ですが、買い物は自分主導なので「心理コントロール…

脱クラウドソーシングで個人サイトを作るにあたり、『アメーバブログ』を始めてみたのですが、なんだか自分には合わない気がして『はてなブログ』も追加で始めました٩ʕ•ﻌ•*ʔو どちらが向いているか、アメブロとはてなブログを行き来してみた結果、どちらにも良いところがあったので、比較結果をまとめてみました↓ 記事の書きやすさ ダントツでアメブロです！スマホからでも見出しや囲み枠、吹き出し等の装飾が簡単にできます♪(ただしアプリに限る) はてなブログの方は、スマホからだと機能が限られていて、文字サイズやカラーの変更も「HTML編集」からタグ入れないとできません。(太字と打ち消し線は「見たまま編集」からも…

2024年6月27日 まかろんさん、猫娘7号さん、zfinchyanさん、ａと ｍさん、ゆきにーさん、カツピチさん、いつもスターをありがとうございます。 makarotteさん、読者登録をありがとうございます。 6月18日に、Gmailから特定のタイトルのメールを抽出して、本文をスプレッドシートに転記するGASを作った。 1day1new.hatenadiary.com 単に、クレジットカード会社のWebサイトにアクセスすれば良かったのだが、作ってから気づいたのがアホよねえ。 今回は、はてなブログの毎日のメール、[Hatena::S] くらーくさんの☆レポート、から、スターをつけてくれた方への…