投稿日2021/01/17 更新日2021/04/09
おはようございます！
魔太郎Gちゃんです。
ブログの文章を読みやすくするのに太字を使ったり大文字にしたり色を変えたりすることができますね。
自分のブログを読んでくれる人に読みやすいように工夫することは大切なことです。
今回は文章に囲み線をつける方法を、はてなブログの定型文機能で簡単にできるやり方でお伝えします。
囲み線とは
このようなものです。
はてなブログの定型文機能とは
2020年4月30日にはてなブログの開発ブログで公開された機能です。これはいつも使う「定型文」を保存して繰り返し簡単に使えるということです。
はてなブログの有料版（Pro）であれば100件まで登録できます。
もちろん単語登録でもできますが今回はてなブログの定型文機能がすごいのは「HTMLコード」も定型文に入れられて黄色マーカーや囲み線や吹き出しを簡単に作れるということなんです。
HTMLコードなんてわからないけど
わからなくていいですよ。「黄色マーカーや囲み線などが定型文機能でチョー簡単に出来る」ということだけ覚えておけばいいです。
はてなブログの定型文機能で囲み線をつける方法
最初にするのは「定型文貼り付け」のアイコンを編集サイドバーに取り付けすることからです。
手順１：画面右側の編集サイドバーを開いて「＋」をクリックする
手順２：開いた画面の下の方にある 定型文貼り付けをクリックする
編集サイドバーにこのようなアイコンが表示されたら第一段階終了です。
次に囲み線を定型文一覧に取り付けます。
手順３：サイドバーにある定型文貼り付けアイコンをクリックして、定型文を作成するをクリッする
手順４：開いた画面にタイトルを入力します。次に下の部分にHTMLコードをコピーして保存するをクリックします。
タイトルは 囲み線オレンジ とします。
コードはこれをコピーします。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 3px solid #ffa500; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
</div>
編集サイドバーがこのようになれば完成です。これで準備ができました。
囲み線の使い方
それではさっそく囲み線オレンジをつかってみましょう。
手順１：編集サイドバーにある定型文貼り付けのアイコンをクリックする
手順２：囲み線オレンジをクリックして、記事の貼り付けたいところにカーソルを置いて、選択した定型文貼り付けをクリックする
するとこうなるので囲み線のなかに文字を入力します。
囲み線を簡単に取りつける方法まとめ
魔太郎はこれまで囲み線はCSSを設定してHTMLを貼り付ける作業をしていました。これがけっこう面倒なんですね。
それがあるとき偶然に一発で出来るモノをみつけて、さらにはてなブログの定型文機能に利用できる事がわかって紹介してます。
ということは他にも一発でできる囲み線などがあると思われますが魔太郎の力不足でわかりません。
とりあえず今わかっている一発で出来る囲み線をあと3個ご紹介します。
①囲み線点線オレンジ
コードはこれをコピーします。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 3px dotted #ffa500; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
</div>
②囲み線ブルー
コードはこれをコピーします。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 3px solid #00bfff; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
</div>
②囲み線点線ブルー
コードはこれをコピーします。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 3px dotted #00bfff; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
</div>
定型文の修正や削除の方法
設定した定型文を修正したり削除の仕方です。定型文タイトルの右側「･･･」をクリックすればできます。
まとめのまとめ
効率よくブログをつくるのに便利な機能があるのですね。魔太郎は楽をしたい性格なのでとても助かっています。
今回紹介した囲み線は、線の種類、太さ、色のコードを自分でかえれば違うものが出来ることに気づきました。もう少し勉強したらお伝えしますね。
ただカスタマイズに夢中になりすぎるのもいけません。魔太郎はつい夢中になってしまって肝心の記事を書くことがおろそかになるので注意してます。
わかりやすくて、役に立つ、そしてユーモアの精神が溢れたブログを目指していきたいと改めて思いました。
自分で書いて自分を元気づけています（笑）
では、またね！！
クリックしていただけると嬉しいです
