http://oshaberiitboy.hatenablog.com/entry/2018/01/22/200000
のように丸く小さなアイコンで作れることを知りました。
しかし、ワードプレスでは、このアイコンを大きく設置することもできるようです(下記サイト参照)。
https://www.momotarou-nikko.com/entry/2018/03/13/134053
同様に、はてなブログでも大きなアイコンを使う方法はありませんでしょうか?
多少、コードを組み替える程度でできるようでしたら、お教え頂けますと助かります。
どの程度大きくしたいのは不明ですが、
少し大きくしたサンプルが以下です。
もともとのプロフィール画像はそれなりの大きさらしく、それを縮小して表示させてるので
その縮小している幅を大きくするだけで対応できると思います。
■
.entry-content .l-fuki { margin: 20px 20% 60px 0; } .entry-content .r-fuki { margin: 20px 0 60px 19%; }
.entry-content .l-fuki::after { right: -150px; } .entry-content .r-fuki::after { left: -150px; }
.entry-content .l-fuki::after, .entry-content .r-fuki::after { width: 120px; height: 120px; }
/* 吹き出しのCSS */ .entry-content .l-fuki, .entry-content .r-fuki { position: relative; width: 80%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 20px; border-radius: 6px; border: 2px solid #999; box-shadow: 1px 1px 5px #aaa; background-color: #fff; z-index: 1; } .entry-content .l-fuki { margin: 20px 20% 60px 0; } .entry-content .r-fuki { margin: 20px 0 60px 19%; } .entry-content .l-fuki::before, .entry-content .r-fuki::before { position: absolute; content: ""; top: 16px; width: 10px; height: 10px; border-right: 2px solid #999; border-bottom: 2px solid #999; 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: 120px; height: 120px; top: -10px; border-radius: 40px; border: 3px solid #fff; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: 1px 1px 5px #aaa; } .entry-content .l-fuki::after { right: -150px; } .entry-content .r-fuki::after { left: -150px; } @media screen and (max-width: 620px) { .entry-content .l-fuki, .entry-content .r-fuki { width: 70% } .entry-content .l-fuki { margin-right: 30%; } .entry-content .r-fuki { margin-left: 30%; } } @media screen and (max-width: 478px) { .entry-content .l-fuki::after, .entry-content .r-fuki::after { width: 60px; height: 60px; border-radius: 30px; } .entry-content .l-fuki::after { right: -84px; } .entry-content .r-fuki::after { left: -84px; } }
返信、遅くなりましてすみません。
2018/04/28 08:45:29今しがた、CSSに組み込んでみたところ無事大きく表示されました。
ありがとうございます!