Let's have a hobby!

多趣味な管理人が綴る雑記趣味ブログ   ~趣味を持とう!~

テンプレート
え?趣味が多い?そんなの関係な~い!人生、楽しく送らなきゃ。
せっかく与えられた 「人生」という名の時間 を自分の思うままに使って何が悪い!

~Enjoy your life!~


貴方は、 人目くらいの訪問者です。

【はてブロ限定!】すぐに役立つHTML 基本編

前回の記事はコチラ↓

www.kasyainu.com


 

前回は、長ったらしい前書きを行いました。

今回から、いよいよ本題です。

前書き編」「基本編」「簡単&便利編」「できれば使いたい編」「使わない?編の2つ目。

「基本編」です。

 

基本編では、「見たまま編集でやってはいけないこと」を紹介します。

HTMLとかよくわからないけど、ブログを良くしたい!って方は、コレだけでもいじっとく事をオススメします。

 

 

 「見たまま編集」でやってはいけないこと

コピー&ペースト

パソコンの代名詞とも言える(おおげさ?)この機能。コピペです。

「見たまま編集」では、やらないようにしましょう。

編集ページ内でも、外から引っ張ってくるのもNGです。

 

実験

どうなるか、やってみますね。

まずはこちら。

見たまま編集画面HTML編集画面

 

あいうえお

 

 

<p>あいうえお</p>

 

 

これを2行下に「見たまま編集」でコピペすると…?

見たまま編集画面HTML編集画面

あいうえお

 

あいうえお

<p>あいうえお</p>

<p>・</p>

<p><span style="color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">あいうえお</span></p>

!?

色々増えましたね!

「文字色」「フォント」「サイズ」など、ありとあらゆるデフォルトの情報が張り付けられています。

これらは、全く必要ありません。あっても無くても表示は同じです

spanタグでいろんなモノが加わっているので、消しちゃいましょう。

 

コピペしたい場合は、HTMLへのコピーがオススメ。

純粋な文字しか張り付きません。

 

画像貼り付けっぱなし

本当は、画像をリサイズしてるかどうかが最重要項目なのですが、それは今回は考えません。

「見たまま編集」の強みは、なんと言っても画像張り付けです!

 

...しかし、これもよろしくない(´・ω・`)

張り付けた画像のHTML部分を見てみると、こんな感じです。

見たまま編集画面HTML編集画面

 

ソファーであくびをする猫

<p><img class="hatena-fotolife" title="fid:regitimate:2016061218020:plain"

src="ttp://cdn-ak.f.st-hatena.com/images/fotolife/r/regitimate/20160612/20160612180207.jpg" alt="fid:regitimate:2016061218020:plain" /></p>

HTMLに省略の変更を加えています。

意味は以下の通りです。

  1. 「<img src="〇〇" />」イメージタグ
    画像を貼り付けます。〇〇には、画像のURLを貼り付けます。
    はてなブログの場合は「はてなフォトライフ」に投稿され、そこから引っ張ってくる仕組みになっています。
  2. 「class=”〇〇”」クラス属性
    CSS(htmlにデザインを加えるためのファイル)で指定したデザイン情報を読み込みます。
  3. 「title=”〇〇”」タイトル属性
    画像のタイトル。画像にカーソルを乗せた際に表示される説明文です。
  4. 「alt="〇〇"」オルト属性
    画像の代替テキスト。エンジンの検索にも反映されます。音声ブラウザでは読み上げられます。

 

問題なのはタイトル属性オルト属性です。

title属性

画像のタイトルですよ!説明文ですよ!

デフォルトの数字の羅列では、意味がありません。

 

でも、これ要りますか?

下の猫の画像に、カーソル乗せてみてください…

※スマートフォンからのアクセスの方は出来ません。

身構える猫(モノクロ)

...これ、要ります?

 

あるいはこんな感じ?

路上で爆睡する猫

…これ要ります?

 

カーソル合わせるとポップアップ表示って…

 

見りゃ、分かるでしょう!

 

説明したかったら、本文に書きますから!

見られないかもしれないトコロに説明を入れるような真似はしません。

ってことで、この部分は削除

 

alt属性

代替テキスト。デフォルトだと、なんと文字の羅列です…

f:id:regitimate:20160612184035j:plain

全く訳が分からない。

 

画像が表示できない際に表示して、どんな画像があったのかくらいは分かります。

代替テキスト

さらには、検索にも引っ掛けられます。それがデフォルトのままは、あまりにももったいない

ってことで、この部分は修正

 

注意

入力内容が記事内での重複はあまりしないようにしましょう。キーワードの詰め込みと判断され、検索に引っ掛かりにくくなります。文章チックになってもいいので、重複は避ける努力をしましょう。

 

まとめ

  • コピペは余計な情報もコピーする。要らないものは削除!
  • 純粋な文字だけコピペしたければ、HTMLへ!
  • 画像のtitleタグは削除!
  • 画像のaltタグはしっかり修正!

 

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 
いきなりできます! 最新ホームページ作り&HTML超入門 第3版

いきなりできます! 最新ホームページ作り&HTML超入門 第3版

 

 

次回は簡単&便利編

見たまま編集では出来ない、使えるHTMLをご紹介。

様々な場面で使えるHTML、「中央揃え、右寄せ、左寄せ」「線」「表の作成」「ページ内リンク」の4つを見ていきます。

 


次の記事はコチラ↓

www.kasyainu.com



Copyright (C) 2012-2017 Let's have a hobby! All Rights Reserved.