Gibberish Man

今までの経験からの情報発信。英語、遊び場、お得な情報、海外、旅行、食べ物などいろん話。

MENU

吹き出しの似顔絵を大きくする方法!3つのcssを変えるだけだった(笑)


f:id:mynameiseiji:20201210234554j:image

こんにちは、ジブリッシュマンえいログのえいじです。

 

今回は私がずっと悩んでた吹き出しの似顔絵を大きくする方法を紹介したいと思います。

 

やっとできた!!!

いやー本当に何日やってたんだろう. . . . . . . . . .?と思うくらい時間がかかりました。

 

吹き出しの似顔絵を作って、ブログに載せたはいいけど、なんか小さくない!!!

 

っとずっと思ってて、そこから大きくする方法ってないのかなと悩んでました。

 

ネットとかで調べてたのですが、全然見つからなくてどうやるんだろう、誰か助けて〜(笑)と毎回思ってました。

 

それが突然、あれ!?これで良いのかな?と思ってやってみたら、いきなり出来ちゃった!!

 

わからない時は何してもできないけど、いきなり出来る時は出来るのが不思議です。

 

本当に簡単に出来たので、これからブログを始める人で吹き出しの似顔絵を作って載せたい、いままで吹き出しをやっていなかった人で、これからやりたいという人の参考になればありがたいです。

 

 

吹き出しの似顔絵を大きくする方法

 

まずは、吹き出しをブログに取り入れる時に、他の方のブログからコピペして自分のcssにペーストしてってことをやると思います。

 

私が参考にさせてもらった吹き出しで会話形式にするやり方はSHIROMAGさんのブログからです。とてもわかりやすくてやりやすかったです。

 

ありがとうございます。

 

www.notitle-weblog.com

 

 まずは、こちらからcssをコピーして吹き出しのやり方をできるようにお願いします。

 

ここから似顔絵を大きくする方法です

まずはこちらが私の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;  ⇐こちらを100pxに変えてください。
height: 100px;  ⇐こちらを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);}

 

まず文を消した所は似顔絵の丸枠の線ですです。丸枠の線が大きくなってしまいますので、消さないと文字枠に重なってしまって変になってしまいます。

 

100pxに変えたところは、丸枠のでかさです。丸枠のでかさを変えるだけで写真も大きくなりました。

 

これだけでした。

 簡単だったじゃん(笑)

 

まとめ

今日紹介した丸枠を大きくする方法とは別に、写真を大きくする方法とかもあるのかもしれませんが、私は何度かやってみたものの写真を大きくしたらアップロードできなかったりでできませんでした。

なので、今回は簡単に似顔絵を大きくする方法だと思いました。もし悩んでる方はいないかもしれませんが、悩んで私みたいに時間をかけてしまわないように参考になればいいなと思います。

 

私は本当に何度も何度もやって出来なかったのに、いきなり出来たことが嬉しくて、今回記事にさせて頂きました。

 

本当に出来なかったな~(笑)

 

今回もありがとうございました。