Oct
29,
2010

HTMLタグ作成ツールの解説

0 tweet
HTMLタグ作成ツールの解説
丸さんにお約束した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

以下はコメント欄に・・・・・・
写真は大きくなります
#ブログ
Share

People Who Wowed This Post

×
  • If you are a bloguru member, please login.
    Login
  • If you are not a bloguru member, you may request a free account here:
    Request Account
KUMA
KUMA 
このような画面が現れるはずです。
毎回、お前のニヤけた顔などみたく無い方は、ブックマークをしておきましょう。
このツールは我が社のServerで稼働しています・・・・
※このツールはGoogleのように、内容をチェックしてデータベースに貯めこむなどの仕掛けは一切ありません、そんな技術は無いから安心してください。

写真は大きくなります
Posted at 2010-10-29 17:28

People Who Wowed This Post

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

写真は大きくなります
Posted at 2010-10-29 17:36

People Who Wowed This Post

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

写真は大きくなります
Posted at 2010-10-29 17:50

People Who Wowed This Post

せんべい
せんべい 
実はこのブログを始めたとき、KUMAさんの変換サイトにお世話になりました。遅くなりましたがありがとうございます。
Posted at 2010-10-29 17:56

People Who Wowed This Post

KUMA
KUMA 
ご利用いただきありがとうございます、やっと解説のための重い腰をあげました・・・・
Posted at 2010-10-30 03:01

People Who Wowed This Post

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

写真は大きくなります

KUMAサラダ

KUMAサラダ

KUMAサラダ

KUMAサラダ

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

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

KUMAサラダ
KUMAサラダ
KUMAサラダ
KUMAサラダ
Posted at 2010-10-29 19:17

People Who Wowed This Post

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

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

写真は大きくなります
Posted at 2010-10-29 19:53

People Who Wowed This Post

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

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

※色やアンダーラインは別途装飾しました
写真は大きくなります
Posted at 2010-10-29 19:59

People Who Wowed This Post