HTML・CSS講座

写真ブロガーのためのHTML入門 Vol.1

写真まみれをリニューアルするにあたって、いろいろなストックフォトブログや写真日記サイトを見て回りました。そこでみて思ったことが、

「あとちょっと工夫すれば、いいブログになるのにな~」

ということです。

というわけで、先輩写真ブロガーの方たちへ、ブログをよりよくするためのHTML講座を始めることにしました! ここで勉強して自分のブログをもっとよくしていっちゃいましょー。ブログを運営するにあたって、基本的なHTMLの使い方を紹介します!

aタグ(アンカータグ)

aタグとはテキストや画像ファイルにハイパーリンクを設定するために使うタグです。
基本的な使い方は以下の通り。

<a href="リンク先URL">ここに文字列</a>

です。このように書くことで、「ここに文字列」という個所でハイパーリンクの設定を行うことができます。さて、ここでちょっとしたコツを紹介します。リンクの文字列をクリックしたときに、ブラウザの別のタブや別のウィンドウでページで開くようにする指定ができます。それが、target="_blank" という指定です。これを踏まえて先ほどの例を書き換えると

<a href="リンク先URL" target="_blank">ここに文字</a>

となります。注意して欲しいのが、target指定の値は「_blank」です。「blank」ではないですよ! 最初のアンダーバーが肝です。こうすると新しいタブや新しいウィンドウでページを開くことができます。

imgタグ(イメージタグ)

imgタグは写真ブログでは肝となるブラウザ上に画像ファイルを表示させるためのタグです。このタグの使い方はこんな感じです。

<img src="画像ファイルのURL">

これで画像ファイルの表示ができるようになります。このタグにも先ほどのaタグと同じように、いろいろな属性を設定することができます。そのうちの1つがalt属性です。alt属性とは日本語では代替属性とも呼ばれていて、imgタグで設定した画像ファイルの代わりになるテキストを指定します。alt属性はこのように記述します。

<img src="画像ファイルのURL" alt="ペンギンの写真">

サンプルとしてペンギンの画像の例を取り上げたことにして、alt属性には「ペンギンの画像」と設定してみました。これは必ずこうしなくてはならないというものではありません。alt属性には自分の好きな文字列を設定することができます。このように画像ファイルに対してalt属性を指定すると、画像のファイルがサーバー上に存在しない場合、ブラウザ上にalt属性の文字列を代わりに表示してくれるブラウザなどもあります。また画像ファイルにalt属性を指定することでSEO対策にもなると言われていますね。

さて、今日はココまでとしておきます。
こんな感じでHTML講座を何回か連載していく予定です。どんどんレベルアップしていきますよ~。次の更新をお楽しみに。

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO対策・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:Webライティング実務士・ウェブ解析士・SEO検定1級・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA