facebookいいねをHPに表示

  • 2011.10.15 11:20
  • Cat:web
facebookいいねボタンをページ毎に表示したいと・・・。

どうすればいいのか調べて 一番よいと思ったのが、jQueryプラグインで表示。

本当に簡単にTwitter・facebookいいね!・GREEいいね・はてなブックマークなどの表示が出来るんです。

下記のサイトで詳しく説明
http://itra.jp/jquery_socialbutton_plugin/

jQuery本体は→ http://docs.jquery.com/Downloading_jQuery

jquery.socialbuttonプラグインは→ http://plugins.jquery.com/project/socialbutton

普通のHTMLで作ったサイトでも、CMSなどでも簡単に設置できるので 良いですね。


WEBのテーブルをCSSで指定

  • 2011.07.28 15:30
  • Cat:web
WEBのテーブルをCSSで指定する。

ホームページやブログで表などを表示するときに table(テーブル)を使います。

CSSで指定すると良い感じにできるんですよ。

<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>

上記のように入力すると下記のように表示されます。











WEBおぼえがきテーブルを良い感じに
WEBおぼえがきテーブルを良い感じに


もう少し スマートな感じに

<table style="border-style: solid; border-width: 1px 0 0 0;
border-color: #666 #fff #666 #fff; border-spacing: 0;">
<tbody>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
</tbody>
</table>

上記のように入力すると下記のように表示されます。












WEBおぼえがきテーブルを良い感じに
WEBおぼえがきテーブルを良い感じに


外部のスタイルシートを使う場合は

CSSは、
.table01 { border-style: solid; border-width: 1px 0 0 0; border-color: #666 #fff #666 #fff; border-spacing: 0;}
.table01 th { padding: 8px; border: #666 solid; border-width: 0 0 1px 0; background: #ccc; color: #000; font-weight: bold;}
.table01 td { padding: 8px; border-style: solid; border-width: 0 0 1px 0; border-color: #666 #fff #666 #fff; color: #000;}

htmlは、

<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>


色々と面白そうな表が出来そうな感じがしませんか?
試してみてくださいね。

WEBのラインをCSSで指定する

  • 2011.07.26 16:54
  • Cat:web
HTMLでラインを引く時に


<hr>


って指定するとラインが引けます。

そのラインをCSSで指定できるんですね。

直接CSSをHTMLに入力しても使えます。


<hr style="border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px;">








HTML
<hr class="s001">



スタイルシート
hr.s001 { border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px; }

上記のように設定するんです。

s001の所の名前を替えて設定するといろいろな線を設定しておけるんですね。

border-styleの部分は、線の設定なので、下記に入れ替えると簡単に変わるんで使えますね。

solid
1本線で表示。

double
2本線で表示。

dashed
破線で表示。

dotted
点線で表示。


border-colorの部分は、線の色の指定です。

→ WEBの色見本 

何種類か用意しておくとWEB制作中にいろいろな場面で使えるんですね。

HTMLのコードをブログなどでそのまま表示

  • 2011.07.23 19:50
  • Cat:web
HTMLのコードをブログなどでそのまま表示する為には。

そのままHTMLを書き込んだら表示されません。

だから

下記のサイトで変換する必要があるんですね。

ソースを「そのまま表示する為のHTMLソース」に変換

自動で変わるカレンダー

  • 2011.07.21 16:51
  • Cat:web
ホームページへ訪問すると 更新されているのか?

ネットショップへ訪問すると ちゃんと動いているの?

不安になることありますよね。


ホームページの運営者としては、新着情報を更新しようにも あまり更新出来る情報がない場合ありますよね。

そんな時に役立つのが 自動で変わるカレンダー!!

ネットショップの場合は、カレンダーが更新されていないと このサイトダメかな?

っと判断しちゃいますよね。

ネットショップを運営しているんですが、あまり 注文がないので、メールはチェックしているけど、カレンダー忘れてた。

そんな事 あるんです。

そこで 自動で変わるカレンダー!!

→ 営業日・定休日カレンダーJavascript

基本 無料ですが、利用規約はサイトで確認してください。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。