･･･INDEX･･･

※クリックすると、選択した項目を開閉出来ます**

この「HTML便利裏技集について」

ヤプログの記事をHTMLで書く方法とコツ**

このページの「便利タグ」の使用方法

便利タグ集　※クリックするとタグのカテゴリーが出来ます

●基本タグ･･･HTMLの一番基本的なタグです☆
●テーブル(表)タグ･･･色々なデザインのテーブルです
●マーキータグ･･･記事の文章に動きをいれる事が出来ます
●その他･･･その他便利なタグがあります

ヤプログの記事を「HTML」で書く事は「めんどくさい」と思われるかもしれませんが、コツさえ掴めばかなり簡単です。そして、HTMLで記事を書く事でたくさんの利点もあります**

●テーブルタグなどを使うことで、見栄えの良い記事を作成することが出来る

●「1記事に5つの画像」というヤプログの規則を無視出来る

●マーキータグなどを使うことで、動きのあるページを作成する事も出来る

しかしΣ（ﾟдﾟlll）HTMLでのマイナス点もありますw
★ヤプログの記事には文字制限があるので、あまりたくさんのタグを入れると十分な記事が書けない
★改行タグを入れないと、文章が改行されない

でもあまり気にならない程度です**

こちらのページでは、見る側にとって見やすい記事にする為のお手伝いとして、毎回HTMLの記述をわざわざ書かなくてもいいように、使えるタグを掲載していきます**是非ともブックマーク(お気に入り)に入れて、お役に立てて下さい
(*´∇｀*)．・*．・：★’．・*．・：☆’．・*．・：★

×閉じる

☆★ヤプログの記事をHTMLで書く方法とコツ★☆

①「マイページ」から記事の投稿画面を出します。その画面の左上にある「HTMLで記事を書く」にチェックを入れます

②文字の装飾、絵文字などは通常と同様に使えます**但し、タグを入れないと文章の「改行」は自動的に行えません。下記図のように、プレビュー画面には一文で表示されてしまいます。また、HTMLの記述が反映されるので「<href="http～～">」や「<img src="～">」のような記述を文章として挿入することは出来ません。この記述を記載したい場合は文字コードに直す必要があります。※掲載タグ参照

③　2で説明した「改行」タグは<br>ですが、これを改行する毎に貼り付けるのはめんどうです。まずはプレビューを気にせず文章を書き、改行した文章の終わりに<br>を入れていけば、そんなにめんどうでもありません☆彡改行タグなど「貼り付け」を行う際は、キーボードの「Ctrl」+「V」で貼り付けられます。　※改行コードは掲載タグからコピー出来ます

×閉じる

☆★「便利タグの使い方★☆

①indexの「便利タグ集」から、タグのカテゴリーを選択します

②ページ下に選択されたタグ集が表示されるので、目的にあったタグのフォーム内をクリックします。

③フォームの中のタグが選択されるので「右クリック」で「コピー」します。
※コピーの際はキーボードの「Ctrl」+「C」を使うと便利です(*´∇｀*)

④コピーしたタグをヤプログの記事の中貼り付け、編集します**
※貼り付けの際はキーボードの「Ctrl」+「V」を使うと便利です(*´∇｀*)

⑤プレビュー画面に正しく表示されていればOKです(人´∀｀)

×閉じる

基本タグ集

※目的にあったタグを選択し、コピーしてお使い下さい**

改行タグ･･･文章を改行する際、必ずこのタグを入れます

画像挿入タグ･･･記事に画像を挿入する際に使います。このタグを使うと、5つ以上記事に画像を挿入する事も可能です
●普通に挿入する

●右側に文章を回り込みさせる

●左側に文章を回りこみさせる

編集箇所→「画像のURL」には、ヤプログなど別の記事にUPした画像のURLを入れます。「右クリック」→「プロパティ」で画像のURLは確認して下さい。

その他、文字の装飾(色や太さ)、リンクの指定などは従来通りの方法でヤプログの編集画面から指定できます**

「タグ形式の文字」を文章として記事載せる為のタグ･･･<A href="URL">など、タグ形式の文字をHTML記事に載せれば当然タグとして認識され文章にはなりません。文章として文字コードに変換する必要がありますので以下の方法で変換してお使いください**
①まず「メモ帳」に文章として載せたいタグを貼り付けます
例) <img src="画像のURL" border="0">

②メモ帳のメニューから「編集」→「置換」を選びます。以下フォームの「検索文字列」「置換後文字列」をそれぞれコピーして入力画面に貼り付けます。該当したもの全てを変換をして下さい。

検索文字列	→	置換後文字列
	→
	→
	→

例) <img src="画像のURL" border="0">

③変換が終了した文字を記事に挿入します。プレビュー画面で正しいタグ形式の文章になっているか確認して下さい**
×閉じる

テーブル(表)タグ

レイアウトコンテナ(DIV)のテーブルタグ･･･<table>タグに比べタグの文字数がとっても節約出来ます**一つの囲みだけ必要な場合はなるべくこちらを使ってください♪

☆好きなデザインのテーブルをその都度選んで使いたい☆
･･･左側白背景のフォームのタグを記事にコピーして使ってください*

☆ブログの記事全体に、いつも同じデザインのテーブルを統一して使用したい場合☆
･･･右側ピンク背景のフォームのタグをフリースキン編集「スタイルシート」の一番下に貼り付けます。フリースキンでない方は、サイドバーのHTML欄に(どこでも可)以下のタグを入れ、その中にピンク背景フォームのタグを挿入します。

<STYLE type="text/css">

</STYLE>

記事に入れるタグは下水色背景フォームのタグを毎回入れるだけでOKです**文字数の節約にもなります♪

幅→300px
囲み線→ff0080
フォント→12px

で設定してあります。

<DIV style="font-size : 12px;color : #000000;background-color : #ff80c0;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #ff0080 #ff0080 #ff0080 #ff0080;width : 300px;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #000000;
  background-color : #ff80c0;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #ff0080 #ff0080 #ff0080 #ff0080;
  width : 300px;}

上記と同サイズ(W=300px フォント=12px)でその他色々なデザイン別に掲載していきます。

ここに文章を書く

<DIV style="font-size : 12px;color : #009900;background-color : #c4ffc4;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-top-color : #80ff00;border-right-color : #80ff00;border-bottom-color : #80ff00;border-left-color : #80ff00;width : 300px;height : 100px;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #009900;
  background-color : #c4ffc4;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #80ff00 #80ff00 #80ff00 #80ff00;
  width : 300px;
}

ここに文章を書く

<DIV style="font-size : 12px;color : #0000ff;background-color : #a4d1ff;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-top-color : #0080ff;border-right-color : #0080ff;border-bottom-color : #0080ff;border-left-color : #0080ff;width : 300px;height : 100px;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #0000ff;
  background-color : #a4d1ff;border-top-width : 1px;border-right-width : 1px;border-bottom-width : 1px;border-left-width : 1px;border-top-style : solid;border-right-style : solid;border-bottom-style : solid;border-left-style : solid;border-color : #0080ff #0080ff #0080ff #0080ff;
  width : 300px;
}

ここに文章を書く

<DIV style="font-size : 12px;color : #fb7d00;background-color : #ffc2a6;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-top-color : #ff8040;border-right-color : #ff8040;border-bottom-color : #ff8040;border-left-color : #ff8040;width : 300px;height : 100px;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #fb7d00;
  background-color : #ffc2a6;border-top-width : 1px;border-right-width : 1px;border-bottom-width : 1px;border-left-width : 1px;border-top-style : solid;border-right-style : solid;border-bottom-style : solid;border-left-style : solid;border-color : #ff8040 #ff8040 #ff8040 #ff8040;
  width : 300px;
}

ここに文章を書く

<DIV style="font-size : 12px;background-color : #cccccc;border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-top-color : #666666;border-right-color : #666666;border-bottom-color : #666666;border-left-color : #666666;width : 300px;color : #000000;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  background-color : #cccccc;border-top-width : 1px;border-right-width : 1px;border-bottom-width : 1px;border-left-width : 1px;border-top-style : solid;border-right-style : solid;border-bottom-style : solid;border-left-style : solid;border-color : #666666 #666666 #666666 #666666;
  width : 300px;
  color : #000000;
}

ここに文章を書く

<DIV style="font-size : 12px;background-color : #ffb0d8;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-color : #ff0080 #ff0080 #ff0080 #ff0080;width : 300px;color : #000000;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  background-color : #ffb0d8;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-color : #ff0080 #ff0080 #ff0080 #ff0080;
  width : 300px;
  color : #000000;
}

ここに文章を書く

<DIV style="font-size : 12px;color : #009900;background-color : #c4ffc4;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-top-color : #80ff00;border-right-color : #80ff00;border-bottom-color : #80ff00;border-left-color : #80ff00;width : 300px;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #009900;
  background-color : #c4ffc4;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-color : #80ff00 #80ff00 #80ff00 #80ff00;
  width : 300px;
}

ここに文章を書く

<DIV style="font-size : 12px;color : #0000ff;background-color : #a4d1ff;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-top-color : #0080ff;border-right-color : #0080ff;border-bottom-color : #0080ff;border-left-color : #0080ff;width : 300px;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #0000ff;
  background-color : #a4d1ff;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-color : #0080ff #0080ff #0080ff #0080ff;
  width : 300px;
}

ここに文章を書く

<DIV style="font-size : 12px;color : #fb7d00;background-color : #ffc2a6;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-top-color : #ff8040;border-right-color : #ff8040;border-bottom-color : #ff8040;border-left-color : #ff8040;width : 300px;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #fb7d00;
  background-color : #ffc2a6;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-color : #ff8040 #ff8040 #ff8040 #ff8040;
  width : 300px;
}

ここに文章を書く

<DIV style="font-size : 12px;background-color : #cccccc;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-top-color : #666666;border-right-color : #666666;border-bottom-color : #666666;border-left-color : #666666;width : 300px;color : #000000;" align="left">ここに文章を書く</DIV>

.entry_aya{
  font-size : 12px;
  color : #000000;
  background-color : #cccccc;border-top-width : 2px;border-right-width : 2px;border-bottom-width : 2px;border-left-width : 2px;border-top-style : dotted;border-right-style : dotted;border-bottom-style : dotted;border-left-style : dotted;border-color : #666666 #666666 #666666 #666666;
  width : 300px;
}

×閉じる

マーキータグ

記事の文章を動かすことがことが出来るタグです。特に強調させたい文章など、面白い記事を作成されたい際に使ってみて下さい(*´∇｀*)

左にスクロール

ここに文章を書く

右にスクロール

ここに文章を書く

上にスクロール

ここに文章を書く

下にスクロール

ここに文章を書く

左右にスクロール

ここに文章を書く

上下にスクロール

ここに文章を書く

×閉じる