ブログのサイトデザイン強化に！HTMLとCSSの簡単な基礎知識

HTML？CSS？たまに聞くけどサッパリ・・・
でもブログデザインはオシャレにしたい

そんな方に向けてお話をしたいと思います。

具体的には、上のような吹き出しの文章なんかも

『実は簡単に自作できますよ』といった内容で

”小難しいことは一切省いて”説明していきたいと思います。

（コピペで使えるものも公開します）

吹き出し系を簡単に導入できるプラグインは有料だったり

するので経費削減にもなっていいかと思いますよ。

［ブログアイキャッチなどをオリジナルにしたいなら］

ブログの雰囲気をいい感じに変える画像加工ツール

HTMLやCSSとは？簡単に説明します

まず、用語の解説をしますと以下になります。

HTMLとはページの要素や構造を指定して

表示させるためのもの

CSSとはスタイルシート言語とも呼ばれ

HTMLで指定する要素を装飾するもの

つまりこれらをいじくることで、

文章を囲むボックスや吹き出しを入れたり

ブログ全体のデザインを変えたりすることも

可能になるんです。

ただ、意味がよく分からないと思いますので

簡単にいいますと

CSSが、召喚呪文の巻物

HTMLが、それを呼び出すために唱える呪文の言葉

だと思ってください。

例えば、

サンプル

このクリップを召喚する巻物（CSS）には、

こんなことが書かれています。

/* メモ　クリップ風*/
.clip-box-b {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #FFE4E1; /* ボックス背景色 */
 color: #666666; /* 文章色 */
 box-shadow: 4px 4px 1px #FFB6C1; /* 影の色 */
}
.clip-box-b::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #C0C0C0; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #ccc; /*クリップ影*/
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-b::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #FFE4E1; /*背景色と同じ色に！*/
 z-index: 2;
}

そして、これを呼び出す呪文（HTML）がこちらです。

<div class="clip-box-b">テキスト</div>

一見難しそうですが、簡単にできてしまう方法があるので

それをお伝えしますね。

ここでは、CSSを呼び出すのがHTMLなんだなと

ザックリと把握していただければ大丈夫です。

※当ブログでは、専門的な知識はほぼ省いています。

より深く知りたい場合は

『HTMLとは？』『CSSとは？』などでググってください。

CSS&HTML召喚術をすぐに使えるようになる方法

CSSの召喚魔法の巻物はどうやって用意するか？

CSSの召喚魔法の巻物は自作できなくもないですが、

CSSの専門特化ブロガーでないのでしたら

そこに割く時間がもったいないと思います。

なので、ここにおすすめのサイトを用意しましたので

よければ活用してください。

吹き出し風のCSSを手に入れるならこちら

ボックス系のCSSを手に入れるならこちら

※私の使っている吹き出しでよければ

後ほどコピペで使えるものをお教えします

どうやってHTML呪文を唱えるようにすればいいか

CSSで吹き出しやボックスを登録し

HTMLで呼び出すためにはまず

テーマの編集から『スタイルシート（style.css）』に

例の長い文章を書き込み、CSSを召喚可能な状態にします。

（後ほど詳しく解説します）

既にたくさんの暗号のような記述があると思いますが

一番下の行から追加でコピペすれば問題ありません。

この作業がややこしい、

何かあったら嫌・・と言う方は

以下のプラグインを導入すると捗ります。

『Simple Custom CSS』※ワードプレスの方のみです

また、呪文を唱える際にもおすすめのプラグインがあります。

それがこちらの『AddQuicktag』です。※同じくワードプレスの方のみ

この準備が整ったら早速、CSS&HTMLを使って

『吹き出し』を使えるようにしてみましょう。

さっそく、吹き出し風を作ってみる

吹き出しを簡単に作れてしまう手順は以下の３つです。

⑴ 呼び出したいデザインのCSSとHTMLを決める

⑵ CSSを入力して召喚可能状態にする

⑶ ブログ記事編集画面にてＨＴＭＬで呼び出す

呼び出したいデザインのCSSとHTMLを決める

ここからは、CSSを設定しHTMLで呼び出す手順を説明します。

この記事の冒頭で使用した、こちらを例にします。

HTML？CSS？たまに聞くけどサッパリ・・・

まず、これを呼び出す召喚の巻物（CSS）はこちらです。

/* -------- 吹き出し -------- */
.balloon{
  display: flex;
  margin: 0 0 1.5em 0;
}
.balloonR{
  flex-direction: row-reverse;
}
.balloon-img{
  width: 80px;
  height: auto;
  flex-shrink: 0;
}
.balloon-text{
  padding: 1em;
  border-radius: 6px;
  position: relative;
  display: flex;
}
.balloon-text-inner{
  margin: auto;
}
.balloon-text::before,.balloon-text::after{
  content: '';
  position: absolute;
  top: 19px;
  font-size: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.balloonL .balloon-text{
  margin: 0 0 0 15px;
  background: #ffeebf;
}
.balloonR .balloon-text{
  margin: 0 15px 0;
  background: #ffeebf;
}
.balloonL .balloon-text::before{
  left: -16px;
  border-right: 16px solid #ffeebf;
}
.balloonR .balloon-text::before{
  right: -16px;
  border-left: 16px solid #ffeebf;
}

そして、これを呼び出す呪文（HTML）がこちらです。

<div class="balloon balloonL">
  <div class="balloon-img"><img src="画像URL" /></div>
  <div class="balloon-text"><div class="balloon-text-inner">
  コメ
  </div></div></div>

右側に表示させる場合はこちらです。

<div class="balloon balloonR">
  <div class="balloon-img"><img src="画像URL" /></div>
  <div class="balloon-text"><div class="balloon-text-inner">
  コメ
  </div></div></div>

※『コメ』の部分に喋らせたい文章を入力してください

他のサイトから吹き出しやボックスのデザインを

使う場合も、必ずCSSとHTMLの記述を書いてくれているはずです。

それらをコピペすれば使えます。

では、このCSSとHTMLをどこにコピペすれば

いいのかを説明します。