人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

通常、はてなの記事で漫画の吹き出しのような書き方をする場合、

http://oshaberiitboy.hatenablog.com/entry/2018/01/22/200000

のように丸く小さなアイコンで作れることを知りました。
しかし、ワードプレスでは、このアイコンを大きく設置することもできるようです(下記サイト参照)。
https://www.momotarou-nikko.com/entry/2018/03/13/134053


同様に、はてなブログでも大きなアイコンを使う方法はありませんでしょうか?

多少、コードを組み替える程度でできるようでしたら、お教え頂けますと助かります。

●質問者: 芝 戒人
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● kaoato
●300ポイント ベストアンサー

どの程度大きくしたいのは不明ですが、
少し大きくしたサンプルが以下です。

もともとのプロフィール画像はそれなりの大きさらしく、それを縮小して表示させてるので
その縮小している幅を大きくするだけで対応できると思います。

.entry-content .l-fuki {
 margin: 20px 20% 60px 0;
}
.entry-content .r-fuki {
 margin: 20px 0 60px 19%;
}


40pxを60pxに変更

.entry-content .l-fuki::after {
 right: -150px;
}
.entry-content .r-fuki::after {
 left: -150px;
}


-110pxを-150pxに変更
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
 width: 120px;
 height: 120px;
}


80pxを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;
 }
}


芝 戒人さんのコメント
返信、遅くなりましてすみません。 今しがた、CSSに組み込んでみたところ無事大きく表示されました。 ありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ