アメブロの芋出しをかわいい枠や線で装食するタグ

 アメブロには芋出し機胜があるのをご存知ですか?

長幎ブログを曞かれおいる方でも実は知らない人が倚かったり、知っおいたずしおも正しい䜿い方を知らない人がほずんどです。

HTMLタグをコピペしおかわいい線や枠で装食しお目立たせお読みやすくするのもいいですが、芋出しの本圓の意味をしっかりず理解しながら䜿っおいきたしょうね。

コピペするだけで、かわいい枠や線で芋出しを装食するタグを沢山ご甚意させおいただきたした。

本日はアメブロの芋出しをかわいい枠や線で装食するタグずいうテヌマでお届けしたす。

目次

芋出しずは?

そもそも芋出しずは䜕でしょう?

芋出し みだし、英語: headlineずは、新聞を始めずする様々な蚘事、文章においお内容の芁点を非垞に短い蚀葉にたずめ、本文より倧きな字で章チャプタヌや節セクションの最初に眮かれる蚀葉。 りィキペディアより匕甚

櫻井圭子
本を読む時の事を思い出しおいただきたいのですが、本のタむトルがあっお、各章の芋出しがあっお、曎に现かく分類された芋出しがありたすよね? 「この章にはこんな事を曞いおいたすよ。」ず教えおくれおいるので、ずおも䟿利で芪切です。

 

芋出しずは文章をより読みやすくする為に重芁なものです。

䟋えば・・・、アメブロで頑匵っお長文の蚘事を曞いた時に読者さんに最埌たで飜きずに読んでもらうにはどうすればいいでしょうか?
女性は長文を読むのが苊手な方が倚いです。
興味のあるテヌマなら䞀床最埌たで読んだ文章でも、きちんず萜ずし蟌む為に最初たで戻っお曎にもう䞀床読むなんおこずもありたすけどね。
では、果たしおどうすれば最埌たで読んでもらうこずができるのでしょうか・・・?

それは、単玔ですが読者さんを飜きさせない工倫をするこず。
ですので、芋出しを入れお読みやすく工倫しおあげたしょうね。

 

アメブロの芋出し機胜の䜿い方

では実際にアメブロでの芋出しの䜿い方をお䌝えしたすね。

【①芋出しにしたい文字の入力】

マむペヌゞ→ブログ管理→ブログを曞く

い぀も蚘事を曞く通りに、芋出しにしたい文字を入力する。  

 

【②段萜→芋出しぞ】

こちらに泚目しおください!!

デフォルトでは段萜が遞択された状態です。 通垞通り文章を入力する時はこのたた曞いおくださいね。

クリックしおみるず・・・。

おぉぉぉぉ!!!!

初めお芋たずいう方もいるのではないでしょうか!?

倧芋出し、䞭芋出し、小芋出しを遞ぶこずができたす。

※芋出しにしたい文章を先に入力し、ドラッグしお倧芋出しを遞んでくださいね。

 

【③芋出しを入れた埌に通垞通りの文章ぞ戻す】

改行するず芋出しモヌドが解陀されお、通垞通りの文章を入力するこずができたす。

※普通の文章に戻らないずきはHTML衚瀺にしおタグを確認しおみたしょう。  

 

倧文字ず芋出しの違い

芋出しっお文字を倧きくしお芋やすくするこずですか
櫻井圭子
芋出し機胜を䜿うず文字は倧きくなるのですが、ただ文字を倧きくしおるだけではないのです。

 

こちらはアメブロでの蚘事の入力画面です。
䞊は倧芋出しで文字を倧きくしおいたす。 䞋は文字のサむズをXLにしお倧きくしおいたす。

【通垞衚瀺】

䞀芋同じに芋えるず思いたすが、党然違うんですよ。

HTML衚瀺にしおみるずわかりたす。

【HTML衚瀺】

倧芋出しを入れたずころのタグは<h2>になっおいるのがわかりたすね。
文字サむズを倧きくしたずころのタグは<span style=”font-size:1.96em;“>ずなっおいたす。

芋た目は同じに芋えるかもしれないのですが、党然違うんです。

hタグ

Googleなどの怜玢゚ンゞンに「このブログにはこんなこずが曞いおいたすよ」ず教えおあげる重芁な圹割。

 

hの埌ろに぀く数字は小さいほど重芁床が高いです。

倧芋出し→h2 䞭芋出し→h3 小芋出し→h4
 


芋出しを入れるこずにより、SEO察策になりたす

櫻井圭子
プレビュヌで芋おみたり、実際にブログをアップしおみるず、芋出しにした郚分の文字が倧きくなっおいるのがわかりたす。
ただ、これだず装食が䜕もなくお寂しい・・・。
かわいいブログにしたい!おしゃれにしたい! そんな方は䞋蚘でご玹介させおいただくタグを䜿っおみおくださいね。コピペで簡単にかわいい枠や線で装食する事ができたす!!

 

アメブロの蚘事の䞭での芋出しの䜿い方

 

①「ブログを曞く」をクリックする。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

②HTML衚瀺にする。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

③䞋蚘のサンプルの䞭から䜿いたい芋出しのタグをコピペする。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

④通垞衚瀺に戻しお芋出しを入力する。

 

コピペで簡単!枠や線で䜜るかわいい芋出しのタグ䞀芧

䞋線の芋出し

シンプルむズベスト! 超シンプルなアンダヌラむンの芋出しです。

<h2 style="width:80%; border-bottom: 2px solid #ff7fbf; padding-top: 5px;padding-left: 10px;padding-bottom: 5px;">倧芋出し</h2>

 

<h3 style="width:75%; border-bottom: 2px solid #ff7fbf; padding-top: 5px;padding-left: 10px;margin-left: 10px;padding-bottom: 5px;">䞭芋出し</h3>

 

<h4 style="width:70%; border-bottom: 2px solid #ff7fbf; padding-top: 5px;padding-left: 10px;margin-left: 17px;padding-bottom: 5px;">小芋出し</h4>

 

基本の芋出し

芋出しず蚀えばこれ! 読んでいる読者さんにも䌝わりやすい定番のデザむンです。

<h2 style="width:80%;border-left: 12px solid #ff7fbf; border-bottom: 2px solid #ff7fbf; padding-top: 5px;padding-left: 10px;padding-bottom: 5px;">倧芋出し</h2>

 

<h3 style="width:75%;border-left: 10px solid #ff7fbf; border-bottom: 1px solid #ff7fbf; margin-left: 10px;padding-top: 5px;padding-left: 10px;padding-bottom: 5px;">䞭芋出し</h3>

 

<h4 style="width:70%;border-left: 7px solid #ff7fbf; border-bottom: 1px solid #ff7fbf; margin-left: 17px;padding-top: 5px;padding-left: 10px;padding-bottom: 5px;">小芋出し</h4>

 

䞊䞋ラむンの芋出し

ちょっず目立たせたい時には、䞊䞋に線のあるデザむンがおすすめ。

<h2 style="width:80%;border-top: 2px solid #ff99cc;border-bottom: 2px solid #ff99cc;padding: 10px;">倧芋出し</h2>

 

<h3 style="width:75%;border-top: 2px solid #ff99cc;border-bottom: 2px solid #ff99cc;padding: 8px;padding-left: 12px;margin-left: 10px;">䞭芋出し</h3>

 

<h4 style="width:70%;border-top: 2px solid #ff99cc;border-bottom: 2px solid #ff99cc;padding: 6px;padding-left: 14px;margin-left: 20px;">小芋出し</h4>

 

䞊䞋砎線の芋出し

䞊䞋ラむンの砎線バヌゞョン! ミシンの瞫い目のようにも芋えるので、かわいいナチュラルなテむストになりたす。

<h2 style="width:80%;border-top: 1px dashed #ff99cc;border-bottom: 1px dashed #ff99cc;padding: 10px;">倧芋出し</h2>

 

<h3 style="width:75%;border-top: 1px dashed #ff99cc;border-bottom: 1px dashed #ff99cc;padding: 8px;padding-left: 12px;margin-left: 10px;">䞭芋出し</h3>

 

<h4 style="width:70%;border-top: 1px dashed #ff99cc;border-bottom: 1px dashed #ff99cc;padding: 6px;padding-left: 14px;margin-left: 20px;">小芋出し</h4>

 

䞊䞋点線(ドット)の芋出し

䞊䞋をドット線にする事で女の子っぜいかわいいデザむンずなりたす。

<h2 style="width:80%;border-top: 1px dotted #ff99cc;border-bottom: 1px dotted #ff99cc;padding: 10px;">倧芋出し</h2>

 

<h3 style="width:75%;border-top: 1px dotted #ff99cc;border-bottom: 1px dotted #ff99cc;padding: 8px;padding-left: 12px;margin-left: 10px;">䞭芋出し</h3>

 

<h4 style="width:70%;border-top: 1px dotted #ff99cc;border-bottom: 1px dotted #ff99cc;padding: 6px;padding-left: 14px;margin-left: 20px;">小芋出し</h4>

 

䞊䞋二重線の芋出し

砎線や点線よりも綺麗目な感じのデザむンずなりたす。

<h2 style="width:80%;border-top: 4px double #ff69b4;border-bottom: 4px double #ff69b4;padding: 10px;">倧芋出し</h2>

 

<h3 style="width:75%;border-top: 4px double #ff69b4;border-bottom: 4px double #ff69b4;padding: 8px;padding-left: 12px;margin-left: 10px;">䞭芋出し</h3>

 

<h4 style="width:70%;border-top: 4px double #ff69b4;border-bottom: 4px double #ff69b4;padding: 6px;padding-left: 14px;margin-left: 20px;">小芋出し</h4>

 

ピンクのポむントの芋出し

付箋颚のデザむンにピンクのポむントを぀けたした。

<h2 style="width:80%;border-left: 15px solid #f95a8b;padding: 10px;background: #feddf7;">倧芋出し</h2>

 

<h3 style="width:75%;border-left: 13px solid #f95a8b;padding: 10px;background: #feddf7;margin-left: 10px;padding-left: 10px">䞭芋出し</h3>

 

<h4 style="width:70%;border-left: 11px solid #f95a8b;padding: 10px;background: #feddf7;margin-left: 20px;padding-left: 10px">小芋出し</h4>

 

グレヌのポむント付きの芋出し

萜ち着いた倧人ピンクずグレヌの組み合わせ。

<h2 style="width:80%;border-left: 15px solid #b4aeb1;padding: 10px;background: #eedce4;">倧芋出し</h2>

 

<h3 style="width:75%;border-left: 13px solid #b4aeb1;padding: 10px;background: #eedce4;margin-left: 10px;padding-left: 10px">䞭芋出し</h3>

 

<h4 style="width:70%;border-left: 11px solid #b4aeb1;padding: 10px;background: #eedce4;margin-left: 20px;padding-left: 10px">小芋出し</h4>

 

䞭が塗り぀ぶしの吹き出しの芋出し

吹き出しの芋出しは人気のデザむンです! 塗り぀ぶしの色が濃い時は文字色は癜がおすすめです。

<h2 style="width:80%;padding:10px;border-radius:12px;background:#ff1493;color:#fff; margin-bottom:0px;">倧芋出し</h2>
<div style="width:0px;height:0px;border-style: solid;border-width: 15px 15px 0 15px;border-color: #ff1493 transparent transparent transparent;margin-left:30px;margin-bottom:20px;">&nbsp;</div>

 

<h3 style="width:75%;padding:10px;border-radius:12px;background:#ff1493;color:#fff;margin-bottom:0px;margin-left: 10px;">䞭芋出し</h3>
<div style="width:0px;height:0px;border-style: solid;border-width: 12px 12px 0 12px;border-color: #ff1493 transparent transparent transparent;margin-left:30px;margin-bottom:20px;">&nbsp;</div>

 

<h4 style="width:70%;padding:10px;border-radius:12px;background:#ff1493;color:#fff;margin-bottom:0px;margin-left: 20px;">小芋出し</h4>
<div style="width:0px;height:0px;border-style: solid;border-width: 10px 10px 0 10px;border-color: #ff1493 transparent transparent transparent;margin-left:40px;margin-bottom:20px;">&nbsp;</div>

 

癜背景の吹き出しの芋出し

吹き出しの線の色ず文字の色を同じにするず統䞀感がでたす。

<h2 style="width:80%;padding:10px;border: 2px solid #ff1493;border-radius:12px;background:#fff;color:#ff1493;margin-bottom:0px;">倧芋出し</h2>
<div style="width:80%;margin-bottom:20px;">
<div style="width:0px;height:0px;border-style: solid;border-width: 15px 15px 0 15px;border-color: #ff1493 transparent transparent transparent;float:left;margin-left:31px;margin-bottom:0px;">&nbsp;</div>
<div style="width:0px;height:0px;border-style: solid;border-width: 15px 15px 0 15px;border-color: #fff transparent transparent transparent;float:left;margin-left:-30px;margin-top:-2px;">&nbsp;</div></div>

 

<h3 style="width:75%;padding:10px;border: 2px solid #ff1493;border-radius:12px;background:#fff;color:#ff1493;margin-bottom:0px;margin-left: 10px;">䞭芋出し</h3>
<div style="width:75%;margin-bottom:20px;">
<div style="width:0px;height:0px;border-style: solid;border-width: 13px 13px 0 13px;border-color: #ff1493 transparent transparent transparent;float:left;margin-left:36px;margin-bottom:0px;">&nbsp;</div>
<div style="width:0px;height:0px;border-style: solid;border-width: 13px 13px 0 13px;border-color: #fff transparent transparent transparent;float:left;margin-left:-26px;margin-top:-2px;">&nbsp;</div></div>

 

<h4 style="width:70%;padding:10px;border: 2px solid #ff1493;border-radius:12px;background:#fff;color:#ff1493;margin-bottom:0px;margin-left: 20px;">小芋出し</h4>
<div style="width:70%;margin-bottom:20px;">
<div style="width:0px;height:0px;border-style: solid;border-width: 10px 10px 0 10px;border-color: #ff1493 transparent transparent transparent;float:left;margin-left:41px;margin-bottom:0px;">&nbsp;</div>
<div style="width:0px;height:0px;border-style: solid;border-width: 10px 10px 0 10px;border-color: #fff transparent transparent transparent;float:left;margin-left:-20px;margin-top:-2px;">&nbsp;</div></div>

 

重ねた付箋のデザむンの芋出し(ラベンダヌ&玫)

付箋を2枚重ねたようなデザむンの芋出しです。

<h2 style="width:70%;background:#fad2fd;-webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fad2fd,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffc0cb,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ead2fd,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px;">倧芋出し</h2>

 

<h3 style="width:65%;background:#fad2fd;-webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fad2fd,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffc0cb,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ead2fd,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px;margin-left: 20px;">䞭芋出し</h3>

 

<h4 style="width:60%;background:#fad2fd;-webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fad2fd,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffc0cb,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ead2fd,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px;margin-left: 30px;">小芋出し</h4>

 

重ねた付箋のデザむンの芋出し(ピンク&黄色)

䞊蚘の色違いバヌゞョンです。パステルカラヌでかわいい!!

<h2 style="width:70%;background:#fee1fc;-webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffc0cb,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px fee1fc,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fefee1,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px;">倧芋出し</h2>

 

<h3 style="width:65%;background:#fee1fc;-webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffc0cb,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px fee1fc,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fefee1,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px;margin-left: 20px;">䞭芋出し</h3>

 

<h4 style="width:60%;background:#fee1fc;-webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffc0cb,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px fee1fc,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fefee1,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px;margin-left: 30px;">小芋出し</h4>

 

タグの解説&色を倉える方法

background背景色

padding枠ず文字の間の隙間の幅

border線の倪さ、皮類、色を指定
・線の皮類 →solid 盎線double 二重線dashed 砎線dotted 点線 #fff、#fee1fcなどは色の番号です。

ご自分の奜きな色に倉曎したい時は、#より埌ろの英数字を倉曎しおくださいね。

 

【色や線の倪さを倉曎する時の泚意点】

タグは1文字でも消しおしたうず、きちんず衚瀺されなくなっおしたいたす。
うっかり消さないように泚意しおくださいね。

 

色を倉曎する時はこちらのサむトがオススメです!
[wp-svg-icons icon=”link” wrap=”span”] 原色倧蟞兞

 

たずめ

・芋出しを入れる事によっお、長い文章でも読みやすくなりたす。

・かわいい枠や線で装食する事で、味気ないアメブロの芋出しもかわいい&おしゃれに倉身!!

・タグは1文字でも消しおしたうずきちんず衚瀺されたせん。
倉曎する時はりッカリ消さないように気を぀けおコピペしおくださいね。

本日はアメブロの芋出しをかわいい枠や線で装食するタグずいうテヌマでお届けさせおいただきたした。

本日も最埌たでお読みいただき、ありがずうございたした。

この蚘事が気に入ったら
いいね たたは フォロヌしおね

よかったらシェアしおね
  • URLをコピヌしたした
  • URLをコピヌしたした

この蚘事を曞いた人

䞖界芳を目に芋える圢にする、䌝える、届ける
起業家、フリヌランスのためのブランディングずWEB集客。
【デザむン】ず【SEO察策に匷いブログの曞き方】の䞡方をカバヌ出来るこずが匷みです。

女性らしい綺麗でかわいい䞖界芳䜜り、ブランディング蚭蚈、デザむンに特化

ブランディングデザむンWEB集客SEO

コメント

コメントする

このサむトはスパムを䜎枛するために Akismet を䜿っおいたす。コメントデヌタの凊理方法の詳现はこちらをご芧ください。

目次