執筆ガイドライン

このページの記事目次 (カテゴリー: 執筆ガイドライン

← 前のページ  total 3 pages  次のページ →  

執筆ガイドライン6、テーブルタグを止めてdl、dt、ddタグを使う

これまで、下記のような見た目のページを作る時、エクセルのテーブルをぺたっと貼っていました。コードが読みにくくて仕方がないので、何か簡潔化する方法がないかと探していたところ、定義リストもしくは説明付きリストと呼ばれるタグの存在を発見いたしました。
dl-dt-ddサンプル


我ながら大変無知でお恥ずかしいのですが、この1年半エクセルテーブルのコピペで、人間が理解できればよし!と思っておりました。定義リスト(説明付きリスト)にするとGooglebot(以下、ロボ子)にとっても意味があるリストになるそうです。


<dt></dt>で囲まれた言葉を、後続の<dd>で説明するそうです。1つの<dl>に対して複数の説明<dd>を持つこともできるそうです。ふむふむ。



当ブログでの定義リスト


class付きのHTML、CSSはどれもうまく行かなかった…


今だにCSSの書き方がよくわかっていない為か、class付きの.yokonarabi dl {などのクラス付きのCSSとHTMLはどれも全く上手くいきませんでした。class付きの記述がうまく行けば、映画用、ゲーム用などと、定義リストの見た目を内容ごとに変えることができて楽しいかなと思ったのですが断念いたしました。


横並びにしたかったので、それが達成できたのが今回の収穫です。



HTMLは普通に書く


<dl>
<dt>言葉1</dt>
 <dd>説明1</dd>
<dt>言葉2</dt>
 <dd>説明2</dd>
<dt>言葉3</dt>
   <dd>説明3</dd>
</dl>


普通です。



CSSにはheightを追記したらちゃんと並んだ


.entry_m dt {
padding-top : 0.2em;
padding-bottom : 0.2em;
padding-left : 0.2em;
width : 10em;
height:1;
float : left;
clear : left;
}
.entry_m dd {
padding-top : 0.2em;
padding-left : 0.2em;
padding-right : 0.2em;
padding-bottom : 0.2em;
width : 40em;
height:1;
margin-left : 1em;
}


本当に理解に苦しむのですが、Bloggerにはサクッと入るコードが、FC2では言葉(=dt)説明(=dd)の高さが少しずつずれる、もしくはCSSが認知されないなどの怪奇現象が起きました。ようやく有効に見えるコードが下記の通りで、他のコードとの違いはよく分かりません。敢えて言うならheightを追加したことかな??なんて勘ぐっているのですが、結果オーライで検証終了しました。


他のことをしている時にふと理解できるようになったりするといいな~。なんて、運を天に任せております。



当ブログでの執筆ガイドライン


項目名と説明文のような形式をとる場合には、dl、dt、ddタグを使い、ロボ子にも構成情報を共有する。

執筆ガイドライン5、アンカーテキストの中身に注目

アンカーテキスト面倒くさい


お、思わず本音が…
じゅ、重要らしいですよ。SEOに!
これまであまり深く考えたことがありませんでしたが、アンカーテキストって中にていろいろ指示出しできちゃうんですね。



rel=nofollow


グーグルボット(以下、ロボ子)にリンクの先を追跡しないように指示出しする為のモノらしいです。


参照資料、外部リンク、サーチコンソールのヘルプ
特定のリンクに対して rel="nofollow" を使用する


nofollow属性は、ある程度限られたリンク先に使用することを意図されているみたいですね。信頼できないコンテンツ、有料リンクに関しては、そもそもそういうものを引用しないようにしたいものです。
クロールの優先順位については、当ブログでいうところの記事一覧やタグ一覧などの一覧系の独自コンテンツを持たないページへのリンクにはつけておいた方がいいかもしれません。ロボ子は、「内容が薄かったぞ!」みたいな感じで、嫌うみたいですから。



target=_blank


リンク先を表示するにあたって、新しいタブを開くか、同じページのまま移動するか?をコントロールしている属性です。
target=_blankかどうかなんて、ロボ子、興味なし!という話なので、後はどっちを好む人が多いかの問題みたいです。


意外だったのは、新しいタブを開かれるのが嫌な人が結構いるらしいということです。結構って、どのくらいの割合なんだろう。新しいタブにするかどうかは自分で決めたいらしいです。
私は個人的には新しいタブを開いてくれる方が好きです。前のページに戻ると読み直しが発生したりします。前のタブに戻る方が読み直し頻度が低いからです。中国やインドのような通信速度にストレスを抱える地域に住んでいると、リンクを開くときに右クリック(もしくは長押し)で「新しいタブで開く」を選択する習慣ができます。弱者の味方を気取って、当ブログでは、常に新しいタブを開く、target=_blank派を通していきます!あしからず。



id="#"


ページ内の指定の場所にリンクしたい場合の話、便利ですね。恥ずかしながら、過去記事は長文・脱線が多いので、ページに対してリンクを張っているだけでは、アンフレンドリーだったりします。「ロボ子よ、ここに書いておるぞよ!」とお伝えしたいときに、必要に応じてidをつけていくのはアリかもしれません。


記事内に内部リンク付きの目次を作っていらっしゃる方なんて、なんかプロブロガーな雰囲気でてるな~っと圧倒されます。
勇気を出して言っちゃうと、私の記事は暇つぶし&流し読みで寛いでもらう系を目指しているので、目次をみてジャンプしたくなるほどのボリュームにはしないように心掛けています。(←努力目標)


idでのリーディング支援より、どちらかと言うとスキムリーディングを支援する感じでハイライトを目で追うだけで、さっと内容がわかり、読みたければ詳しく読めるような書き方に挑戦中です。(ライティング手法名、思い出せませんが…)



title=" "


アンカーテキストのtitleって、存在すればホバーした時に吹き出し説明をポップアップしてくれるアレです。FC2はファイル挿入ボタンやリンクボタンで作成したリンクは全てtitleやaltを書いてくれるので便利ですね。テンプレートの中に自分で手書きしたアンカーテキストには入れ忘れていることが多いので、ボチボチ修正したいなと思っています。


理想的には、titleとリンク名の使い分けができるようになるといいなと思っています。んが、面倒くさいです。



external linksアイコン


外部リンク;日本銀行(←この外部リンクの文字の後ろについているシンボルマークです)



外部リンクアイコンCSS


a.exlink {
    background: url("http://blog-imgs-102.fc2.com/l/a/g/laggy2015/exlink.png") no-repeat right 0;
    padding-right: 10px;
}

画像はwikipediaを参考に作りました。普通にFC2のファイルアップロードを行い、CSSにて表示させています。
外部リンクか、内部リンクかを自動判定させるほどのこともないので、そこまではやっていません。


HTMLを書くとき、すなわちFC2のURLボタンにアンカーテキストを書いてもらった後、
<a href="http://www.boj.or.jp/" target="_blank" class="exlink" title="日本銀行">日本銀行</a>
手差しでclass="exlink"を追記することにしました。


CSSについてはこれまであまり取り組んでこなかったのですが、いい機会なので作ってみました。
classの書き方がわかったのが非常に大きかったです。



当ブログでの執筆ガイドライン


いろいろあるから、急に全部はムリだろうけれど、少しずつ習慣づけるのもいいんじゃない?


執筆ガイドライン4、強調、弱い強調、装飾、マークを使い分ける

強調には4種類ある


強調の表現方法には、強調タグ<strong></strong>、弱い強調タグ<em></em>、装飾タグ<b></b>、マークタグ<mark></mark>の4種類があるようです。


このうちグーグル先生のところのグーグルボット(以下、ロボ子)が重要ワードとして理解するのはstrongタグとemタグで、bタグは人間用のみため強調、markタグは検索用語をハイライトしたりして検索した用語をわかりやすくしたりするのに使われるみたいです。ただ、strongタグの多用は、ロボ子が混乱するので、避けた方がよいと書いていました。


しらなかった~。


FC2だと本文編集メニューに太字にしたいときのBボタンがあります。それはタグ的にはstrongタグなので、太字にしまくっていたら、ロボ子がイラッとしてしまうかもしれませんね。くわばら、くわばら。



当ブログの強調CSS


私がBボタンをあまり使わないのは単に太字が嫌いだからです。ハイライトの方が好きです。このため今回CSSを書き直してすべてハイライトにしたのですが、strongとbは指定しなくても勝手にboldになってしまうことがわかりました。(いまさら…)そのうちboldの解除の仕方を調べてみようと思っていますが、当面は下記の通り進めます。



強調タグ<strong></strong>
strong {
background: linear-gradient(transparent 60%, #ffadad 0%);
}

赤みが強いハイライトとデフォルトでくっついてくる太字です。
あまり使ったことがないタグですが、一つの記事に重要なものが何もないのもさびしいかな?っと思えてきました。一つぐらい重要な言葉が入った記事が書けるようになりたいものです。



弱い強調タグ<em></em>
em {
background: linear-gradient(transparent 60%, #ffc256 0%);
font-weight: bold;
}

実は、先に決まったピンクのstrongとゴールドのbのタグを混ぜて、中間色としてできた色です。橙色と呼ぶことにしています。



装飾<b></b>
.entry_m b {
background: linear-gradient(transparent 60%, #ffd700 0%);
}

これまで強調が嫌い&ハイライトの仕方がわからなかったので、よく「」を使っていました。これからは、スムーズに読めるように実際の発言以外は全て装飾に置き換えていこうと思っています。
※装飾タグはテンプレートの中でも使われているので、このタグは記事本文の限定指定です。



マーク<mark></mark>
mark {
background: #ffff00;
font-weight: bold;
}

他のタグはlinear-gradientを使用してアンダーライン風なハイライトなのですが、マークタグは検索語をハイライトする時の一般的な色と一般的な様式に合わせて置きました。でも、もしかしたらCSSを作らなくてもFC2のデフォルトが効いている??


自分で記事を書くときに使うものではありませんが、現在のブログ内検索の仕組みを書き換える時に使うかもしれません。



当ブログでの執筆ガイドライン


強調表現は、使い分けましょう!
(というか、一つの記事に一個ぐらい重要語句を入れるようにした方がいいんじゃない?)


♣執筆ガイドライン3、段落と改行は別物

段落<p></p>と改行<br />の違い


まず、段落タグの存在を知らなかった立場から話をすると、段落タグ<p></p>と改行タグ<br />が同一視されることがあるのは、段落タグはCSSのスペーシング(マージンやパディング)で、改行されているかのようなスペースを作り出すことができるからじゃないかと思います。


段落タグ<p></p>はグーグル先生のところのロボ子に、どこからどこまでがひとまとまりの内容なのかをお伝えするのに使うものの様ですから、人の目に改行風に見えるのは、人間用のおまけのようなものなんでしょうかね?


段落タグを使い始めてまだ間もないので、定かではありませんが、ロボ子がキーワード検索のスニペットに変な組み合わせの文章を表示することが少なくなるんじゃないかと実験中です。


そして、改行タグ<br />は、純粋に人間用の見た目を整えるためのタグだと理解しました。


ロボ子よ、今まで無関心でごめんm(__)m
これからは、HTMLはロボ子と対話するための言語として、英語、中国語に続く、第3外国語として、ちゃんと文法も語彙も勉強するよ。


なんのこっちゃ。って感じなのですが、この段落タグをきっかけに、HTMLの文法を意識するようになりました。しかし、正直タグを忘れないようにするのは面倒です。習慣がつくまで当ブログの最頻の読み手グーグルボットを擬人化し、(少なくともこの先3か月ぐらいは)リーダーペルソナとして大切に扱うことにいたしました。笑。



当ブログの段落CSS


.entry_m p {
margin-top:0.25em;
margin-bottom:0.25em;
}


段落用のタグの存在を知った後、いつも通りに記事を書いて、ロボ子用にpタグを書き加えていったら、物凄く空白だらけの記事になってしまい、思わず「pタグ、空白、不要」とググりました。


これは普通の人と逆方向の思考だったみたいです。「一文を短く、だらだら書かない」と自分に言い聞かせて、意識的に改行タグをふんだんに使用するよう努力してきたのですが、実は段落タグを使えば、裏で普通の書き方で空白なしで書いても、CSSでスペースを空けてくれることがわかりました。
まぬけですね。
あはは。


最終的には、あまり深く考えずに本文を書いても段落タグを入れれば、今までと同じようなスペースができるようなCSSに調整しました。



当ブログでの執筆ガイドライン


ロボ子用の段落タグは必ず入れる。
(そうすれば、自ずと空白がはいる。)


♣執筆ガイドライン2、本文見出しは大→小へ

本文見出しは大(h2)→小(h6)の順で書く

これを守らないと、Google先生のところのロボットが混乱するらしいです。公用文などの見出しには編、章、節、款、目の5区分があるみたいです。へぇ~。階層は5階層ぐらいまでにしておこう!みたいな教えでしょうか?

最大見出しの編にあたる<h1></h1>タグは、記事を分けるのに使用されています。この為、それより小さいタグをそれぞれ、章<h2></h2>、節<h3></h3>、款<h4></h4>、目<h5></h5>というように記事内で使い分けるといいのかな?

当ブログの見出し構成

当ブログでは、これを受けて、CSSを下記の通り書き直しました。

章<h2></h2>

.entry_m h2 {
margin:1em 0 0.25em 0;
padding:0.25em;
border: 1px solid #cceeff;
background:#cceeff;
font-size:1.3em;
line-height:1.5;
}

節<h3></h3>

.entry_m h3 {
margin:0.75em 0 0.25em 0;
padding:0.25em;
background: linear-gradient(transparent 50%, #cceeff 0%);
font-size:1.3em;
line-height:1.5;
}

款<h4></h4>

.entry_m h4 {
margin:0.5em 0 0.25em 0;
padding:0.25em;
border-bottom: 4px solid #cceeff;
font-size:1.2em;
line-height:1.5;
}
目<h5></h5>
.entry_m h5 {
margin:0.5em 0 0.25em 0;
padding:0.25em;
border-bottom: 4px double #99ddff;
font-size:1.1em;
line-height:1.5;
}
業務連絡用タグ<h6></h6>
.entry_m h6 {
margin:0.5em 0 0.25em 0;
padding:0.25em;
border: 4px double #99ddff;
font-size:1.0em;
line-height:1.5;
}

見出しタグのスペーシング(マージンとパディング)は、あまり差をつけていません。大きくても、小さくても、一応見出しですから、読むときの呼吸感は同じなのかな?、と。

文字の大きさは、px指定から、em指定に書き換えました。使うガジェットによって、見出しの文字が本文の文字より小さいという変な状況が起きていたりするのですが、これがある程度解消されるのかな?っと思っています。

h6は基本的には使わないのでしょうけれど、業務連絡に割り当てました。今後は、カテゴリー「ブログは楽しい」の記事は過去記事としてこっそり公開することにしました。先週テンプレートの仕立て直しの記事を最新記事として更新したら、自分の記事なのに自分で鬱陶しくて仕方なかったのです。まぁ、そういう時に業務連絡タグは便利かな…なんて。

当ブログでの執筆ガイドライン

記事の見出しタグはちゃんと大きい方から使用する!

え?、今まで?

そりゃーもう適当に、オリジナルテンプレートの中で最も好きなサイズのh4と空き番だったh6だけで書いていました。今回のCSSの書き直しで過去記事のスペーシングとか、見出しデザインとか相当微妙なことになっています。号泣。