kako-b

~60代を穏やかに楽しく生きる~

【シニアでも簡単】はてなブログに可愛い囲み枠を表示させよう

\読者登録おねがいします/

 

囲み枠を表示させる方法

 

「はてなブログ」で可愛い囲み枠を表示させるにはどうすればいいの?

コピー&ペーストで簡単に設定できました!少し解説してみますね。

 

囲み枠とは

 

ちなみに囲み枠ってこのような物。
内容を目立たせたいときに重宝する飾り枠です。

 

 こちらのデザインは『Minimal Green』さん制作の「マステ風見出し付きデザイン」です。

 

 

可愛い飾り枠

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

 

 

 

   『Minimal Green』さんのサイトはこちら。
他にも女の子らしいデザインのCSSがたくさんあるので、選ぶのも楽しいですよ。 

blog.minimal-green.com

 

 

こちらはシンプルなクリップ付きの囲み枠。
スッキリとしていて見やすいと思いませんか。

 

テキストがはいります。テキストがはいります。テキストがはいります。
テキストがはいります。テキストがはいります。テキストがはいります。
 

 

  クリップ付きの囲み枠は『Purp Life』さんよりお借りしました。
デザインがたくさんあるので楽しいですよ。

love-wave.com

 

 

どちらも【CSS】と【HTML】をコピー&ペーストするだけで簡単に表示できたので、是非挑戦してみてくださいね。

 

ちなみにネットで探せば、たくさんのサイトさんが公開して下さっているので、自分好みのデザインをさがすのも楽しいです。

 

 

「CSS」 「HTML」を 用意しよう。

 

まず、気に入ったデザインのコードをコピペして、メモ帳などに貼り付けておきます。

 ・ちなみに囲み枠に必要なコードとは【CSS】と【HTML】



この二つを指定の場所に貼り付けるだけでOKなので、それぞれの貼り付け場所を解説してみますね。

 

 

【CSS】の貼り付け場所

f:id:kakonobu:20200507160612j:plain

 

 

  ここでは『Minimal Green』さん制作の「マステ風見出し付きデザイン」を参考にしています。

 

 

まず、画面右上のアイコンをクリックして下さい。

 

f:id:kakonobu:20200507132300p:plain

 

 

 

そして【デザイン】をクリック。

 

f:id:kakonobu:20200507132307p:plain

  

 

すると左側上部にこのような画面が。

その中の【スパナマーク】をクリックします(*^▽^*)

 

f:id:kakonobu:20200507132317p:plain

 

 

 

左下に【CSS】を記述できるエリアが出現するので、もう1度、画面上でクリックします。すると実際に貼り付けできる、少し大きな画面が出現します。
注)画像はクリックする前の画面です。

 

f:id:kakonobu:20200507154453p:plain

 

 

表示させたい囲み枠の【CSS】をそこへ貼り付けます。貼り付け位置は上部からどんどん埋めていくような感じでOKです。

 

貼り付けたら必ず【変更を保存する】をクリックして下さい。
ここをクリックしないと保存されません。

 

 

f:id:kakonobu:20200507132357p:plain

 

 

これで【CSS】の準備が出来ました。
ふぅ。お疲れ様でした~♪
さぁ、次は【HTML】の使い方です。

 

これもメチャかんたん。

 

 

【HTML】の貼り付け場所

f:id:kakonobu:20200507160722j:plain

 

 

記事を書くときに、「この囲み枠を使いたいなぁ」と思った箇所にHTMLを貼り付けるだけ。挿入する時は「はてな記法」または「HTML編集」モードにします。

 

 これは「HTML編集」モードを開いています。ここへ「マステ風見出し付きデザイン」の【HTML】コードを貼り付けます。

 

f:id:kakonobu:20200507144403p:plain

  

メモ
HTMLコードは自分のわかる場所に保存しましょう。

 

 

 こんな感じに貼り付けられました。

f:id:kakonobu:20200507144521p:plain

 


それをプレビューモードに切り替えると....!
このように表示されました。

f:id:kakonobu:20200507144827p:plain

 


 後は「マステ風見出し」の文字と、「テキスト」 の文字を自分の言葉に変更するだけで完了です。

 

 

 

まとめ

f:id:kakonobu:20200507163714j:plain


 

いかがでしたか?
わたしも最初は不安でしたが、やってみると意外と簡単でした。

最後にちょっとだけアドバイス。
BOX内を改行するときは、必ず【Shift】と【Enter】を押して改行して下さい。【Enter】だけで改行するとデザインが崩れる場合があるようです....(>_<)


【CSS】と【HTML】の貼り付け場所さえ理解していれば、簡単に囲み枠を表示させることができるので、ぜひ挑戦してくださいね。

 
 

「ブログ村ランキング」に参加中です。
f:id:kakonobu:20200703163042g:plain いつも応援ありがとうございます。

 

ブログランキング・にほんブログ村へ