はてぶのタイトルを丸く、余裕をもたせました。
こんにちは、ろばみみです。
今日ははてぶのタイトルを丸くしてみました。
まずはメインの水色の帯です。
.entry-content h3 {
position: relative;
padding: 0.6em;
background: #e0edff;
border-radius: 10px;
}
上から順番に、こんな感じです。
- タイトルの場所はよきにはからう
- 文字サイズの0.6倍の余白をとる
- 色は水色
- 角を丸くする・・・NEW！
角が丸くなったことで、タイトルがやさしい感じになったと思います。
吹き出しと本文の間に余白をつくる
次に、タイトルの帯につけた吹き出しです。吹き出しと本文が重なってしまうので、いつも一行あけて書いていました。
これをいつでもちょっと余裕をもつようにしておきます。
.entry-content h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}
上から順番に、こんな感じです。
- 吹き出しの場所を指定する。
- 文字列は空にしておく
- 上は親要素（タイトル）にぴったりくっつける
- 左から30pxのところにつける
- 太さは15px、三角形にする。
- 色は水色
- 幅はゼロ
- 高さもゼロ
うーん、不思議です！
特に、transparentは透明という意味だったはず。
どうしてこれで三角形が表現できるんでしょう。
不思議ですが、これで確かに三角形がくるくる回ります。
イラストのサイズを横幅50％にする。
ときどき落書きをアップしているのですが、画面にどーんと表示されてこっぱずかしいです。
いつもPC版を立ち上げて、HTMLの編集から「Width=50%」って入れるのですが、毎回だとめんどくさい！いつでも最初から横幅50％になるようにします。
.entry-content img {
max-width: 50%;
box-shadow: 2 2;
border-radius: 6px;
}
上から順番に、こんな感じです。
- 画像は画面の50％とする。
- うっすら影をつけて浮かんでいるみたいにする。
- 角を丸くする。
完成！
あとは、デザイン→カスタマイズ→デザインCSSにコピペして完成です！
コピペのときにびっくりしたこと。
一番上に書いてある「/* <system section="theme"〜> 」
これ消したらびっくりしました！
デザインが全部消えて超シンプルなブログになっちゃいました。
ここでテーマを呼び出してたんですね。
書き込む前に、コピペしてメモ帳にとって簡単バックアップ。
やっておいてよかったです。ふう。
（所要時間 47分）
