css


けんちゃん 喋る S
きれいな引用符を見たら、自分でやってみたくなりますよね!




1.ライブドアブログでコピペ・カスタマイズした引用符のCSSを解説します。 

初心者からベテランまでブログを書く人がたくさんお世話になっているライブドアブログ。無料で使えるのは大変ありがたいです。かくいうわたしもお世話になっております。

ブログを書くのに慣れてくると思うことありますよね。

「もっとカスタマイズしたい!」

他のブログを見るたびに思います。「この枠どうするんだろう?」「グラデーションきれいだなあ」「あの引用符見やすいな」などなど。あげたらきりがありません。でも、「きっと、WordPressとかでやってるんだろうな」「難しそうだな」「お金かかるんだろうな」とあきらめてませんか?

そんなの全然OK! 無料のライブドアブログでも(他のブログでも)CSSの設定をちょっとしてやれば、全然できちゃいます! 今回は、わたしも前々からカスタマイズしたいと思っていた引用符を例に、CSSの設定から意味まで解説しちゃいます! ちょっとCSSの入口をのぞいてみたいって人、コピペで簡単にカスタマイズしたいって人に読んでいただけたらと思います。この記事をきっかけに自分のブログをカスタマイズしてくれたら嬉しいです!

おすすめ読者

 自分のブログをカスタマイズしたい!
 CSSをやってみたい!
 引用符をコピペでサクッときれいにしたい!
 ライブドアブログの設定方法を知りたい!

2.コピペCSSの宝庫「サルワカ」 

みなさん、「サルワカ」ってサイト知ってますか?

一度見てもらったらわかりますが、ブロガーのためにあるようなサイトなんです! とにかくきれいでわかりやすい! わたしはここのCSSを参考にさせてもらうことが多いです。理由は、
  • きれいなサンプルがたくさんある。
  • CSSをコピペできる。
からです。他のサイトを見てこれいいな~と思ったヤツはたいていあります。すごいですよね!

でも、この「サルワカ」手軽にコピペするには最高なんですが、CSSを勉強したい人にはちょっと向かないんですよね。なので、今回はわたしが「サルワカ」から拝借した引用符のCSSを例にして、CSSの解説をしてみたいと思います。これを読み終わったら、下のような引用を理解した上で作れるようになります!

ちなみに、今回わたしが拝借した引用符CSSは、これです!
改行するとこんな感じ。
左側がそろっています。
ただし、ライブドアブログの仕様でスマホではグレーに見えます。
引用元は右下になります。

↓ここから拝借しました。4番目のヤツです。


3.ライブドアブログでCSSの設定方法 

引用符のCSS解説に行く前に、ライブドアブログのCSS設定方法を説明したいと思います。ライブドアブログを利用していて、まだCSSをカスタマイズしたことがない人はここをしっかり読んで、4.に進むと理解が深まります。「もう知ってるよ」とか「ライブドアブログじゃないよ」という人はとばして4.に進んでください。

CSSを設定するところ

デザイン設定 PC-CSS-colored
①ブログ設定 → ②デザイン/ブログパーツ設定 → ③PC → ④カスタマイズ → ⑤CSS

※②③は違う画面なのでこの画像では省略しています。
CSSを設定した覚えがないのにもうすでに書いてある!と思うかもしれませんが、はじめから書かれているのはライブドアブログの初期設定です。慣れてきたら、これをもとに修正したり、追加・削除したりしてカスタマイズすることができます。

⑥に「記事本文」とありますが、今回はこの部分を変更していきます。「記事本文」が見当たらない場合は、下にスクロールしていってください。

ライブドアブログでのCSSの注意点

ライブドアブログは無料で利用でき、テンプレートも多数準備されているので手軽に始められるのがメリットです。その反面、制約もあったりしてカスタマイズに慣れてくると物足りなさを感じるのがデメリットです。

ライブドアブログでは、CSSコードを書くときに一般的なセレクタの書き方と違うことがあります。ライブドアブログでよく話題になるのが、hタグを指定するセレクタです。hタグを指定するときは一般的には「h1 { }」などと書きますが、ライブドアブログでは上の画像のように「.article-body-inner h1 { }」というように書きます。これは、記事本文内のhタグと、本文下の「急上昇ブログ」などのhタグを区別するために記事本文内のhタグを自動で書きかえる仕様になっているようです。

blockquoteタグもhタグと同じように「blockquote { }」ではなく、「.article-body-inner blockquote { }」というように書きます。まとめると

ライブドアブログでの書き方

hタグ
  h1 { }
  .article-body-inner h1 { }

blockquoteタグ
  blockquote { }
  .article-body-inner blockquote { }

というようになります。

HTMLの書き方

CSSでWebページの書体などのスタイルをカスタマイズしていくには、HTMLもCSSにあわせてカスタマイズしていかなければいけません。

ここでHTMLとCSSを簡単に説明しておきます。

HTMLはWebページの本体。コンテンツが書かれている部分です。例えば、文章や写真などの情報が書かれています。

CSSは「Cascading Style Sheets」の略で、HTMLで書かれた文章をどのように装飾していくかが書かれている部分です。だから、CSSの部分はなくてもWebページは表示されます。(殺風景なページになるけどね。)

html button
これはライブドアブログでブログを書く画面(PC版)です。HTMLを見たり編集する場合は、右上の「HTMLタグ編集」を押します。すると次のような画面になります。

html show
大きな窓の中がさっきと違いますね。<>で囲まれた英語がたくさん出てきました。<>をHTMLタグといいます。このHTMLタグを使って引用符をWebページに表示させたり、CSSでスタイルをカスタマイズする部分を指定したりします。まずは、このHTMLタグというのを覚えておいてください。

ちなみに、引用符を表すHTMLタグは <blockquote> ~ </blockquote> です。「/」は終わりを表します。つまり、<blockquote>から始まって、</blockquote>までの部分を引用符としてWebページで表示してくださいという意味になります。このHTMLタグの書き方がわかると、何かあったときに修正しやすいので覚えておいてください。



4.今回カスタマイズした引用符CSSはこれ! 

では、前準備が終わったところで今回カスタマイズした引用符CSSを紹介します。実際にブログ(ブログでなくてもOK)で使いたい人はコピペ用CSSコードを貼っとくので、コピペしてサクッと使ってください。色々いじって、勉強したいという人は、CODE PENも貼っておくので、CSSの部分を自分でさらにカスタマイズしてみてください。CODE PENでいじる前に、「5.CSSコードの解説」を見ながらいじってみると理解がより深まると思います。

コピペ用CSSコード


コピペ用CSSコード(一般用)


blockquote {
    background-color:#fafafa;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
}
blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}


コピペ用CSSコード(ライブドアブログ用)


.article-body-inner blockquote {
    background-color:#fafafa;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.article-body-inner blockquote:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
}
.article-body-inner blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}





CODE PENで色々試してみよう!

See the Pen 引用CSS by Ken_chan (@KentaroT) on CodePen.


「CODE PEN」でHTMLとCSSのコードを貼りましたので、細かい数字などを変えるとどんな風に変わるのか試してみてください。CODE PENはコードを変えるとリアルタイムで結果が変わるので、自分の手で動かしてどんな風に変わるのかすぐに見ることができます。習うより慣れろ。初めての人も、まずは体験してみましょう!

って思って、CODE PENを貼ったんですが、しばらく使わないうちにリアルタイムで編集して表示することができなくなったんですね。残念! でも、自分で「CODE PEN」のアカウント作って試してみることはできるので、上のコードをコピペしてぜひ練習してみてください。数字などを変更すると、リアルタイムで結果が表示されるので勉強になりますよ!

5.CSSコードの解説 

ここではCSSコードに出てくる言葉の意味を中心に解説していきます。他のサイトで調べながら見ていくの時間がかかりますからね。わからない言葉があれば、ここを読んで理解を深めてください。ここだけでわからなければ検索することをおすすめします。知りたいときに調べるのが一番身につきますからね!

基本的に
  1. HTMLタグの説明
  2. CSSコード
  3. CSSコードの具体的な説明
の順番に解説していきます。ここでは入門的な位置づけで解説していきます。CSSをもっと詳しく知りたいとか、解説をいつもでも参照したいという人はハンドブックを手元に置いて勉強することをおすすめします。系統的だし検索性もまだまだ紙の方がいいところもありますからね。

ホームページ辞典 HTML・CSS・JavaScript」は版を重ねたロングセラーです。

blockquote

引用した部分を表すタグです。blockquoteを使うと読者が見やすいだけでなく、Googleのロボットからも引用部分がわかりやすくなります。Googleからも引用部分をしっかりと区別しているサイトだと、認識してもらえるってことです。

blockquote {
    background-color:#fafafa;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

background-color: #fafafa;
background-colorは、その名の通り背景の色です。

#fafafaは色の番号です。コンピュータで色の表現方法は色々ありますが、#の後に6桁の英数字が並んだものは、HEXといいます。緑・赤・青の色の強さを前から2桁ずつの英数字で表現しています。この英数字は16進法なので、0から始まってfで終わります。(9の次はaです。)つまり、この場合は緑を9dの強さで、赤をd4の強さで、青をff(ffはMAXですね!)の強さで混ぜ合わせた色を表示してくださいって意味です。

この辺は、カラーピッカーを使ってみると理解しやすいと思います。「カラーピッカー」で検索するとすぐにでてきますが、「ColorHexa」あたりがコンピュータの色の表現方法を理解するのにはいいかもしれません。

color: #777777;
colorは文字の色です。文字の色を#777777にして、っていう意味ですね。

border-left: 4px solid #9dd4ff;
border-leftは、左の線です。Webページ上でblockquoteで表示されている部分を四角い箱だと考えます。これをボックスモデルと呼びます。(ボックスモデルを聞いたことがない人はぜひググってみてください。)はじめはありませんが、その四角を線で囲んだり、左だけ線を引いたりすることができます。今回のborder-leftは、その四角の左に線を描いて!っていう意味になります。

4px solid #9dd4ff;は、その線の種類を指定しています。4pxは4ピクセルの太さで、solidは実線で、#9dd4ffは色でしたね。つまり、四角の左側に青い4ピクセルの太さの実線を引いてくださいって意味になります。


box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
box-shadowは、ボックスモデルに影をつけて!って意味です。こんな1文で影をつけられるCSSって便利ですね!

0 2px 4px
この部分は影の太さを指定しています。数字だけ並んでいるのでわかりにくいですが、CSSにはこの数字の並びに意味があります。左から、上の太さ、左右の太さ、下の太さです。右と左は別の太さにはできないの?と思った人は鋭いです。実はこの並んだ数字は、数字の数によって意味が変わります。

★    → 上下左右
★★   → 上下、左右
★★★  → 上、左右、下
★★★★ → 上、右、下、左

星の数が数字の数だとすると、このような意味になります。これを知っていれば簡単に指定できるので覚えておきましょう。

rgba(0, 0, 0, 0.14);
rgbaは、色を指定しています。さっきのHEXとは違いますね。CSSではホントにいろんな指定の仕方があります。rはRED、gはGREEN、bはBLUE、aはALPHA値を表します。つまり、カッコ内の数字は左から、赤強さ・緑の強さ・青の強さ・透明度(不透明度)になります。色の強さは0~255で、透明度(不透明度)は0~1で表します。透明度は、0が透明、1が不透明です。0.5だと50%の透明度ということになります。上の場合は、0.14になってるので14%の透明度(不透明度)ということですね。

before

その名の通り、属している要素の前の部分(横書きなんで左ですね)に要素を付け足すときに使います。これを疑似要素といいます。お察しの通り、後ろに付け足したいときは after で疑似要素を指定します。

blockquote:before{

}
今回の書き方だと、blockquoteの前に疑似要素を付け加えて!という意味になります。そして、{ }の中にどんな疑似要素なのかを書いていきます。

コロンでつなげていますが、「::」とコロン2つの書き方もあります。
コロン1つ → CSS2
コロン2つ → CSS3
という仕様の違いです。つまり、コロン2つは最新版というわけです。どっちでも問題ないと思いますが、CSS3に対応していないブラウザだと正しく表示されないので不安だったらコロン1つにしておけば無難です。

    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
この部分は、疑似要素の配置の仕方を指定しています。

display: inline-block ;
displayは画面への配置の仕方です。ボックスやテキストの各要素をどのように配置していくかを指定します。displayには4つ指定方法があります。

block → 各要素を縦に並べる
inline → 各要素を横に並べる
inline-block → 各要素を横に並べ、要素内はblockの様に扱う
none → 非表示

簡単にいうとこんな感じです。基本はblockとinlineです。inline-blockはその中間です。細かい話は省略しますが、inlineではその要素の高さや幅を変えられないので、高さを幅などを変えたいときなんかにinline-blockを使います。noneは非表示になるのでいつ使うの?と思いますが、スマホのときだけ非表示なんてときに使ったりします。

position: absolute ;
top: 7px ;
left: 0 ;

positionも配置の仕方ですが、もう少し細かい指定ができます。まず、positionには4つの指定方法があります。

static → 位置変更できない(既定値)
relative → 現在の位置を基準に位置を指定
absolute → 親要素の位置を基準に位置を指定
fixed → 画面の決まった位置に固定

といった感じになります。既定値のstaticは指定しなくてもすでにこれになっています。だから、各要素の位置を指定したい場合は、relativeかabsoluteかfixedを指定してから、top, bottom, left, rightなんかで細かい位置を指定します。

今回はblockquoteの親要素に対して疑似要素before(具体的にいうと「”」ですね)の位置を指定したかったので、absoluteを指定してから、top: 7px;(親要素の左上を基準にして上から7ピクセル下に表示)left: 0;(親要素の左上を基準に左から0ピクセルのところに表示)となっています。要するに親要素の枠の中に入れたかったんですね。

    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
この部分は、実際に疑似要素として表示させるものを指定しています。

content: " “" ;
これは、content(コンテント)なので表示させるコンテンツ、この場合は「”」ですね。

font-family: sans-serif ;
「sans-serif」というフォントで表示させてくださいってことです。ここはわかりやすいですね。

color: #9dd4ff ;
ここでいうカラーは字の色。つまりcontentで指定した「”」の色のことです。

font-size: 90px ;
これもそのまんま。フォントのサイズを90px(ピクセル)で表示してってことです。今回のフォントサイズの単位はpxですが、他にもたくさんあります。めちゃくちゃあるのでここでは省略しますが、em(その要素のフォントサイズを1とする単位)くらいを覚えておけば実用上は問題ないです。

line-height: 1;
これも読んで字の如く、行の高さのことです。ここでいう行の高さは、字の高さ+上下の行間の高さ になっているので注意が必要です。ようは、行間を調整するために指定します。

p

pタグは、段落をつけるときに使います。HTMLだと<p>~</p>と書きます。<p>から</p>までの部分が1つの段落ということになります。段落といっても一マス下がるわけではなく、行間が大きめに空くだけなので改行で代用できちゃいます。Googleから見ると、pタグがあった方がちゃんと段落をつけているページとなるのでしょうけど、正直私はほとんど使っていません。

cite

citeタグは、「citation」(引用・参照)の略で出典や参照元を表します。(ちょっと前までsiteの間違いじゃないの!?と思ってました。)出典を示すことは、その情報が信頼できる情報であることを示すことになるのでこれは使った方がいいと思います。

6.まとめ 

いかがだったでしょうか。CSSコードといっても読んで字の如くが多いので、慣れちゃうと「そんなもんか」って感じになると思います。今回の内容を理解しただけでも細かい数字なんかを変えるだけでかなりバリエーションが増えて、自分オリジナルの引用符が作れると思います。さあ、サクッとコピペしてカスタマイズしましょう!


けんちゃん 笑う S
これでサクッとオリジナル引用符がカスタマイズできるぞ!


少しでも参考になったら一番下の「拍手」「コメント」をいただけると嬉しいです! 質問も大歓迎です!