HTMLタグ作成ツールの解説

10月

30日,

2010年

HTMLタグ作成ツールの解説

0 tweet

丸さんにお約束したHTMLタグの簡易作成ツールの紹介です。
順次コメント欄に解説を追加してして行きますので、根気よく
見てやってください。

以後、HTMLタグはTAGと表記します

使用方法：
Bloguruの投稿画面では殆どのTAGが使えます。

TAGとは？とのご質問の方に・・・・
Googleで調べてくださいね

BloguruでのTAGは
１：文字の装飾　色、大きさ、フォント等
２：ハイパーリンク、つまり他のページにジャンプするためのリンクを張る
が90％以上の用途と思われます。（写真の表示もこれに該当します）
※現時点Bloguru では一枚の写真しか表示出来ません

これらを行うには、TAG文を投稿する必要がありますが、TAG文の多くは
開始と終了の部分があり、さらにこれが入れ子（TAGの中にTAG）状態
になると、手入力では？？？？？となったりして、結果
「なんだかへーん」「画面が崩れちゃう」「画面が壊れる、Bloguruなんて、サイテー」
となってしまいます、これはBloguruが多くのTAGの使用を許しているからでなのです。
「壊れてしまうからサイテー」なのは使う方に問題がありますと断言します。
※スキンによってFREEスペースのTAGが投稿に影響しているケースがありますが

投稿だけではなく、FREEスペースの内容にもこのTAGが使えます、だだし正しい
使い方が必要です。

このツールは「テキスト文」を装飾やリンク設定することで、TAGを自動作成する
機能があります。

取り敢えず、写真の赤い矢印の部分「HTML作成」をクリックしてみてください。

※写真ではありませんよ、私のページの自己紹介のコーナーです（笑）
http://www.vegasystems.com/bloguru/demo/demo.php

以下はコメント欄に・・・・・・
写真は大きくなります

#ブログ

Eメール

KUMA

このような画面が現れるはずです。
毎回、お前のニヤけた顔などみたく無い方は、ブックマークをしておきましょう。
このツールは我が社のServerで稼働しています・・・・
※このツールはGoogleのように、内容をチェックしてデータベースに貯めこむなどの仕掛けは一切ありません、そんな技術は無いから安心してください。

写真は大きくなります

投稿日 2010-10-30 09:28

KUMA

赤丸部分、Designタグ確認して、適当な文字を入力します。
マウスで赤矢印の部分のアイコンを順次などってみてください、機能が吹き出しで表示されるはずです。

写真は大きくなります

投稿日 2010-10-30 09:36

KUMA

文字の編集のなかで、コピー＆ペースト等はアイコンがありません、選択して右クリックしてください。
または、矢印のブラウザの機能を使ってください。

写真は大きくなります

投稿日 2010-10-30 09:50

せんべい

実はこのブログを始めたとき、KUMAさんの変換サイトにお世話になりました。遅くなりましたがありがとうございます。

投稿日 2010-10-30 09:56

KUMA

ご利用いただきありがとうございます、やっと解説のための重い腰をあげました・・・・

投稿日 2010-10-30 19:01

KUMA

文字を修飾したら、右下赤丸のHTMLタグをクリックします。
すると、画面にはTAGに変換されたコードとなります。
これを、Bloguruに貼りつけてます。

写真は大きくなります

KUMAサラダ

KUMAサラダ

KUMAサラダ

KUMAサラダ

ところが、実際に貼り付けると、こんなふうに行間が空いてしまいます、これは改行TAG（赤い矢印）が効いてBloguruが改行してくれるからです、貼りつけた後に改行部分を取り除けけば、以下のようになります。
KUMAサラダ
KUMAサラダ
KUMAサラダ
KUMAサラダ

色を変えることも出来ます。

KUMAサラダ
KUMAサラダ
KUMAサラダ
KUMAサラダ

投稿日 2010-10-30 11:17

KUMA

次はハイパーリンクです。
リンクの考え方は、文字の部分を選択した状態で「ハイパーリンク」のアイコンをクリックして開始し、リンク先等の要素を入力して完成させます。
実際には、
文字を入力し（例はLANケーブルの作り方）
これを選択（反転）
後は(1)から順次入力してOKで出来があがります。

これも文字修飾と同様にHTMLタグをクリックします。

写真は大きくなります

投稿日 2010-10-30 11:53

KUMA

ハイパーリンクのTAGはびっくりするほど沢山出現します、これをコピーしてBloguruに貼りつけます。

 LANケーブルの作り方
マウスの矢印をリンクのある文字に近づけると、URLではなく指定した「SANWA」の文字が現れます。

※色やアンダーラインは別途装飾しました
写真は大きくなります

投稿日 2010-10-30 11:59

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

LAN-PRO

フリースペース