企業間取引・ＢｔｏＢサイト 滋賀SHIPSNETブログ

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

　
　HTMLタグとは、半角括弧→<>で囲まれた、ホームページやブログでさまざまな効果を加える記号の事です。
　これをうまく使う事によって、よりベージが見やすくなったり、他のサイトへのリンクする事もできます。
　ブログ自体の基本的な機能（テキスト入力やファイルのアップロード）が使えるようになったら、ワンランク上の記事作りを目指して使用してみましょう。

　以下はこのブログで使用できる、基本的で、できるだけ簡単で、かつ効果的なものを厳選して紹介します。

１　文字の大きさを変える
<font size=数字>文字</font>
数字の部分には１～７の数字が入ります。数字が大きくなるほど文字も大きくなります。
（例）
<font size=1>文字</font>と記述した場合以下のようになります。
文字
<font size=7>文字</font>の場合は以下のようになります。
文字

２　文字の色を変える
<font color=色>文字</font>
色の部分にはカラーコードや色の英語標記が入ります
（例）
<font color=red>文字</font>と標記した場合は以下のようになります。
文字
カラーコード表はこちら→http://www.finitojapan.com/cltable.html

その他文字装飾
太線
　<b>文字</b>

斜体
　<i>文字</i>

下線
　<u>文字</u>

３　画像を表示する
　このブログでは、「ファイルのアップロード」機能を使って、自動でタグを生成する事ができます。
方法についてはヘルプに詳しく書かれているのでご参照下さい。
あえて手書きのタグにすると
<img src="画像のアドレス">となります。
（例）
<img src="http://www.shipsnet.jp/blogshipsnet/logo_top.jpg">と記述すると以下のようになります。

まず最初はファイルのアップロード機能を使って画像を表示させるとことお勧めします。
ファイルのアップロード機能を使うと、
<a href="リンク先のアドレス（この場合は画像）"><img alt=画像の名前 src="画像のアドレス"></a>
となります。
基本的には同じなのですが、赤字の部分が追加されます。これは、何らかのトラブルで画像が表示されない場合や、マウスを画像に重ねたときに出てくる文字となります。そのままでも何の問題もありませんし、好きな名前に書き換えてもかまいません。また次で説明するリンクを作成するタグも自動的に付加されます。

４　リンクを作成する
<a href=リンク先のアドレス>文字や画像</a>
文字や画像の部分には、クリックする対象が入ります。リンク先のアドレスをそのまま書いてもよいですし、「こちら」、「クリック」などと書いて誘導してもよいと思います。また、画像をクリックする事によってリンク先に誘導する事もできます。
（例）
<a href="http://www.shipsnet.jp/">こちら</a>と記述すると以下のようになります。
こちら
<a href="http://www.shipsnet.jp/"><img src="http://www.shipsnet.jp/blogshipsnet/logo_top.jpg"></a>と記述すると以下のようになります。

上記は３の「画像を表示する」と４の「リンクを作成する」を組み合わせたタグといえます。

他にもタグの組み合わせとしては、
<u><font size=4 color=blue>組み合わせタグの例</font></u>
のように記述すると以下のようになります。
組み合わせタグの例

　上記のような基本的なタグをいくつか覚えるだけで、ブログはぐっと見やすくなります。まったくの初心者という方には少し難しく思えるかもしれませんが、覚える事はほんの少しですし、このページのタグをコピーして自分のブログに貼り付け、必要な部分を書き直せば機能するように書いてあります。
是非チャレンジしてみてください。

まとめ
１　文字の大きさを変える
<font size=数字>文字</font>
２　文字の色を変える
<font color=色>文字</font>
３　画像を表示する
<img src="画像のアドレス">
４　リンクを作成する
<a href="リンク先のアドレス">文字や画像</a>

↑のタグをコピーして必要な部分を書き直してお使い下さい。

※当ブログでは、太字・イタリック・アンダーライン・リンクの挿入・メールアドレスの挿入・引用タグについては、編集画面上部のボタンで自動付加することができます。上記の内容を理解して使えば、より効果的に使えると思います。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

前回は基本的な４つのタグについて説明しましたが、これからは１回に１つのペースで簡単なタグを紹介していきます。

～横線タグ～

これはごく簡単で、かつブログを見やすくするのに非常に役立つタグです。
書き方は、

<hr>

これだけです。

このような横線が引かれます。↓

たったこれだけです。
タグの中でも一番簡単な部類に入ります。是非使ってみましょう。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

～センタリング・右詰め・左詰め～

ブログの記事をワープロ感覚で操作できたら便利だと思いませんか？
文字の配置（センタリング等）はワープロソフトの機能の中でもよく使われる部類に入ります。
これをブログでもやってみましょう。

センタリング（中央寄せ）
<div align=center>文字</div>
と入力するとこうなります。

簡単ですね。タグをコピーして貼り付けて、「文字」の部分を自分名好きな文章に書き換えるだけです。

同様に右詰め、左詰めについても以下のとおりです。

右詰め
<div align=right>文字</div>
と入力するとこうなります。

左詰め
<div align=left>文字</div>と入力するとこうなります。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

さて、ようこそ　ＳＨＩＰＳＮＥＴブログへ

　見ていただければお解かりのように、文字が左から右へ流れいています。電光掲示板のようですね。
これはマーキータグと呼ばれるタグを使用するとできる特殊効果です。見た目のインパクトはかなり高い方でしょう。
　しかしながら、使いすぎるとページの処理が重くなったり、単に「くどい」ページになり、逆に読みにくくなる危険性を孕んだタグであるともいえます。
　ここ一番、目立たせたい場所にピンポイントで使うのが望ましいでしょう。
書き方は
<marquee>文字</marquee>
となります。実際は↓の様に表示されます。
文字

簡単ですね。

応用例としてはさまざまなものがありますが、これもまた基本的なもののみ紹介します。
（応用例）
・流れる文字の幅を指定する
<marquee width="200">文字</marquee>
実際は下記のように表示されます。
文字

・流れる文字の方向を変える
<marquee direction="right">文字</marquee>
実際は下記のように表示されます。
文字

・流れる文字の背景の色を変える
<marquee bgcolor="色名、または色コード">文字</marquee>
背景を赤（記述はred）とすると下記のように表示されます。
文字

・文字のかわりに画像を流す
<marquee><img src="http://www.shipsnet.jp/blogshipsnet/shoko.jpg"></marquee>
実際は下記のように表示されます。

　タグの記述が長くなると複雑に見えますが、よく見てみれば簡単なタグの組み合わせであることがわかりますね。
　よくわからないうちは、無理せず簡単なタグを少しだけ使い、目立たせたい場所を絞って効果的に使うと良いと思います。何でもかんでも使いすぎると、かえって見る人が、どこに注目してよいかわからないページになってしまうので気をつけましょう。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

今回はテーブルタグについて書きたいと思います。
テーブルタグってなんだ？と思われる方も多いかと思いますのでまずはどんなものか見ていただく事にします。
こんなの↓です。

この場合３×３の枠が付き、中に数字が入っています。
このように、枠を付けるタグをテーブルタグといいます。

では基本的なものから書いていきましょう。
上記は３×３のテーブルですが１×１（枠が１つのみ）のテーブルがもっとも基本的な形となります。
書き方は、
<table border><tr><td>

ここに文字や写真など

</ｔｄ></tr></table>
となります。
実際にブラウザで見ると↓の様になります。

ではこれを３×３のテーブルにしてみましょう。
書き方は、

<table border><tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
<tr><td> 4 </td><td> 5 </td><td> 6 </td></tr>
<tr><td> 7 </td><td> 8 </td><td> 9 </td></tr></table>
このように記述すると↓のようになります。

ここではどの部分がどこに対応しているかわかりやすくするために数字を入れましたが、文章や画像などを入れる事ができますので試してみてください。

（例）

名前	サイズ	見た目
商工会ロゴ	2096バイト
ＳＨＩＰＳＮＥＴロゴ	17716バイト

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

今回は縦書きタグについて書いてみたいと思います。
これも書き方は簡単。
<div style="writing-mode:tb-rl;"&縦書き文字</div>
これだけです。見た目は↓のようになります。

新年の挨拶もこのように縦書きにすると雰囲気が出ますね。

当然の事ながら、縦書きの場合改行すると文字は左へ移動します。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

今回は改行タグです。
書き方は、
<ｂｒ>
これだけです。その位置で改行されます。

　このブログでは編集時にＥｎｔｅｒキーで改行した場合も、ブログに改行として反映される機能（改行機能）が付いており、あまり必要性を感じないと思われるかもしれませんが、徐々に慣れてきて長いタグがかけるようになってくると、改行機能をＯＦＦにしてタグで改行したほうがレイアウトしやすい場合もあります。
　また、改行機能と改行タグは併用できますので、改行機能だけでは自分の思い描いたとおりにレイアウトできなかったときなど、場合により使い分けましょう。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

今回はタグそのものではなく、タグを書く際の注意点について書きたいと思います。

１、タグ内の記述・スペースは半角。
　まず一番多い失敗がこれです。タグを　コピー→貼り付け　した後に必要な部分を書き換える際に、半角スペースを全角にしてしまうというのはよくある話です。

２、表示するファイル（画像など）は自分でアップロードしたものを使いましょう。
　これは失敗というよりはマナー違反に属する事ですが、画像のＵＲＬなどを他のサイトから直接コピーしてくる行為（いわゆる直リンク）は、やってはいけません。たとえそれが著作権フリーの画像等だとしても、一度ダウンロードしてから再度自分でファイルをアップロードして使いましょう。

３、タグは小文字で書きましょう。
　結論から言えば現在は大文字でも小文字でも動作はします。しかしこれから主流となっていくであろうＸＨＴＭＬでは、タグは小文字で書く事が標準となっていますので、小文字で書く癖をつけましょう。
　何のことだかわからないという人も「大文字でもいいが、小文字のほうがより良い」と思っていれば間違いないと思います。
　ちなみにこのＳＨＩＰＳＮＥＴもＸＨＴＭＬで書かれていますので、ここで紹介するタグは小文字で統一していきたいと思います。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

　ご存知のとおりこのブログは工業系ＢｔｏＢサイトのブログです。当然内容に特殊な記号などを書く事もあるでしょう。そこで今回は下付き文字・上付き文字の書き方を紹介します。
　まずはこちらを見てください。

H₂O
10²

水の化学式と１０の２乗です。

H₂Oの書き方は簡単。２つのタグを組み合わせます。
下付きタグ<sub>と、文字を小さくする<small>タグです

H_{<small>2</small>}O

10²は上付きタグ<sup>を使います。
10^{<small>2</small>}

　ＨＴＭＬタグの基本は<タグ>文字や写真など</タグ>のように開始タグ<タグ>と終了タグ</タグ>で対象を挟み込むことです。それを組み合わせる事によっていろいろな表現が可能です。普通のwebページとは違い、ブログは使用できるタグに制限があるので、いろいろ試してみる事が大事ですね。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

今回はスタイルシートで文字の大きさを変えてみたいと思います。
<font>タグを使用すると1～7の大きさになりますが、スタイルシートを使えばもっと柔軟に文字の大きさを変化させる事ができます。
まずは見ていただきましょう。

次はこちら・・

はい。でかすぎますね。もっと大きくできますが、それは自分で試してみてください。
では本題の記述の仕方についてです。
<div style="font-size:数字pt;">文字</div>

このままコピーして使ってください。数字の部分と文字の部分をお好みで書き直してください。ちなみに見えないほど小さいのが1ｐｔ、大きすぎるのが300ｐｔです。
タグ中の<div>は<span>に置き換える事ができます。違いは、<div>には記述した時点で改行が自動で入りますが<span>には入りません。それだけの違いです。
タグ中に:や;など見落としやすい記号が入っているので間違って消さないように気をつけてください。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。

こちらは滋賀県商工会連合会が運営する 滋賀 ＳＨＩＰＳ ＮＥＴ のブログです。
滋賀県の優良企業集合体　滋賀 ＳＨＩＰＳ ＮＥＴ はこちら。
このブログのトップページはこちら。

↓以下本文です。↓

　今回はリンクの文字の色を変えてみます。通常リンクタグを使うとこのような色になりますね。

リンク先

記述はこうでした。

<a href="http://www.shipsnet.jp/">リンク先</a>

この”リンク先”という文字の色を変えるには、タグかもしくはスタイルシートで文字自体を指定しなおす必要があります。

１、フォントタグで指定

リンク先

記述は以下のとおり。

<a href="http://www.shipsnet.jp/"><font color=red>リンク先</font></a>

２、スタイルシートで指定

マウスのポインタを重ねた時に背景の色が変化するように指定しました。

リンク文字

記述は以下のとおり。

<a href="http://www.shipsnet.jp/"><span style="color:red;　background:white"onmouseover= "style.background='blue'"onmouseout= "style.background='white'">リンク文字</span></a>

どちらも文字への指定がリンクタグの内側に埋め込まれている事にご注意下さい。これを逆にしてしまうとうまく表示されません。このままコピーして必要な部分を書き直して使用してください。

※ここで言う「ブログ」とは当ブログ（ＭＯＶＡＢＬＥ ＴＹＰＥ）の事を指し、それ以外のシステムでは動作しない場合がありますのでご注意下さい。