はてなブログに”囲い枠”を導入してみた。
今日は”はなちゃん”からスタートです。
ところで”はなお”さん!最近記事を読んでいると囲い枠を良く使っていますね。
これはなんですか?
こんばんは。”はなお”です。
はなちゃん!よく気づきましたね。皆さんのブログを読んでいると、ポイントなど強調したい時に囲い枠で見やすくなっていたので、私も導入してみました。
確かに説明するポイントなど囲い枠で表示されると見やすいですよね。
そうなんです!
今回は囲い枠のカスタマイズした事を備忘録として残したいので記事にしました。
はてなブログでは囲い枠のボタンが無い。
はてなブログでは箇条書き、番号付きリスト、目次、引用などのボタンしか無く、囲い枠のボタンがありません。
今回作成したい囲い枠
今回は”ヨシタカ”さんのすまてくブログから一番好きなデザインをチョイス!
色々なデザインがあり参考になりました。
”ヨシタカ”さんありがとうございました。
これを作成してみます。
定型文の貼り付けで設定出来る!
色々調べてみると、はてなブログ定型文貼り付け機能で出来る事がわかりました。
吹き出し会話を作成したときと同様に「サイドバー>定型文貼り付け>定型文を作成する」を選択すると下記の表示がされます。
コードを貼り付け
◇タイトルに赤囲い枠と入力
◇下のボックスに下記コードを貼り付け
◇最後に保存を押す
◆ここにタイトルを入力します◆
</span></div><div style="border: 2px solid #fc4a1a; padding: 10px;">
ここに本文を入力します。<br>
改行した文章が表示されます。
</div>
はなちゃん!
登録完了したのでテストをしてみます。
記事の画面で「定型文貼り付け機能を呼び出し>赤い囲い枠を選択>選択した定型文を貼り付け」を選択
作成出来ていますか!
改行した文章が表示されます。
バッチリです!
最後に
今回囲い枠を作成してみました。記事にポイントを加える事によって見やすくなりますよね。
ヨシタカさんのサイトから”赤い囲い枠”と”影付き囲い枠”をチョイスさせて頂きました。
これからもカスタマイズしていきます。