jack-hana’s blog

趣味など好きな事を語っていきます

はてなブログに”囲い枠”を導入してみた。

f:id:jack-hana:20211030025426p:plain

今日は”はなちゃん”からスタートです。
ところで”はなお”さん!最近記事を読んでいると囲い枠を良く使っていますね。
これはなんですか?


こんばんは。”はなお”です。
はなちゃん!よく気づきましたね。皆さんのブログを読んでいると、ポイントなど強調したい時に囲い枠で見やすくなっていたので、私も導入してみました。

確かに説明するポイントなど囲い枠で表示されると見やすいですよね。

そうなんです!
今回は囲い枠のカスタマイズした事を備忘録として残したいので記事にしました。

はてなブログでは囲い枠のボタンが無い。

はてなブログでは箇条書き番号付きリスト目次引用などのボタンしか無く、囲い枠のボタンがありません。

f:id:jack-hana:20211028215812p:plain:w500

今回作成したい囲い枠


今回は”ヨシタカ”さんのすまてくブログから一番好きなデザインをチョイス!
色々なデザインがあり参考になりました。
”ヨシタカ”さんありがとうございました。

◆今回作成したい囲い枠◆
上にタイトル名が記入出来て、赤い枠で囲まれた素敵なデザインです!
これを作成してみます。

smatech.hatenablog.com

定型文の貼り付けで設定出来る!

色々調べてみると、はてなブログ定型文貼り付け機能で出来る事がわかりました。
吹き出し会話を作成したときと同様に「サイドバー>定型文貼り付け>定型文を作成する」を選択すると下記の表示がされます。
f:id:jack-hana:20211028012136p:plain:w500

コードを貼り付け

 ◇タイトルに赤囲い枠と入力
 ◇下のボックスに下記コードを貼り付け
 ◇最後に保存を押す

<div style="background: #fc4a1a; border: 2px solid #fc4a1a; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">
ここにタイトルを入力します
</span></div><div style="border: 2px solid #fc4a1a; padding: 10px;">
ここに本文を入力します。<br>
改行した文章が表示されます。
</div>

はなちゃん!
登録完了したのでテストをしてみます。
記事の画面で「定型文貼り付け機能を呼び出し>赤い囲い枠を選択>選択した定型文を貼り付け」を選択
作成出来ていますか!

◆ここにタイトルを入力します◆
ここに本文を入力します。
改行した文章が表示されます。

バッチリです!

最後に

今回囲い枠を作成してみました。記事にポイントを加える事によって見やすくなりますよね。
ヨシタカさんのサイトから”赤い囲い枠””影付き囲い枠”をチョイスさせて頂きました。
これからもカスタマイズしていきます。

過去記事

jack-hana.hatenablog.com