インラインスタイルで装飾を～無料ブログ利用者向け囲み罫の作り方
先日、友人にブログの改修をしたいので相談に乗ってほしいと頼まれました。制作会社に依頼するほどの大層な内容ではなく、自分の「なんとかしたい部分」を「どうしたらなんとかできるのか」それだけを教えてほしいとのことでした。
「え、そんなのググればいいじゃん」と、筆者をはじめ筆者の周辺のWeb業界のヒトビトは思うことでしょう。しかし「適切なワードを選定し回答にたどり着く」までの操作がしんどい、という状況の方がむしろ一般的なPCユーザーの方々には多いのかもしれません。
友人にはすでに簡単なレクチャーを行ったのですが、今後も自分自身で迷いなく作業できるよう、無料ブログの記事で囲み罫を表現するための方法をまとめてみました。
※Webを生業とする方には基本的すぎて「何を今更」と物申したくなるのもさることながら、通常の制作業務には全く役立たない内容となっております。
目次
ことの成り行き
件の友人は、自分自身のWebサイトを作るべく、グループレッスンに参加してWordPressの使い方を教わったことがあるそうです。しかし友人自身はWordPressに精通したいわけでもないのに、講師の方は基本からガッツリ教え込もうとし、その割には受講者が本当に知りたい細かな疑問には耳を傾けてくれなかったそうで、結局WordPressを利用することは諦めたのだとか。そして現在はJimdoと無料のブログサービスを利用しています。
まずは改修の目的、具体的な要望、及び改修によって執筆者・読者が得られるメリットについて聞き取りを行いました。この時点で調査費をいただくこととし、何かしらの制作作業が発生したら別途制作費をいただくことにしました。なるべく費用はかけたくないとのことだったので、友人自身が自力で作業できる方法と、幾つかの代替案を用意しました。代替案の中にはWordPressの利用を想定したものもありましたが、最終的には利用中のブログを引き続き使用することにしました。
今回の要望の一つに、内容にメリハリを付けるため「記事の一部に囲み罫を付けたい」というものがありました。こちらでスタイルシートを作成して友人自身はソースをいじらずに実現する方法も考えましたが、少しHTMLを習ったことがあるそうなので、記事を書く都度インラインスタイルを記述する方法を採用しました。
同様のことをしたいブロガーさんは結構いらっしゃるようで、すでに数多の良記事が存在します。それらを紹介し、軽いレクチャーの後自分自身で作業してもらいました。
下記の記事ではインラインスタイルの記述方法が丁寧に説明されていて、ほぼ友人の要望を満たせる内容です。
しかし対症療法的な書き方がなされており、基本の解説がないため、何か応用しようとするとどうすればいいか迷ってしまうようでした。
以下、HTML・CSS初心者の方向けに、ブログ作成画面での作業手順、style属性の記述方法・cssのプロパティについての解説していきます。
FC2ブログの記事編集画面で囲み罫を表現する
大抵の無料ブログには文字色をつけたり背景色をつける機能があります。この機能を施したHTMLソースを参照すると、テキストの前後にタグが付記されています。これを少し書き換えれば囲み罫にすることができます。
FC2ブログの記事編集画面を例に手順を追ってみましょう。
まずテキストを入力します。
囲み罫を付けるテキストを選択して背景色を設定します。
あれ？囲み罫になりませんね…右上の「HTML表示」をクリックして、HTMLソースを見てみましょう
テキストが<span style=”~”></span>という文字で囲まれていますね。2箇所のspanという文字をdivに書き換えてください。
囲み罫になりました。
<span></span>のように前後を<>で囲まれたものをタグといいます。<span>を開始タグ、</span>を終了タグといいます。開始タグの中に書かれているstyle=”~”という部分はstyle属性と呼ばれるもので、タグに囲まれている内容の見栄えを設定します。
書き換え後のタグ<div>はブロックレベル要素と呼ばれています。タグで囲まれた部分は前後に改行が入ります。背景色を付けた場合はテキストが表示されている範囲の上から下、左端から右端までブロック状に色がつきます。
一方、書き換え前のタグ<span>はインライン要素と呼ばれています。テキストの中の一部を囲んで装飾する時などに使用されます。要素の前後に改行が入らず、背景色を付けた場合は文字そのものの背景のみに色がつきます。テキストの塊の中の一部分のみ色を変えたいときには<span>タグで囲みます。
See the Pen css basic – inline, block by keiko (@kamekon) on CodePen.0
さて、すでに投稿済みのブログ記事に早速囲み罫をつけようと、友人ははりきって作業しようとしたのですが、HTMLソースが次の図ようになっていました(O_O)
フォントファミリーとか、いらんスタイルがてんこ盛り入っていますね…。おそらく、以前書いた記事のテキストをブラウザ上で選択し、記事のプレビュー表示画面にコピペしてしまったのだと思われます。HTML表示からソースをコピーしていれば、もっと単純な記述になっていたかもしれません。
ワレワレWebを生業とする者なら、テキストエディタにソースを移し、不要な部分をどんどん取っ払えばいいので、実にどってことない作業ですが、そもそもWebのヒトではない友人はこの時点でかなりやる気をなくしてしまったようです(O_O)
ダレでもなんとかできそうな方法を考えてみましょう。
「ブラウザでの表示」の図における上から2行の部分に囲み罫を付けたいとのことだったのですが、どの部分を<div>で囲めばいいか、判断に迷いますね…。頑張って見極めてみましょう。
まず、記事編集画面をHTML表示にして、「多彩なタッチのイラスト＆漫画…」というテキストでページ内検索します。該当のテキストがハイライトされますね。このテキストと「★★★【イラストのお仕事について】★★★」の間にブロックの境界があるはずです。
ブロックの境界はおそらく次のような記述になっています。
</div><div
このテキストでページ内検索してみます。「多彩なタッチのイラスト＆漫画…」の直後のオレンジ色のハイライトの部分が恐らくブロックの境界でしょう。
他にもいくつか有りますが、改行タグがブロック要素に囲まれてしまっているだけなので気にしなくて大丈夫です。
終了タグの後に一旦改行を入れて、ソースの見通しを良くしましょう。ブロックの始まり部分についても同様に探します。
抜き出せたソースを<div>タグで囲みます。
<div style="background-color: #f9f6ab;border-radius: 20px; padding:20px">抜き出せたソース</div>
やっとできました＼(^O^)／
もともとリンクテキストについていた黄色い背景色は、うるさいので削除しました。
友人は、この見極めがかなり辛かったようで、せっかく少なくないオカネを払ってブログを良くしようとしたのに、この先もう二度とこの作業はしないのではないのかというくらいやる気をなくしていました。
既存のソースに囲み罫をつけようとすると大変だけど、一から作る場合はそれほどでもないはずなので、ぜひやる気を取り戻してほしいです。
余白を設定する
背景色を付けて囲み罫らしくなりましたが、このままでは見栄えが良くないですね。文字と背景色の間に余白を設定しましょう。
上の状態のときのstyle属性は下記のようになっています。
style="background-color: rgb(217, 150, 148);"
rgb(217, 150, 148);の後にpadding: 10px;を追記してください。
See the Pen basic css – padding by keiko (@kamekon) on CodePen.0
余白が設定されて、テキストが読みやすくなりましたね。pxの前の数値を変えると、余白もそれに応じて広がったり狭まったりします。
pxというのは長さの単位で、ピクセルと読みます。ざっくりいうと、1pxはモニタを構成する光の点の一辺の長さです。他にも様々な単位が使用できます。詳しくは下記を参照してください。
style属性の記述方法
次にstyle属性の記述について解説します。難しいことはさておき、基本の記述方法だけを抑えておきましょう。
ソースが読みにくいので、style属性の中に改行を入れてみましょう（タグ内の改行は表示には影響を与えません）。
<div style=" background-color: rgb(217, 150, 148); padding: 10px; ">テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</div>
style=”~”内の一行目は背景色に関する設定、二行目は余白に関する設定です。コロン（ : ）で区切られた左側が設定する性質（プロパティ=背景色・文字色・余白など）、右側が設定する性質の具体的な値（色名・余白の量）となります。
プロパティと値のペアはセミコロン（ ; ）で区切って複数記述できます。プロパティと値の記述が間違っていたり、コロンとセミコロンのいずれかが抜けていたりすると意図したとおりに表示されないので注意してください。
最後の行の後のセミコロンは省略できますが、あとから記述を追加する時にセミコロンの抜けに気づきにくくなるので、常に省略せずにおくのが無難です。
style属性内の記述方法
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
…
このようにstyel属性を使ってタグの中に直接記述されたスタイルを、インラインスタイルと言います。実は通常Webサイトを制作する業務ではあまり使用されず、通常はスタイルシートと呼ばれる外部ファイルにスタイルを記述することが多いです。
次は、囲み罫を装飾するにあたってどんなプロパティや値が使えるのか、具体的に見ていきましょう。
プロパティ：背景色と文字色
背景色を指定するプロパティ background-color
文字色を指定するプロパティ color
色はブログの記事編集画面から選んでもよいのですが、カラーピッカーを使ってもっと微妙な色を表示することもできます。
次の図は「color picker」というキーワードでgoogle検索すると使えるカラーピッカーです。左側に表示されている16進数表記のカラーコードか、rgb値のいずれかを値として記載します。
See the Pen basic css – collor by keiko (@kamekon) on CodePen.0
プロパティ：ボーダー
囲み罫を背景色よりは枠線で表現したい場合もあると思います。そのような時はborderというプロパティが使えます。
boderプロパティでは、ボーダーの形状・太さ・色を一度に指定できます。任意の順番でスペースで区切って記述します。太さの値は余白と同じ書き方、色は背景色などと同じ書き方です。
border: 1px solid #000;
See the Pen basic css – border by keiko (@kamekon) on CodePen.0
boderの形状に関する値は下記のようなものがあります。
See the Pen basic css – border style by keiko (@kamekon) on CodePen.0
borderよりもう少し詳細なプロパティもあり、3つの値を別々に指定したり、上下左右ばらばらの値を指定することもできます。
詳しくは下記を参照してください。
プロパティ：余白
余白の設定について、もう少し詳しく解説しましょう。先程設定したのは要素の内側の余白です。要素の外側にも余白を設定することができます。
内側の余白を設定するプロパティ padding
外側の余白を設定するプロパティ margin
いずれも上下左右のマージンをまとめて指定する際に使用します。
上下左右を異なる数値にする場合、スペースで区切って複数の値を指定します。値の数によってどこに適用されるかが異なります。
borderと同様、もう少し詳細なプロパティもあり、上下左右ばらばらの値を指定することもできます。 詳しくは下記を参照してください。
See the Pen basic css – margin, padding by keiko (@kamekon) on CodePen.0
プロパティ：角丸
ここまでに紹介したプロパティでおおよそ自由自在に囲み罫が表現できるようになったと思いますが、もう少しリッチな表現を目指してみましょう。といっても、囲みの角を丸くするだけですが…ちょっとかわいらしい印象になりますね。
See the Pen basic css – border radius by keiko (@kamekon) on CodePen.0
数値の指定の仕方は余白のプロパティと同じですが、水平方向と垂直方向の半径を別々に指定することもできます。
また、正方形のブロックレベル要素に対してborder-radius:50%を指定すると、正円になります（width、heightはと要素の幅と高さを表すプロパティで、ブロックレベル要素に対して指定できます）。
borderと同様、もう少し詳細なプロパティもあり、上下左右ばらばらの値を指定することもできます。詳しくは下記を参照してください。
ブログで使用することはないと思いますが、下記ページで角丸のプロパティを使ったステキなサンプルが見られます。
Webクリエイターボックス 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
スタイルシートリファレンス
これまでに挙げてきた以外にも、多くのプロパティがあり、様々なスタイルを設定することができます。例えば、背景には画像を敷き詰めることもできますし、グラデーションを設定することもできます。囲み罫に影をつけたり、色の違うボーダーを何重にもつけたりといったことも可能です。興味がある方は、下記を参照してみてください。
See the Pen double border box by keiko (@kamekon) on CodePen.0