日々楽しく、自由きままに!

気まぐれおやじの日々の出来事や趣味の旅行記を綴っています

灯台下暗し!「定型文機能」の便利な使い方

当ブログには広告を掲載しています

★気まぐれおやじの広告★

 

皆さんこんにちは、こんばんは!

本日も気まぐれおやじのブログにご訪問ありがとうございます

おいらは今日も「日々楽しく、自由きままに!」

 

大阪の感染者数も激減し、通天閣のイルミネーションも緑が灯りました

それに伴い今週から通常勤務に戻りました

嬉しいやら悲しいやら・・・

今日でまだ5日目ですが、早くも在宅勤務の楽さが恋しいです

f:id:koulog:20211027211155j:plain

さて今回は、気まぐれおやじさん的ブログ初心者講座です

前回投稿したブログの記事に「超簡単🙂絵文字入力」が大好評でした

多数のコメント、ブッコメありがとうございました

koulog.hatenadiary.com

 

 

「定型文機能」の便利な使い方

そこで今回は、タイトルにもある様に「定型文機能」の便利な使い方です

が、・・・

おいらもこんな機能がある事は全く知りませんでした

おいらみたいに「そんな機能全く知らんよ」って方は是非参考にして下さい

「今更何を言ってるの」ってご存知の方、中、上級者の方は下まで下がってスターを押してご退席してくださって結構で~す

ご訪問ありがとうございました _(._.)_

 

では同士よ、先に進めますε=(ノ゚Д゚)ノイクゼー

今までの定型文の作成方法

そこで、定型文機能って何よ?ってなるよね

先ずは、おいらのこれまでの定型文作成方法から説明します

 

f:id:koulog:20211026144643j:plain

 

おいらのブログは、赤で囲った部分から始まります

毎回この文章から始まります

いわゆる定型文ですね

 

f:id:koulog:20211026144922j:plain

そしてこちらの赤で囲った部分が、一番最後の文章と各アイコンです

こちらも毎回このパターンで終わります

これもいわゆる定型文ですね

 

f:id:koulog:20211027100413j:plain
f:id:koulog:20211026152330j:plain


今まではこの二か所の定型文をコピペするために、はてなブログのサイトを二つ開いて、一つはブログ作成用のサイト、もう一つはコピペ用のサイトとして使っていました

ですからあっちでコピーし、こっちに戻って貼り付け、凄くめんどくさかったのです

灯台下暗し!定型文機能で簡単設定

ところが、ある読者さんのブログを読んでいた時、吹き出し設定の記事が書かれていて、そのHTMLコードを定型文機能に保存する事で、いつでも瞬時に使えるみたいな記事が書かれていて、「うわぁー!何これ?こんな機能があったんか」ってなったんです

正に灯台下暗しってやつです

言及して良いのか分からないので、我が愛する北海道に在住のPさん、ありがとうございましたとだけ言っておきます

多分ご本人は「あれ?これって私の事」って気づくとは思うんですけど・・・

もし差し支えなければコメントお待ちしていま~す

 

追記

この記事を投稿後、pikaさんより言及OKのコメントを頂きましたので、記事に貼り付けさせて頂きました

www.pika-log.com

 

さて、ブログのカスタマイズに興味の無い方からすれば、この時点でHTMLコードって何?ってなるのでしょうが、今回も特別大出血サービスで、皆さんが分かる様に細かく説明していきますので安心して下さい(履いていますから (古))

定型文機能はここにあります

基本的には定型文を作って、定型文機能に保存です

では早速やっていきます

先ずは定型文機能がどこにあるかです

 

f:id:koulog:20211027102646j:plain

ブログ作成画面の右端にサイドバーがあります

そのサイドバーにいくつかのアイコンが並んでいます

赤丸で囲んだ一番下の➕アイコンをクリックして下さい

 

f:id:koulog:20211027104155j:plain

f:id:koulog:20211027104226j:plain

サイドバーにずらずらとショートカットキーが出て来たと思います

一番下の機能の中にある定型文貼り付けをONにして下さい

 

f:id:koulog:20211027105217j:plain

するとサイドバーに定型文貼り付けのショートカットアイコンが、新たに追加されたと思います
そのアイコンをクリックして下さい

 

f:id:koulog:20211027110142j:plain

サイドバーが定型文貼り付けに変わります

ではここから定型文を作って行きますので、赤丸で囲んだ定型文を作成するをクリックして下さい

定型文を作ってみよう(失敗例)

f:id:koulog:20211027111651j:plain

定型文を作成する画面になりました

ここで定型文を作るのですが、チョット問題があるので、定型文作成の成功例と失敗例の両方を説明します

 

f:id:koulog:20211027112953j:plain

先ずは失敗例からです

タイトルはスタートとしました

定型文は、いつものご挨拶文です

これで保存します

 

f:id:koulog:20211027114346j:plain

定型文一覧にスタートが追加されました

スタートをクリックすると、下にある選択した定型文を貼り付けが表示されますので、クリックして下さい

 

f:id:koulog:20211027115203j:plain

作成した定型文が貼り付きましたが・・・

羅列して貼り付けられるため修正しないといけません

「日々楽しく、自由きままに!」も、後で太字に修正しないといけません

これではまだめんどくさいです

定型文を作ってみよう(成功例)

f:id:koulog:20211027122301j:plain

ではここからが成功例です

ブログ作成画面で、定型文にしたい文章を作ります

おいらはいつものスタートとENDです

色文字、太字、アイコンなど今まで作っていた様に作成して下さい

 

f:id:koulog:20211027123039j:plain

見たまま編集からHTML編集に変更するとこの様な画面になります

 

f:id:koulog:20211027124036j:plain

スタートのHTMLコードをコピーして、先ほどの定型文を作成する画面に貼り付け、保存するをクリックします

 

f:id:koulog:20211027124049j:plain

同じ様にENDのHTMLコードをコピーして、先ほどの定型文を作成する画面に貼り付け、保存するをクリックします

 

f:id:koulog:20211027130005j:plain

スタートとENDが追加されました

一度に全ては出来ないので一つずつ貼り付けていきます

 

f:id:koulog:20211027130553j:plain

スタートです

きちんと三行文になっています

「日々楽しく、自由きままに!」も、太字で表示されています

 

f:id:koulog:20211027131515j:plain

ENDの部分も、アイコンも含めてきちんと表示されています

定型文を作っておけばその都度作る事もなく、毎回貼り付けるだけで良くなり、サイトを行ったり来たりしなくても良くなりました

定型文機能を使って応用編

如何でしたか?凄く便利でしょ

最初と最後の作業が楽になりました

そこで便利ついでにもう一つ

ここからはチョットだけ今までの応用編です

定型文機能で囲み枠も簡単に作成

皆さんや、皆さんが読まれているブロガーさんで、ブログの文章の中に囲み枠を使っておられる方がいると思います

その囲み枠も簡単に使えちゃうんです

囲み枠とは

角丸の囲み枠

ここに本文を入力します。
角丸の囲み枠例です。

この様に、文章を枠で囲んで表現する方法です

良く見かけますよね

角丸の囲み枠HTMLコード

<div style="background: #fffaf4; padding: 10px; border: 2px solid #ffa333; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">

ここに本文を入力します。<br>

角丸の囲み枠例です。

</div>

上のHTMLコードをコピーして、先ほどと同様に定型文を作成する画面に貼り付け保存するだけです

後は同じ様に定型文一覧から選んで、貼り付けするだけで、ブログ作成時に瞬時に囲み枠を使えます

貼り付けたら枠の中の文章を書き換えるだけです

ここで注意しなければいけないのが改行です

Enterだけでなく、必ずshift+Enterで改行して下さい

 

現在のコードはオレンジですが、色も変更できます

コードの中の文字、枠線が#ffa333(濃いオレンジ)です

枠の中は#fffaf4(薄いオレンジ)です

色の変更はこちらからカラーコードを選んで書き直すだけです

www.colordic.org

比較的使いやすい囲み枠

参考までに、何点か囲み枠のHTMLコードを書いておきますね

点線の囲み枠

ここに本文を入力します。
点線の囲み枠例です。
 
点線の囲み枠HTMLコード

<div style="background: #fffaf4; padding:10px; border:2px dashed #ffa333;">

ここに本文を入力します。<br>

点線の囲み枠例です。

</div>

 

テープ付き付箋風囲み枠

 
ここに本文を入力します。
テープ付き付箋風囲み枠例です。
 
テープ付き付箋風囲み枠HTMLコード

<div style="margin-left:10px;"><div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffe0;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>

ここに本文を入力します。<br>

テープ付き付箋風囲み枠例です。

</div></div>

 

ポイント文字囲み枠

ポイント! こういうのよく見ますよね。
こちらが今回のポイントです!みたいな。

 

ポイント文字囲みHTMLコード

<fieldset style="padding: 10px; border: 2px solid #ffa333; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">

<legend><span style="font-size: 18px; color: #ffa333; font-weight:bold;">

ポイント!

</span> </legend>

こういうのよく見ますよね。<br>

こちらが今回のポイントです!みたいな。

</fieldset>

 

四つ程囲み枠のHTMLコードを載せておきます

まだまだ沢山ありますので、ネットで調べて頂ければ、必ずお気に入りの囲み枠があるはずです

 

今回のまとめ

今回定型文機能を紹介しましたが、いかがだったでしょうか

この方法は、定型文、囲み枠だけでなく、Pさんの様に吹き出し設定などにも使えて大変便利な機能です

実際おいらもあっち行ったり、こっちに戻ったりしなくて済むようになりました

まだまだ応用出来る事もあると思うので、分かり次第また取り上げますね

おいらを含めブログ初心者の人が、「定型文機能」の便利な使い方が、「参考になったよ」って言って貰えれば光栄です(^_-)-☆

 

今回も最後まで読んで頂き

ありがとうございました

では、また。。。

 

</a </a にほんブログ村 旅行ブログへ

気まぐれおやじのブログは、にほんブログ村に参加しています

ポチっと応援よろしくお願いします

 

 

動画はこちら

f:id:koulog:20210511111040p:plain