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


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

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


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

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

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2018/04/28 08:46:19
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:kaoato No.1

回答回数236ベストアンサー獲得回数86

ポイント300pt

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

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

.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;
  }
}

id:shiba-kaito

返信、遅くなりましてすみません。
今しがた、CSSに組み込んでみたところ無事大きく表示されました。

ありがとうございます!

2018/04/28 08:45:29

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません