HTMLタグ作成ツールの解説

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

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

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

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

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

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

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

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

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

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

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

ワオ!と言っているユーザー

×
  • ブログルメンバーの方は下記のページからログインをお願いいたします。
    ログイン
  • まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
    新規ユーザー登録へ

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

写真は大きくなります
投稿日 2010-10-30 09:28

ワオ!と言っているユーザー


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

写真は大きくなります
投稿日 2010-10-30 09:36

ワオ!と言っているユーザー


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

写真は大きくなります
投稿日 2010-10-30 09:50

ワオ!と言っているユーザー


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

ワオ!と言っているユーザー


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

ワオ!と言っているユーザー


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

写真は大きくなります

KUMAサラダ

KUMAサラダ

KUMAサラダ

KUMAサラダ

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

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

KUMAサラダ
KUMAサラダ
KUMAサラダ
KUMAサラダ
投稿日 2010-10-30 11:17

ワオ!と言っているユーザー


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

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

写真は大きくなります
投稿日 2010-10-30 11:53

ワオ!と言っているユーザー


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

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

※色やアンダーラインは別途装飾しました
写真は大きくなります
投稿日 2010-10-30 11:59

ワオ!と言っているユーザー