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

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