読者です 読者をやめる 読者になる 読者になる

緋呂の異界絵師通信

ミエナイセカイ ハ カサナッテル

ブログデザインを変えてみた/「マークアップ」を軸に考えるべき理由

テーマを入れ替えてみました。

まだ調整中ですが。

 

マークアップを軸に考えるべき3つの理由

  1. 検索ロボットに意図が伝わりやすい
  2. パソコンだけキレイに見えてても意味がない時代になった
  3. 後からのデザイン変更をラクにできる 

 

 

今回デザインを変えた理由が「マークアップと見栄えの調整」

 

 

 

マークアップとは、コンピュータに「そのテキストの、意図」を伝えるもの

 私も、それほどキッチリした構文を使ってるわけではない。

というか、今まで、ほぼほぼ、それほど意識しないで書いてきてる。

過去にWebデザインを仕事でやってたので、一通りの知識はあるけども。

実際には、ほぼほぼ無視してきた。

はてなブログは比較的キレイにマークアップされるが、アメブロはひどかったしな…。

 

でも、せっかく書式をカンタンに設定できるのに、「このテーマを使ってると、直さない限りマークアップしても見た目的にあまり区別つけられない」ということが、起こってた。

もちろん、自前でスタイルシートを付け足すとか、整える手段はある。

が、メンドクサイ。

 

テーマも、作り方によって、カスタムしやすいテーマと、そうでもないものとある。

 

スマホからの閲覧がどんどん増えていることから、パソコンでしか見られない「背景の画像」などは、もう「こだわるべきポイントではない」と思えるようになった。

昔と、そもそもの考え方が違う時代になってきた。

要は、パソコンからしかわからない「デザイン」よりも、スマホにも他のデバイスにも関わってくる「マークアップと、それに適用するスタイルシート」によって記事内の体裁を整える…という、本来あるべきカタチが、一番、よいのだ。

 

 

WordPressでブログを書いている方は、一度はイラッとしたことがあるのではないかと思う

「連続した空白行を入れたはずなのに、反映されるのは一行だけ」

という現象。

これも、本来ならば「段落と段落の余白」は、連続改行で入れるべきではないものだからだ。

正しいマークアップのために、WordPressが勝手に、ソースを修正するのである。

なので、改行で空白を増やしたい場合は、

<改行><スペース><改行><スペース><改行>

というように、「空白行に文字がある」ように記述する必要がある。

 

また、本来、一般的にEnterキーによって入力する「改行」と、「Shift+Enter」によって入力する改行とは違う。

HTMLを見たことが無い方には、「なんのこっちゃ」な話だと思うのだけども。

文字を入力した、それをどう表示するか…ということをコントロールしている裏側の仕組みにとっては、その違いは大きなものなのだよ。

 

とかいって。

私も、空白行を連続で入れたい時はEnterを回数分入力してて、WordPressで記事書く時はちょっと、イラッとするんだけどね。

 

とにかく。

マークアップというのは、「この行は大見出しだよ」「ここはリストだよ」「ここは番号を振ったリストだよ」「ここは引用文だよ」ということを、コンピュータに伝えるために必要なもの。

 

マークアップで制御しなくても、単に見栄えだけ整えりゃいいのなら、見出しにしたい行のテキストを好きな大きさや色にしたり、アンダーラインを引いたり…など、やり方はある。

けれど、それは、コンピュータ的には見出しとは認識できず、単なる「装飾されたテキスト」にすぎない。

 

つまり。

Googleの検索などには、いくら自分的ルールで「この大きさと色は見出し」のつもりでも、そうは認識されない、ということだ。

 

見出しとしてマークアップされていて、はじめて、ロボットにも「この行が見出し」だと認識される。

 

記事が記事としての体裁を整えているかどうか…ということをロボットが判断する材料は、マークアップしかない。

 

 

マークアップを整えると、いいことがある

ロボットに認識されやすい、というのは、いいことの最たること。

が、それ以外にも、マークアップをちゃんとした記事を書いておくと起こる「よいこと」が、ある。

 

それは、「次に別のテーマを選んだ時」に、何もしなくても勝手に、次のテーマに適用された書式に見栄えが変わってくれるということ。

 

自分ルールで決めた見出しの書式に、毎回、手動でフォントサイズや色などのスタイルを適用していると、一括でデザインを変えたくても、全部修正する必要が出てくる。

もとのデザインが白背景で、新しいデザインが黒背景だった…なんて時は、大変だ。

テーマに個別にスタイルシートを書き加えて、そこで制御しているならば、まだ、そこだけ修正すれば全て適用されるから、いい。

記事の一つ一つに、毎回、フォントの指定をしているとしたら、どうだろう。

古い記事などを参照した時に、黒背景にフォントが埋もれて全然読めない…なんてことが、起こる。

 

でも、本来あるべき「マークアップで制御」してあれば、そういうことも起こらなくてすむ。

 

 

そういうことをカンタンに実装できるために、「テーマ」がある 

 …と、いうわけですよ。

自分で作れるスキルのある人、スキルはあるけど手間かけたくない人は、サービス側が提供しているテーマから好きなものを選んで、適用する。

だから、テーマ選びにあたっては、初期設定のヘッダ画像がキレイかとか、背景がカワイイかとか、そんなことよりも、

「見出しの書式」などの、マークアップされた部分がどのように見えるのか、というのを考えた方がいい。

ヘッダ画像などは、たいていのテーマはカンタンに入れ替えられるようにできてる。

 

 

 

 今回デザイン変えした理由は、そんなところ。

 

f:id:art-hiro-b:20160131195117j:plain

 

 

 

記事下に入れているこのバナー群も、モジュールにできるといろいろラクなんだけどねえ。

やろうと思えばできると思うけど、まあ、そこまではいいか~。

 

 

画集と大天使カードのご購入はバナーをクリック!別ウインドウで開きます。

緋呂画集 異界絵巻~神仏天使と神獣達 販売ページへ 画集販売ページへGO!

大天使スピリットカード 販売ページへ カード販売ページへGO!

こちらもよろしく!

あかり玉サイトへ あかり玉専用サイトへGO!

 

 

★外部サイトからも読者登録できます!→


掲載画像、文章他の転載はご遠慮ください。引用の際は出展元の明記をお願いします。