今週のお題「大人になってから克服したもの」について考えてみたらありました。 乗り物酔いです。 地獄の遠足 地獄の夏休み旅行 克服できた理由 地獄の遠足 小さい頃は自動車、バス、電車、船、あらゆる乗り物に酔いました。 乗った瞬間から乗り物のにおいだ…

マイナンバーカードと運転免許証が来年3月に1体化するらしいですね。 つい最近、免許証の更新に行ってきたばかりなのでその時の話題も含め、果たしてマイナカードと免許の一体化はいいのか悪いのか、考えてみたいと思います。 更新に行った日のこと 講習がオ…

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

8月5日、日経平均が4451円の値下がりを記録。 ブラックマンデーを超える下落幅になったと話題になりましたね。 次の日戻ってましたが。 そのニュースとともに青汁王子こと三崎優太さんが信用取引で莫大な損失を被ったことが伝わってきました。 YouTubeなどで…

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

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

今回は文章の長さに合わせて伸び縮みする囲み枠を使ってみたいと思います。 参考にした記事はこちら！ www.atelier-sunko.info これまでのシンプルな囲い枠はこんな感じで文章に関係なく大きさは一定でした。 本文を入れる でもこれだと文章が短いときはなん…

今回はタイトル付き囲み枠を使ってみたいと思います。 参考にした記事はこちら！ www.fuji-blo.com 枠なしタイトルつき囲み枠 <div style="position: relative; padding: 1em 1em .5em; margin: 2em 0; border: solid 3px #b5b5b5; background: #ffffff;"> </div>

今週のお題「好きな小説」 最近気に入ってる小説は廣島玲子作「十年屋」です。 魔法使い「十年屋」の店をさまざまな人が訪れる物語。 自分の寿命1年と引き換えに10年預けたいものありますか？ 「十年屋」では、自分の寿命１年と引き換えに10年間預けたいもの…

今回は見出し用のデザインを使ってみたいと思います。 参考にした記事はこちら！ hitorizumu.com はてなブログの見出しは 大見出し、中見出し、小見出しの3つですね。 見出しに設定できるデザインはそれぞれ1個ずつ。 「カスタマイズ」画面のデザインCSSに貼…

今回はふんわりした雰囲気の囲み枠を使ってみたいと思います。 参考にした記事はこちら！ 0forest.com 白い線のステッチ風 <div style="border:2px dashed #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div> このコードをHTML編集画面に貼り付けるとこうなります。↓ テキストを入力 背景の色をふんわり系にして、枠の線を白に…

今回もおしゃれな囲み枠を探してみました。 参考にした記事はこちら！ 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編集画面に貼り付けるとこ…

今回もおしゃれな囲み枠を使ってみました。 参考にした記事はこちら！ 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>文章</strong></div></div>

はてなブログの見出しは １．大見出し ２．中見出し ３．小見出し の３つですね。 テンプレートだと文字が大きくなるだけなので、カスタマイズしていきたいと思います。 まず大見出しから。 参考にした記事はこちら。 hitorizumu.com 最初にもともとのデザイ…

ちょっと文字が小さくて読みにくいな、と思っていたところ 文字の大きさも自由に変えられる記事を発見。 bele.hatenadiary.com カスタマイズ画面の「デザインCSS」の部分に下のコードを貼り付けます。 .entry-content p {font-size: 18px; } さっそくやって…

今回は少し凝ったおしゃれな囲み枠を使ってみたいと思います。 <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…

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

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

ただの黒いラインだけなら左上にある アンダーラインアイコン からすぐできます。 線を引きたい場所をドラッグしてアイコンをクリックでOKですね。 色付きのアンダーラインをひく場合は <span style="background: linear-gradient(transparent 60%, #afeeee 60%);">文</span> をHTML編集の画面に貼り付けます。 そうするとこうなります。 「文…

他の人のおしゃれなブログをみて、 「はてなブログってこんなふうにできるんだ！？」 と思ったこと、ないでしょうか。 「ブログで一番大事なのは中身だ！」 というのはその通り。 日常をつづるブログならとくに装飾などいらない気もします。 一方でなにかの…