ブログで使える？　tag 辞典

スマートフォン対応 METAタグ viewport

昨今は各社ブログシステムにはスマートフォン用のテンプレートに対応しているところがほとんどになりました。

パソコンだけではなくスマートフォンでも見やすいページを自動で生成してくれる。
便利なものです。

大抵、テンプレをいじれるようになっていますので各自確認してみてくださいね。

そしてスマートフォンでも確認してみて好きなテンプレを当ててみたりするのも楽しいですね。

気に入ったデザインなんだけど表示をもう少しいじりたいと思った時に変更してみたい部分を説明します。

METAタグの viewport です。

実際には下記のように書いたりします。

<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

テンプレートの上部、METAタグ部分に name="viewport" がなければ追加してみましょう。

スマホでの画面サイズなどを指定できる項目となります。

content 部分で設定できます。

画面幅(width) width=device-width; これで画面に合わせて表示できます。
　もちろん400px; とすると400px固定のサイズになります。

初期のズーム値 initial-scale=1, これで１倍の倍率で表示されます。
　1.5や2、0.5とか指定できます。

最少・最大倍率（1～10倍まで指定可能）
　最少 minimum-scale=1, 最少１倍までということ。初期値は0.25
　最大 maximum-scale=1, 最大１倍までということ。初期値は1.6

拡縮設定 user-scalable=no こちらは拡大も縮小も許可しない設定。
　拡大と縮小を許可する場合は yes にする。※初期値はyes

これを組み合わせることによって幾分感じがかわるので好みの形を探してほしい。

ブログ記事に良く使う５　水平線

文章をちょっとしたところで区切る水平線を入れるコマンドがこれです。

<HR>

水平線をいれることができます。

<HR size=1>
　size=〇で指定してした高さで水平線を引けます。
　sizeの値を変えて色々見栄えを変えてみましょう＾＾

<HR color="#FF0000">
　color=#〇〇〇〇〇〇で色コードを指定すると色もつきます＾＾

<HR width=80%>
　width=〇% で全体のサイズからの割合で水平線をいれます。

ブログでは各テンプレートによって指定水平線の色や形もされていて思った指定ができないことも多々ありますので色々試してみてお好みの設定を探してみましょう。こんな感じでデザインを工夫して読みやすい記事を書くものいいものですよね＾＾

ブログ記事に良く使う４　段落分け

段落の指定といってもよくわからないかもしれませんが見てみたほうが早いでしょうね。

<ul>
<li>１項目目</li>
<li>２項目目</li>
<li>３項目目</li>
</ul>

↓表示例

１項目目
２項目目
３項目目

このように<ul></ul>で囲んだ範囲で<li></li>で指定した部分が箇条書きのようにされて表示されるので非常に見やすく使うことが可能です。

さらには・・・

<ol>
<li>１項目目</li>
<li>２項目目</li>
<li>３項目目</li>
</ol>

↓表示例

１項目目
２項目目
３項目目

上記のように<ul></ul>を<ol></ol>に変更することで数字で項目付けをすることも可能ですので使い分けするとよりわかりやすい表現も可能ですね。後拡張下さい＾＾
※実はこの機能、使ってるブログのテンプレートによっては表示位置がまちまちだったりするので使ってみて表示位置がずれたりしたらテンプレートのスタイルシート部分を変更しないとかっこわる～い事になっちゃうのでその場合は使用をあきらめるかがんばってテンプレをいじってみましょう(笑)

ブログ記事に良く使う３　文字と大きさや位置

ブログで文字のサイズを変更する時には各ブログ提供元により様々な機能が提供されているかと思いますがそれらのない場合には下記のようにすると楽に変更が可能です。

大きくて赤い文字

表示例↓

大きくて赤い文字

タグ内にsize=で＋や－を使用してサイズ調整をし、color=で色指定をすることが可能です。祭儀にで終わらせることで以後は通常の文字に変更されます。

次に表示させる位置についてですが、文字に限らず画像などにも適用されますので記事を書く際には非常に使用する頻度が高くなると思います。

中央に表示させます。
左寄せでの表示
右側によせれます。

表示例↓

中央に表示させます。

左寄せでの表示

右側によせれます。

で指定した範囲内でalign=〇〇〇で指定した表示方法が適用されるのでうまく使って好みのデザインにしあげちゃいましょう。

ブログ記事に良く使う２　画像を使う

こちらもブログを使用しているとそれなりのボタンなどがありますが前記のＡタグと同様、知っていることで変更などが安易にできますので覚えておきたいです。

ＩＭＧタグ：画像の表示に使用するタグ
<img ・・・・>　こちらは一つで画像を表示します。

<img src="画像のＵＲＬ" height="画像の縦幅" width="画像の横幅" alt="画像上にマウスがあるときに表示するテキスト" border="画像周りの枠線の太さ" align="画像の位置">

src 以外は省略可能です。

画像の縦幅、横幅については画像を縮小拡大するとき意外は使用しなくても原寸で表示されますがあると表示されるまでレイアウトが崩れなくて良いので指定しておくと良いかもです。

border は指定しないと枠線はつきませんがＡタグ内に配置してリンクを設定する場合には枠線が自動で追加されますので枠線が必要ない場合には border="0" を設定しておくとよいでしょう。

align については画像の配置に関する設定です。

指定がない場合には画像を表示した後に文字を打ち込むと下記のようになります。

文字が入るとこんなかんじで・・・
２行目はこちら。

右側を使わずすぐ改行する場合以外はちょっとレイアウトが好ましくないと思いますのでその場合には align=left を指定することで下記のようになります。

文字が入るとこんなかんじで・・・
２行目はこちら。

こちらを使用した場合には２行目以降で画像の下にする為には を使用する事によって画像の下まで改行をすることができます。これを使用することによってお好みのレイアウトで画像入りの記事を書ければブログを書くのに気合がはいりますね。

※画像に意味はありません。ＪＩＮ自身でもありません(笑)
適当な画像が無かったので落書きしてみただけです。いないとは思いますが、別所で公開しようとはしないでね。はづかしいから Σ(-д-)

ブログ記事に良く使う１リンクを貼る

ブログの記事を書くにあたり知っていると便利な物がこちら。

Ａタグ：リンクをつける時に使うタグ
<a ・・・・>　</a>と２つでセットになっています。

最初の<a ・・・・>でリンク先や開き方などを設定してそのリンクを</a>で閉じるまでに設定してしましますので</a>を記入しないと以後全部に指定したリンクを設定することになります。

<a href="リンク先のＵＲＬ" target="窓の開き方">
リンクする文字や画像などを記入していきます。
</a>

窓の開き方についてはそのリンクをクリックしたときにどういった開き方をするかを指定します。
別窓で開く　_blank　クリックすると別のウインドが開きます。
同じ窓内で開く　指定なし
ページ全体で開く　_top　グレー無ないなどでこの指定をしないと別サイトがフレーム内に表示されたりするので困りますがブログではフレームなどはあまりしようしないので使わないかと。

実際にはブログを使っているとそれを行う用のボタンなりなんなりがあると思いますがそれを使った後に位置をかえたりする時にこのタグをしっていればどこまでを移動したら良いかがわかりますので覚えておくと便利かも。

基本：全体の形

ホームページとして表示させるためには基本になる形があります。下のような形でしょうか。

～～～　ここから↓　～～～
<html><head>

</head>
<body>

</body>
</html>
～～～　ここまで↑　～～～

ＨＴＭＬの中身の各部品にあたる<HTML>や<body>などはタグと呼ばれています。それらの組み合わせでページ全体を作り上げます。

<HTML></HTML>のようにタグが２つでワンセットになっているものもありますのでそれらも覚えればそんなに難しいことはありません。

<HTML>と</HTML>はページの始まりと終わりを記しています。特になくても表示事態はできるのですがないと色々とデザインが崩れるものもあるようで。よっぽどの理由が無い限りいれとくにかぎります。

<head>から</head>の間にはページのタイトルとかページの説明などを書き込んだりする項目もありますがブログの場合にはよっぽど変化を求めないかぎりあまり考えなくていいでしょう。

<body>から</body>が実際に表示される本文の項目です。
実際には<body text=#FFFFFF bgcolor=#000000 link=#FF0000>のように始めの<body>にはページ全体の文字色などを変更させる効果もありますがブログでは全体的な色設定をスタイルシートと呼ばれる物で設定している物がほとんどなのであまり意識しなくてもよいかと・・・

実際にブログで良く使うという部分についてはアクセス解析用のタグを入れる場合にテンプレートから<body>を検索してそのすぐ下の行に解析用のタグを入れるといった作業ぐらいでしょうか。

結論：ブログでは全体を意識することは必要ないかもしれませんがブログのデザインをテンプレートから解析用タグをいれたりする他はデザインの細かな部分を修正する場合以外は必要ないかと。

基本準備は必要？

まずはホームページを作成するには何が必要なのかを説明します。作成には一般的にはＨＴＭＬ（ホームページの中身の文法でこれを使って色をつけたり大きさを変えたりする）を入力するためにメモ帳などのテキストエディタと呼ばれる物があれば始められるのですが完全にＨＴＭＬを覚えない事にはそれだけではページを作成するのは難しいと思います。※一般のホームページを位置から作成する場合。

マイクロソフト社のフロントページをはじめフリーでも各種のホームページ作成エディタがありますのでそれらを使用することにより効率よくページ作成をする事ができるのでそれらを使用することをおすすめします。

その場合でも中身のＨＴＭＬがある程度わかっていれば細かな部分の修正などを用意に行うことができるので基本的なことを覚えていければ一歩前進といったところです。

また、最近流行のブログを使えばＨＴＭＬを意識せずに記事作成ができるのでまずはそちらでなれていくことが上達の近道かと思います。

結論：まず準備としてブログをかりてみよう。何事も経験です。Σ(-д-

ご挨拶と自己紹介

始めまして。管理人のＪＩＮです。
普段はホームページ作成管理とＣＧＩの作成メンテなどを生業として
います。現在は新規の募集はしていませんが、暇な時間を見つけ
ここを更新していきたいと思っています。
本職なのですが基本が独学できている為、詳しく掘り下げると結構
わからない事だらけな気もしますが質問などありましたらコメントを
頂ければ可能な範囲でお答えさせて頂きます。

できるだけわかりやすい表現を心がけますがコメントを含め場合に
よっては記事を訂正しつつ書きなぐっていきたいと思います。

ブログで使える？ tag 辞典

スマートフォン対応 METAタグ viewport

ブログ記事に良く使う５ 水平線

ブログ記事に良く使う４ 段落分け

ブログ記事に良く使う３ 文字と大きさや位置

ブログ記事に良く使う２ 画像を使う

ブログ記事に良く使う１ リンクを貼る