トップページ > カテゴリー [記事を書くのに便利なもの ]







 スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 




[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-) | 編集

 お小遣いブログで使える表の作り方【テーブルタグまとめ】

私自身の覚書のためにも、表を作るときに必要なテーブルタグを一覧にしておきます。


表作りで迷ったら、これを見て思い出してください(*´∀`*)


基本のタグ
<table>表全体を指定します。
ここで色などのタグを指定すると、表全体に適用されます。
<tr>1つの行を指定します。
ここで色などのタグを指定すると、1行全てに適用されます。
<table>~</table> の中に行の数だけ <tr>~</tr> が置かれます。
<td>1つのセルを指定します。
<tr>~</tr> の中に列の数だけ <td>~</td> が置かれます。
表の大きさ・位置を変えるためのタグ
<width="数字">セルの横幅を指定します。
% でも指定することができます。(表の幅に対する比率)
<height="数字" >セルの高さを指定します。
% でも指定することができます。(表の幅に対する比率)
<align="○○">セルの中の文字の配置を変えます。
left、center、right を指定します。(指定しなければ左揃えになります)
<valign="○○">セルの中の文字の縦位置を変えます。
top(最上段)、middle(中)、bottom(下)、baseline(最下段)
を指定します。
<cellpadding="数字">セルの枠とセル内の文字の間隔を変えます。
<cellspacing="数字">セルとセルの間隔を変えます。
<rowspan="数字">数字の数だけセルを縦に結合します。
<colspan="数字">数字の数だけセルを横に結合します。
表を装飾するためのタグ
<border="数字>表の外枠線の太さを指定します。
数字が大きいほど表が立体的になります。
<bgcolor="カラーコード">テーブルやセルの背景に色をつけます。
<bordercolor="カラーコード" >外枠線の色を指定します。
<background="画像のURL">背景を画像にしたいときに、画像のURLを指定します。
<style="border:"~">枠線を好きな線の種類に変える事ができます。
実線(solid)、点線(dotted)、破線(dashed)、二重線(double)
などが選べます。




スポンサーサイト


↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 




 お小遣いブログで使える表の作り方【表の大きさ・形を変える】

これまで、

表の作り方の基本 表の作り方の基本
枠の色の付け方 枠に色をつける方法
表に色をつける方法 表に色をつける方法

について書いたので、今回は表の大きさ・形を変える方法をご紹介したいと思います。

大きさを変えられるようになれば、色んな表がつくれるようになると思います(*´∀`*)



基本のテーブルタグはこうでした。


テーブルタグの基本


<table border>
<tr>
<td>テーブルタグの基本</td>
</tr>
</table>






枠の幅を横に伸ばしてみます。


枠を横に伸ばす


<table border width="350">
<tr>
<td>枠を横に伸ばす</td>
</tr>
</table>


boederの後にwidth="数字"を入れると横幅が指定した長さに伸びます。





次は縦に伸ばしてみます。


枠を縦に伸ばす


<table border height="200">
<tr>
<td>枠を縦に伸ばす</td>
</tr>
</table>


borderの後にheight="数字"を入れると縦幅が指定した長さに伸びます。





枠の中の文字の位置を変えてみます。


枠の真ん中に文字枠の真ん中に文字
右寄せ左寄せ


<table border width="400">
<tr align=center>
<td>枠の真ん中に文字</td>
<td>枠の真ん中に文字</td>
</tr>
<tr>
<td align=right>右寄せ</td>
<td align=left>左寄せ</td>
</tr>
</table>


align=center
で文字を枠の真ん中に、align=rightで右寄せ、align=leftで左寄せにできます。

trの後ろに入れると横1列全部が同じ位置に、tdの後ろに入れると1つの枠ごとに位置を決める事ができます。





次にセルを結合させる方法です。


これが基本の表です。




<table border width="350">
<tr>
<td>①</td>
<td>②</td>
<td>③</td>
</tr>
<tr>
<td>④</td>
<td>⑤</td>
<td>⑥</td>
</tr>
<tr>
<td>⑦</td>
<td>⑧</td>
<td>⑨</td>
</tr>
</table>






①、④、⑦を縦に結合します。




<table border width="350">
<tr>
<td rowspan="3">①</td>
<td>②</td>
<td>③</td>
</tr>
<tr>
<td>⑤</td>
<td>⑥</td>
</tr>
<tr>
<td>⑧</td>
<td>⑨</td>
</tr>
</table>


tdの後にrowspan="数字"を入れると、数字の数だけ縦のセルがつながります。

ここでは3を入れたので、3つのセルがつながりました。





次は①と②を横に結合します。




<table border width="350">
<tr>
<td colspan="2">①</td>
<td>③</td>
</tr>
<tr>
<td>④</td>
<td>⑤</td>
<td>⑥</td>
</tr>
<tr>
<td>⑦</td>
<td>⑧</td>
<td>⑨</td>
</tr>
</table>


tdの後にcolspan="数字"を入れると、数字の数だけ横のセルがつながります。

ここでは2を入れたので、2つのセルがつながりました。





今までのアレンジ方法を使えばお小遣いサイト紹介用のような、タイトルつきの表も作ることができます(*´∀`*)


タイトル
①-①①-②
②-①②-②
③-①③-②


<table border width="350" bgcolor="#ffcccc">
<tr>
<td bgcolor="#fff7f0" colspan="2" align="center">タイトル</td>
</tr>
<tr>
<td bgcolor="#ffffff">①-①</td>
<td bgcolor="#ffffff">①-②</td>
</tr>
<tr>
<td bgcolor="#ffffff">②-①</td>
<td bgcolor="#ffffff">②-②</td>
</tr>
<tr>
<td bgcolor="#ffffff">③-①</td>
<td bgcolor="#ffffff">③-②</td>
</tr>
</table>



次回は、表を作るときに便利なテーブルタグを一覧にしてご紹介したいと思います。

テーブルタグのまとめ テーブルタグのまとめ
お小遣いサイト紹介用の表のサンプル お小遣いサイト紹介用の表のサンプル






↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 




 お小遣いブログで使える表の作り方【表に色をつける②】

これまで、

表の作り方の基本 表の作り方の基本
枠の色の付け方 枠の色のつけ方

について書いたので、今回は枠を増やして表全体に色をつける方法をご紹介したいと思います。

これが出来るようになると、バリエーションが増えて、表作りが楽しくなると思いますよ(*´∀`*)


一から表を作るのが面倒くさい~!という方は、自動で表を作成してくれる便利なサイトもあります♪

→ タグインデックス(テーブルタグ作成ツール)


自分で表の飾り付けも楽しみたい!という方は、一緒に勉強しましょう(´・ω・`)

仕組みが分かってくると、意外と簡単に作れますよ♪




まず、基本的な表の作りはこんな感じでした。

基本基本
基本基本

<table border>
<tr>
<td>基本</td>
<td>基本</td>
</tr>
<tr>
<td>基本</td>
<td>基本</td>
</tr>
</table>




では、色をつけます。

この枠のみ色付け外枠と同じ色になる
この行に色付けこの行に色付け

<table border bgcolor="#e699b3">
<tr>
<td bgcolor="#b3ffff">この枠のみ色付け</td>
<td>外枠と同じ色になる</td>
</tr>
<tr bgcolor="#e6ff80">
<td>この行に色付け</td>
<td>この行に色付け</td>
</tr>
</table>


tdの後ろにbgcolor="カラーコード"を入れると、そのセルの中にだけ色が付きます。

trの後ろにbgcolor="カラーコード"を入れると、その横1列のセル全てに色が付きます。

borderの後ろにbgcolor="カラーコード"を入れると、外枠と色を指定していなかった右上のセルに色が付きます。



初めは覚えるのが難しいかもしれませんが、


<table>に色を指定 → 全体に色が付く

<td>に色を指定   → そのセルのみに色が付く

<tr>に色を指定    → その横1列に色が付く

<tr>と<td>は指定しなければ、<table>の色が優先してつけられる



ということを覚えておけば、色々なアレンジができると思います♪


次は、表の大きさ・位置を変える方法をご紹介します。

表の大きさ・形を変える方法 表の大きさ・形を変える方法
テーブルタグのまとめ テーブルタグのまとめ
お小遣いサイト紹介用の表のサンプル お小遣いサイト紹介用の表のサンプル





↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 




 お小遣いブログで使える表の作り方【表に色をつける①】


お小遣いブログで表を使うために、前回は表の作り方の基本を書いたので、

今回は、表に色をつける方法をご紹介したいと思います♪


一から表を作るのが面倒くさい~!という方は、お小遣いサイト紹介用の表のサンプルもあるので、ご自由に使ってください(*´∀`*) → こちら



これが基本のタグでした。

基本のテーブルタグ

<table border>
<tr>
<td>基本のテーブルタグ</td>
</tr>
</table>





外枠を太くしてみます。
外枠を太くする

<table border cellspacing="5">
<tr>
<td>外枠を太くする</td>
</tr>
</table>

borderの後にcellspacing=”数字”を入れると外枠が太くなります。
数字が大きいほど、太くなります。




外枠を立体的にしてみます。

外枠を立体的にする

<table border="5">
<tr>
<td>外枠を立体的にする</td>
</tr>
</table>

 border="数字"をいれると外枠が立体的になります。
数字が大きいほど、太くなります。





次は、枠全体に色をつけてみます。

枠全体に色をつける

<table border bgcolor="#ffcccc">
<tr>
<td>枠全体に色をつける</td>
</tr>
</table>

borderの後にbgcolor="カラーコード”を入れると枠全体に色がつきます。

好きなカラーを探せるサイトは色々ありますが、私はいつも「Mariのいろえんぴつ」さんのいろずかんを参考にさせていただいてます♪




枠の中、外枠、それぞれに色をつけてみます。

それぞれに色をつける

<table border bgcolor="#ff80cc">
<tr>
<td bgcolor="#ffcccc">それぞれに色をつける</td>
</tr>
</table>

borderの後のbgcolor="カラーコード”が外枠の色、tdの後のbgcolor="カラーコード”が枠の中の色です。




外枠を二重線にしてみます。

外枠を二重線にする

<table border bordercolor="#0099e6">
<tr>
<td>外枠を二重線にする</td>
</tr>
</table>

borderの後にbordercolor="カラーコード"を入れると、外枠が二重線になり色もつきます。




そこに色もつけてみます。

二重線の間と枠内に色をつける

<table border bordercolor="#0099e6" bgcolor="#b399cc" >
<tr>
<td bgcolor="#b3ffe6">二重線の間と枠内に色をつける</td>
</tr>
</table>

bordercolorの後にbgcolor="カラーコード"を入れると、二重線の間に色がつきます。
tdの後にbgcolor="カラーコード"を入れると、枠内に色がつきます。

tdの後にもbgcolor="カラーコード"を入れないと、枠内も線の間と同じ色になってしまいます。




これで枠に色をつける方法が分かったと思います(´∀`*)


次のステップに進みましょう!

表に色をつける方法 表に色をつける方法
表の大きさ・形を変える方法 表の大きさ・形を変える方法
テーブルタグのまとめ テーブルタグのまとめ
お小遣いサイト紹介用の表のサンプル お小遣いサイト紹介用の表のサンプル





↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 




 お小遣いブログで使える表の作り方【基本編】


お小遣いブログをするなら、表を作れたほうが良いですよね♪

ポイントサイトの紹介をしたり、一覧表を作ったり etc...


私も最初、作り方がま~ったく分からなくて困ったんです(´;ω;`)

色んなサイトさんを見て勉強したので、初心者の方にも分かりやすいように表の作り方を説明できたら、と思います!


表が使えるようになると、ブログの記事もずっと見やすくなると思いますよ♪

お小遣いサイト紹介のための表はサンプルもご紹介してるので、一から作るのはちょっと・・・という方は、タグをコピペして使ってみてください( ^∀^) → こちら




ブログで表を作るには、テーブルタグというものを使います。

今回はテーブルタグの基本を説明したいと思います(*´∀`*)


 テーブルタグで表を作る時の注意点


記事の中で表を使うときは、改行の設定を「HTMLのみ」に変えてください。

これをしておかないと、記事が出来たときに縦に長く伸びた崩れた文章になってしまいます。


FC2ブログの方は、「記事の設定」>「改行の扱い」を「HTMLのみ」に変更してください。

改行の扱いを「HTMLのみ」に変更 


ただこれをすると、表以外の文章の改行が自動的にされなくなってしまいます。

なので、自分で改行のタグを入れる必要があります。

改行したいところに<br>を入れましょう。


ちょっと面倒ではあるんですが(;^ω^)

改行=<br>と覚えておいてください!



 テーブルタグの基本


テーブルタグの基本はこれです。


テーブルタグの基本

<table border>
<tr>
<td>テーブルタグの基本</td>
</tr>
</table>




横に枠を増やすには、<td>~</td>を増やします。

横に枠を増やす横に枠を増やす横に枠を増やす

<table border>
<tr>
<td>横に枠を増やす</td>
<td>横に枠を増やす</td>
<td>横に枠を増やす</td>
</tr>
</table>



縦に増やすには、<tr>~</tr>と<td>~</td>のセットを増やします。


縦に枠を増やす
縦に枠を増やす
縦に枠を増やす

<table border>
<tr>
<td>縦に枠を増やす</td>
</tr>
<tr>
<td>縦に枠を増やす</td>
</tr>
<tr>
<td>縦に枠を増やす</td>
</tr>
</table>



二つを組み合わせると、こんな感じで表が出来上がります♪

縦と横に枠を増やす縦と横に枠を増やす縦と横に枠を増やす
縦と横に枠を増やす縦と横に枠を増やす縦と横に枠を増やす
縦と横に枠を増やす縦と横に枠を増やす縦と横に枠を増やす

<table border>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
</table>




意外と簡単ですよね♪

どんな表を作るにもこれが基本なので、覚えておいてくださいね(´∀`*)


ちなみに、上の見本のように表を真ん中に持ってきたい時は、table borderの後ろに align="center"を入力してください。



基本が分かったら次のステップに進みましょう!

枠に色をつける方法 枠に色をつける方法
表に色をつける方法 表に色をつける方法
表の大きさ・形を変える方法 表の大きさ・形を変える方法
テーブルタグのまとめ テーブルタグのまとめ
お小遣いサイト紹介用の表のサンプル お小遣いサイト紹介用の表のサンプル






↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 




 リンクを別ウィンドウで開くか、同じウィンドウで開くか


リンクをクリックした時に、別のウィンドウが立ち上がって表示される場合と、同じウィンドウで表示される場合がありますよね。

今回はその設定方法について紹介したいと思います。

FC2ブログではリンクを作るときに、どちらの表示方法にするか選べます。

リンク作成

実際に両方のリンクを作ってみるとわかると思いますが、「新しいウィンドウで開く」を選んだ場合のタグには、「target="_blank"」というタグが入っています。


同じウィンドウで開いていたものを別ウィンドウに変更したい場合は、

<a href="リンク先URL">リンク元</a>
    ↓ 
<a href="リンク先URL" target="_blank">リンク元</a>

と変更すればいいわけです。


どちらで開くのかは、好みにもよると思いますが、

基本的には内部リンクなら同窓で、外部リンクなら別窓で開くのが良いとされています。


実際にブログを訪問したときに、他のページに行くたびに別窓が開いてパソコンがウィンドウだらけになっちゃった( ̄Д ̄)ってことないですか。

SEOの面から見ても、訪問者にとって使い易いブログにすることが大切です。


私も、基本的にはブログ内の移動は同じ窓にしています。

訪問者にとって別で開いたほうが見やすいだろうな、っていうところは別窓にしてますが。



最後に1つ気をつけることは、アフィリエイトサイトによっては広告タグをいじるのは一切禁止!としているところもあるので、よく確認してから変更してくださいね。





↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 




 画像を活用してお小遣いサイトを作る

前に「FC2ブログの作り方」で「画像のアップ方法」について書きましたが、

今回は画像関連で、分かりやすいお小遣いサイトを作るために役立つことを
色々ご紹介したいと思います。


 リンクする画像とリンクしない画像の使い分け


画像のアップ方法」で書いた通りに画像をアップすると、

カロン

こんな感じで画像が表示されます。

この画像のタグはこのように↓なっています。

<a target="_blank" href="リンク先のアドレス" ><img border="0" alt="画像のタイトル" src="画像のアドレス"></a>


赤字で書かれている a で始まる部分は、リンクのタグです。
リンクなので画像をクリックすると画像だけの新しい窓ができます。


リンクしない画像を作りたければ、赤字の部分を削除してください。

<img border="0" alt="画像のタイトル" src="画像のアドレス">


これでリンクしない画像ができます。

カロン

お小遣いサイトの説明の記事なら、リンクしない画像の方が良いですよね♪


また、赤字のリンク先のアドレスを好きなサイトのアドレスに変えると、画像をクリックすると別のサイトに飛ぶように設定できます。

<a href="設定したいサイトのアドレス" target="_blank"><img src="画像のアドレス" alt="画像のタイトル" border="0"></a><br clear="all">


カロン
↑ 私のペットブログに飛ぶように設定しました。 ↑



 画像を中央に配置する


IMGP1769.jpg
この様に文字も真ん中に書けます。


こんな感じで中央に画像を配置するには、

<div align="center"><img border="0" alt="画像のタイトル" src="画像のアドレス"><br clear="all">
この様に記事の真ん中に画像を置く事ができます。</div>


このように赤字の部分を付け加えてください。

文章も一緒に囲めば文章も中央に配置されます。



 画像の右側に文字を書く


IMGP1477.jpg

 このように画像の横に文章を書く
 方法です。



<img border="0" alt="画像のタイトル" src="画像のアドレス" border="0" align="left">このように画像の横に文章を書く方法です。<br clear="all">


border="0"の後に、align="left"を入れると、右横に文字が書けるようになります。
<br clear="all">を入れる前の文章が横にきます。

左側に文字を入れたい時は、align="left"を、 align="right"に変更してください。






↓ このブログをブックマーク ↓




↓ ランキング参加中♪ 応援してくれたら嬉しいです(´∀`*) ↓

ブログランキング・にほんブログ村へ 人気ブログランキングへ 









上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。