HTMLで記事を書く（素材付き／その1）

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

みなさんは、アメブロの記事を書くとき、どのエディタを使っていますか？

古くからのアメブロユーザーさんは「標準エディタ」ですかね？　あるいは、「新エディタ」に移行された方も多いでしょうか？

ブログ記事を書くときに大切なのは、いかに分かりやすく自分の思いを伝えるかということだと思います。文章のうまいへたより、読んでくれる人のことを考えて、自分の思いを精一杯表現することです。

ですので、そのうえでストレスになるであろう「よく知らないHTMLを使う」ということについて、考えてみたこともない人も多いものと思います。

けれども、アメブロを自由にカスタマイズしようと思えば、避けられないのがHTMLの習得であることも事実。

そこで今回はタイトル通り「アメブロの記事をHTMLで書いてみよう」という、少し難しいかも知れないお題です。3回に分けて解説してゆきたいと思います。

HTMLを習得することによるメリット

そのためにはまず最初に、HTMLを習得することによるメリットを説明したいと思います。

SE0対策に有利になる
ビジュアル的に「お！」と思ってもらえるような記事が手間なく書けるようになる
表現の幅が広がることになるので、ブログで記事を書く楽しみや可能性がどんどん広がる

ということがまずあげられます。

そもそもHTMLというものは、検索エンジンのクローラーをはじめとするロボットが文章の構造を分析しやすいようにルール付けされたことがその起源ですので、すごく単純なものなんです。ほんと、笑えるくらいに。

全部を理解しようとするからハードルが上がるのであって、ブログを書くのに覚えておいたほうがよいタグは限られています。慣れてくれば、ひとつのタグを覚えるのは、漢字を一文字覚えるのと大差ありません！

3回にわたる記事で、

HTMLを覚えることによるメリットを知る
ブログ記事でのHTMLの使い方について
基本タグの習得とタグ表示のカスタマイズ方法

について説明してゆきます。

チェックボックス付きリストを書く

メリットを感じていただくためのその一は、上の文章にあるチェックボックス付きリストを簡単に作成する方法です。

上記リストのHTMLは下記のようになっています。

<ul>
<li>（文章）</li>
</ul>

チェックボックの画像が先頭につくようにCSSをカスタマイズしていれば、上記のようにHTMLを書けば勝手にチェックボックス付きのリストを作成してくれます。<li>（文章）</li>の（文章）をコピー＆ペーストして（文章）の部分を変えてあげれば数がどんだけあろうと先頭にチェック画像が表示されます。

カスタマイズしていない場合、上のように書くと次のように表示されます。

これはこれで使いたい時もありそうですね。そこで、チェックボックス付きのリストを作成したい時だけそうするためにulというタグに名前を付けることにします。たとえば、<ul clas="check">～</ul>という具合です。これをクラス指定といいます。CSSで「check」というクラスに対して「こうしなさい」という指定をすることでチェック付き画像が表示されるようになります。

コピー＆ペースト用CSS

まず、CSSの編集で、その最後に次の指定コードをを貼りつけます。

.articleText ul.check { /* チェックマーク付きリスト */
	list-style-type: none;
}
.articleText ul.check li {
	padding-left: 17px;
	background-image: url('（アップロードした画像のパス）');
	background-position: 0 3px;
	background-repeat: no-repeat;
}

そうすると、以下のように書くことで、

<ul class="check">
<li>（文章）</li>
</ul>

チェックボックス付きリストが作成できるようになります。

黄色い文字の部分（class="check"）は必須ですので忘れないようにしてください。黄色い文字を書かずに冒頭部分を単純に<ul>とすれば、頭に「・」のついた通常のリストが表示されます。

チェックボックス画像については6種類下に貼り付けておきますので自由にご使用ください。どの画像を使うかと、ブログの文字の大きさによって、貼り付けるCSSコードの黄色い文字の部分の微調整が必要です。

最初の17pxは、チェックボックと（文章）との間のスペース。詰まりすぎているようであれば大きくしてください。

次の3pxは、画像の表示位置。下すぎれば値を小さくし、上すぎれば値を増やしてください。

いずれともマイナスの値も指定できます。大きな画像を使用した場合、ブログ本文の文字の大きさが小さいと画像がすべて表示できないことがあります。そのときは他の画像に変えるか、リストの文字を大きくすると解決します。リストの文字を大きくするためには、

.articleText ul.check { /* チェックマーク付きリスト */
	list-style-type: none;
}
.articleText ul.check li {
	padding-left: 17px;
	background-image: url('（アップロードした画像のパス）');
	background-position: 0 3px;
	background-repeat: no-repeat;
	font-size: 110%;
}

上のCSSを使用して、110%の部分を調整すればOKです。