コピペから始めるCSSカスタマイズ入門
今回は、前回ご紹介した吹き出しCSSについて、アレンジのやり方をご紹介していこうと思います。
もともと完成しているものを少しいじるだけでも経験値が上がって、また新しいことにチャレンジしたくなるもの。
CSSがすこしでもわかってくると、いろいろ変化を付けられてブログの楽しみも倍増です！
↓ 前回記事はこちら ↓
CSSを編集するので、word pressの方も同じような手順で実装できると思います。
見方さえわかればアレンジは簡単！
それでは今回のコンテンツです。
ブログのCSSはほとんどコピペが可能
前回も先輩ブロガーの記事を参照させていただいたとおり、いまやインターネットで検索すると、ほとんどやりたいことが実現できるような状況になっています。
一からコードを組み立てるのはとても難しいですが、あるものをアレンジするだけでよければ、難易度はぐっと下がるのではないでしょうか。
CSSのつくりを知る
最初に、CSSについて、簡単に考え方をご紹介しておきたいと思います。
参考に、前回ご紹介したコードの一部分を載せます。
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;
私も英語やプログラミングが得意なわけではないので、最初はこれを見ただけでもくじけそうになっていましたが、ようやく慣れてきました。
一行ずつ、「 : 」(コロン)の左側が項目名、右側がその設定という見方をします。
上から、「position」という設定は「relative」にする、
「width」という設定は「80%」にする、というイメージです。
つまり「CSSは、項目に設定値を入れて見た目を変えるもの」と言えます。
これがわかってしまえば、あとは
- どの項目に
- どんな設定をするか
だけを考えればよいですね！
見た目で避けてしまうけど、やっていることはシンプル！
吹き出しをアレンジする
それでは早速、吹き出しのアレンジの仕方をご紹介します。
- 吹き出しの色を変える
- 大きさを変える
- 枠を変える
- 形を変える
１．吹き出しの色を変える
まず、吹き出しの色を変えるパターンです。
色を設定する項目は「background-color」という項目です。
ここに、カラーコードを設定してあげれば、簡単に色を変えられます。
試しに、吹き出しを黄緑にしてみましょう。
【Before】
background-color: #fff;
【After】
background-color: #f5f5dc;
カラーコードを変更するだけで、背景の色が変わりました。
カラーコードは下記にまとめていますので、よろしければお使いください。
【変更箇所】
.entry-content .heart-fuki,
.entry-content .angry-fuki,
.entry-content .silent-fuki,
.entry-content .thinking-fuki,
.entry-content .surprize-fuki,
.entry-content .enemy-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;
}
２．大きさを変える
次は吹き出しの大きさです。
これは「width」という項目を使います。
【Before】
width: 80%;
【Before】
width: 60%;
横幅が小さくなりましたね。
この「width」は％のほかに、「px」や「em」という単位でも記載することができます。
％で記載すると、パソコンの画面（ウィンドウ）を縮めた場合に吹き出しも一緒に小さくなりますが、pxやemは固定で表示されるという違いがあります。
【変更箇所】
.entry-content .heart-fuki,
.entry-content .angry-fuki,
.entry-content .silent-fuki,
.entry-content .thinking-fuki,
.entry-content .surprize-fuki,
.entry-content .enemy-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;
}
３．枠を変える
枠を変えるには「border」項目を変更します。
borderは３つの設定があるので少し難しいのですが、前から順番に「幅（太さ）」「タイプ」「色」を設定しています。
タイプは下記のとおりです。
solid・・・１本線
double・・・２重線
groove・・・窪んで見える線
ridge・・・立体に見える線
inset・・・全体が窪んで見える設定
outset・・・全体が立体に見える設定
dashed・・・破線
dotted・・・点線
【Before】
border: 2px solid #999;
【After】
border: 2px dashed #4169e1;
なかなか印象が変わりますね。
【変更箇所】
今回は３か所の変更が必要です。
吹き出しのメインの枠と、左のでっぱりの部分は別のコードで書いているためです。
.entry-content .heart-fuki,
.entry-content .angry-fuki,
.entry-content .silent-fuki,
.entry-content .thinking-fuki,
.entry-content .surprize-fuki,
.entry-content .enemy-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 .silent-fuki::before,
.entry-content .angry-fuki::before,
.entry-content .heart-fuki::before,
.entry-content .thinking-fuki::before,
.entry-content .enemy-fuki::before,
.entry-content .surprize-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;
}
４．形を変える
最後に、吹き出しの形です。
これは「border-radius」という項目を使います。
「 radius」は半径という意味で、border（枠）の角をどのくらい丸くするかを設定できます。
【Before】
border-radius: 6px;
【After】
border-radius: 25px;
あまり丸くしすぎるとでっぱり部分と離れてしまうので、ほどほどに調整するとよいかと思います。
【変更箇所】
.entry-content .heart-fuki,
.entry-content .angry-fuki,
.entry-content .silent-fuki,
.entry-content .thinking-fuki,
.entry-content .surprize-fuki,
.entry-content .enemy-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;
}
設定を変えるだけでオリジナルのブログに
今回ご紹介したものだけでも、いろいろなバリエーションができて楽しめるのではないでしょうか。
ご参考になったなら幸いです。
今回もご覧くださり、どうもありがとうございました。
このブログははてなブログで運営しています。
ブックマーク・読者登録いただけると励みになります。
↓CSSカスタマイズを短時間でできるやり方を記事にしました↓
2019.6.10 公開
2019.7.13 更新
