こんにちは、ジブリッシュマンえいログのえいじです。
今回は私がずっと悩んでた吹き出しの似顔絵を大きくする方法を紹介したいと思います。
やっとできた！！！
いやー本当に何日やってたんだろう. . . . . . . . . .？と思うくらい時間がかかりました。
吹き出しの似顔絵を作って、ブログに載せたはいいけど、なんか小さくない！？
ってずっと思ってて、そこから大きくする方法ってないのかなと悩んでました。
ネットとかで調べてたのですが、全然見つからなくてどうやるんだろう。
誰か助けて〜。
それが突然、あれ！？これで良いのかな？と思ってやってみたら、いきなり出来ちゃった！！
わからない時は何してもできないけど、いきなり出来る時は出来るのが不思議です。
本当に簡単に出来たので、これからブログを始める人で吹き出しの似顔絵を作って載せたい、いままで吹き出しをやっていなかった人で、これからやりたいという人の参考になればありがたいです。
さらに私のブログで他の必要な絶対入れたほうがいいカスタマイズ１６選を下記の記事で紹介しています。
吹き出しの似顔絵を大きくする方法
まずは、吹き出しをブログに取り入れる時に、他の方のブログからコピペして自分のcssにペーストしてってことをやると思います。
私が参考にさせてもらった吹き出しで会話形式にするやり方はＳＨＩＲＯＭＡＧさんのブログからです。とてもわかりやすくてやりやすかったです。
ありがとうございます。
まずは、こちらからｃｓｓをコピーして吹き出しのやり方をできるようにお願いします。
ここから似顔絵を大きくする方法です
まずはこちらが私のｃｓｓです。
/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% – 82px);
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #ddd;
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
background-color: #fff;
z-index: 1;
box-sizing: border-box;
}
.entry-content .l-fuki {
margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: “”;
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: “”;
width: 60px;
height: 60px;
top: -6px;
border-radius: 50%;
＿＿＿＿＿＿＿＿＿＿＿＿＿こちらにある文を消してください
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
}
.entry-content .l-fuki::after {
right: -82px;
}
.entry-content .r-fuki::after {
left: -82px;
}
@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 100px; ⇐こちらを１００ｐｘに変えてください。
height: 100px; ⇐こちらを１００ｐｘに変えてください。
}
.entry-content.l-fuki,
.entry-content .r-fuki {
width: calc(100% – 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
まず文を消した所は似顔絵の丸枠の線ですです。丸枠の線が大きくなってしまいますので、消さないと文字枠に重なってしまって変になってしまいます。
１００ｐｘに変えたところは、丸枠のでかさです。丸枠のでかさを変えるだけで写真も大きくなりました。
これだけでした。
簡単だったじゃん(笑)
まとめ
今日紹介した丸枠を大きくする方法とは別に、写真を大きくする方法とかもあるのかもしれませんが、私は何度かやってみたものの写真を大きくしたらアップロードできなかったりでできませんでした。
なので、今回は簡単に似顔絵を大きくする方法だと思いました。もし悩んでる方はいないかもしれませんが、悩んで私みたいに時間をかけてしまわないように参考になればいいなと思います。
私は本当に何度も何度もやって出来なかったのに、いきなり出来たことが嬉しくて、今回記事にさせて頂きました。
本当に出来なかったな～(笑)
今回もありがとうございました。
コメント