ブログデザインを変えてみた／「マークアップ」を軸に考えるべき理由
テーマを入れ替えてみました。
まだ調整中ですが。
マークアップを軸に考えるべき３つの理由
- 検索ロボットに意図が伝わりやすい
- パソコンだけキレイに見えてても意味がない時代になった
- 後からのデザイン変更をラクにできる
今回デザインを変えた理由が「マークアップと見栄えの調整」
- マークアップして見出しやリストを記述しても、見栄えがイマイチだったこと
※このリスト表示なんか、まさにね。マークアップするだけで枠付きになったもん。 - CSSを自分でいじればいいのだが、直したいところが多すぎたのでテーマごと入れ替えた方が早い
マークアップとは、HTMLやXMLなどのマークアップ言語の構文を記述すること。また、記述された構文自体のこと。特に、元となるテキスト文書にタグなどのマークアップ言語の構文を書き入れていって、文書の構造やレイアウト、修飾などを指定することを「マークアップする」という。
マークアップとは、コンピュータに「そのテキストの、意図」を伝えるもの
私も、それほどキッチリした構文を使ってるわけではない。
というか、今まで、ほぼほぼ、それほど意識しないで書いてきてる。
過去にWebデザインを仕事でやってたので、一通りの知識はあるけども。
実際には、ほぼほぼ無視してきた。
はてなブログは比較的キレイにマークアップされるが、アメブロはひどかったしな…。
でも、せっかく書式をカンタンに設定できるのに、「このテーマを使ってると、直さない限りマークアップしても見た目的にあまり区別つけられない」ということが、起こってた。
もちろん、自前でスタイルシートを付け足すとか、整える手段はある。
が、メンドクサイ。
テーマも、作り方によって、カスタムしやすいテーマと、そうでもないものとある。
スマホからの閲覧がどんどん増えていることから、パソコンでしか見られない「背景の画像」などは、もう「こだわるべきポイントではない」と思えるようになった。
昔と、そもそもの考え方が違う時代になってきた。
要は、パソコンからしかわからない「デザイン」よりも、スマホにも他のデバイスにも関わってくる「マークアップと、それに適用するスタイルシート」によって記事内の体裁を整える…という、本来あるべきカタチが、一番、よいのだ。
WordPressでブログを書いている方は、一度はイラッとしたことがあるのではないかと思う
「連続した空白行を入れたはずなのに、反映されるのは一行だけ」
という現象。
これも、本来ならば「段落と段落の余白」は、連続改行で入れるべきではないものだからだ。
正しいマークアップのために、WordPressが勝手に、ソースを修正するのである。
なので、改行で空白を増やしたい場合は、
＜改行＞＜スペース＞＜改行＞＜スペース＞＜改行＞
というように、「空白行に文字がある」ように記述する必要がある。
また、本来、一般的にEnterキーによって入力する「改行」と、「Shift＋Enter」によって入力する改行とは違う。
HTMLを見たことが無い方には、「なんのこっちゃ」な話だと思うのだけども。
文字を入力した、それをどう表示するか…ということをコントロールしている裏側の仕組みにとっては、その違いは大きなものなのだよ。
とかいって。
私も、空白行を連続で入れたい時はEnterを回数分入力してて、WordPressで記事書く時はちょっと、イラッとするんだけどね。
とにかく。
マークアップというのは、「この行は大見出しだよ」「ここはリストだよ」「ここは番号を振ったリストだよ」「ここは引用文だよ」ということを、コンピュータに伝えるために必要なもの。
マークアップで制御しなくても、単に見栄えだけ整えりゃいいのなら、見出しにしたい行のテキストを好きな大きさや色にしたり、アンダーラインを引いたり…など、やり方はある。
けれど、それは、コンピュータ的には見出しとは認識できず、単なる「装飾されたテキスト」にすぎない。
つまり。
Googleの検索などには、いくら自分的ルールで「この大きさと色は見出し」のつもりでも、そうは認識されない、ということだ。
見出しとしてマークアップされていて、はじめて、ロボットにも「この行が見出し」だと認識される。
記事が記事としての体裁を整えているかどうか…ということをロボットが判断する材料は、マークアップしかない。
マークアップを整えると、いいことがある
ロボットに認識されやすい、というのは、いいことの最たること。
が、それ以外にも、マークアップをちゃんとした記事を書いておくと起こる「よいこと」が、ある。
それは、「次に別のテーマを選んだ時」に、何もしなくても勝手に、次のテーマに適用された書式に見栄えが変わってくれるということ。
自分ルールで決めた見出しの書式に、毎回、手動でフォントサイズや色などのスタイルを適用していると、一括でデザインを変えたくても、全部修正する必要が出てくる。
もとのデザインが白背景で、新しいデザインが黒背景だった…なんて時は、大変だ。
テーマに個別にスタイルシートを書き加えて、そこで制御しているならば、まだ、そこだけ修正すれば全て適用されるから、いい。
記事の一つ一つに、毎回、フォントの指定をしているとしたら、どうだろう。
古い記事などを参照した時に、黒背景にフォントが埋もれて全然読めない…なんてことが、起こる。
でも、本来あるべき「マークアップで制御」してあれば、そういうことも起こらなくてすむ。
そういうことをカンタンに実装できるために、「テーマ」がある
…と、いうわけですよ。
自分で作れるスキルのある人、スキルはあるけど手間かけたくない人は、サービス側が提供しているテーマから好きなものを選んで、適用する。
だから、テーマ選びにあたっては、初期設定のヘッダ画像がキレイかとか、背景がカワイイかとか、そんなことよりも、
「見出しの書式」などの、マークアップされた部分がどのように見えるのか、というのを考えた方がいい。
ヘッダ画像などは、たいていのテーマはカンタンに入れ替えられるようにできてる。
今回デザイン変えした理由は、そんなところ。
記事下に入れているこのバナー群も、モジュールにできるといろいろラクなんだけどねえ。
やろうと思えばできると思うけど、まあ、そこまではいいか～。
★外部サイトからも読者登録できます！→
