T-style.com
default blue gray orange pinkRSS1.0
 姫路発。地域情報、ブログ・Web関連、サッカーなど気ままに更新中
 
BLOG TOP > カテゴリー [[weblog] カスタマイズ ]

arrow-list-red.gif北海道エリアarrow-list-red.gif東北エリアarrow-list-red.gif関東エリア
arrow-list-red.gif北陸・甲信越エリアarrow-list-red.gif関西エリアarrow-list-red.gif中国エリア
arrow-list-red.gif四国エリアarrow-list-red.gif九州エリアarrow-list-red.gif沖縄エリア

スポンサーサイト

--'--.--.--  コメント : -  トラックバック : -  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索
- カテゴリ:スポンサー広告

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



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

Faviconを設置してさり気なくブログをアピール!

2006'12.05.Tue    0    1  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索

テーマ:カスタマイズ - カテゴリ:[weblog] カスタマイズ

ブログにFaviconを設置する簡単な手順をご紹介。

Favicon(ファビコン)とは?
FAVorite ICONの略でウェブブラウザのブックマーク(お気に入り)リストやウィンドウアイコン・タブなどに現れることのある、ウェブサイト独自のアイコン。

気に入るサイトをブックマーク(お気に入り)に入れた時にこんなアイコンを見たことがありませんか?
これはこのブログのFaviconです。
myblogfavicon_image.gif

簡単に作成するにはまず正方形の画像(後にFaviconになる)を作成します。画像はGIF、JPG、PNG形式で作成。出来るだけシンプルなデザインがいいです。Faviconになる基の画像が出来るとあとは簡単に生成してくれるサイトがあるのでそちらで作成してもらいます。 参照から先ほど作った画像を選択し、作成ボタンを押すとfavicon.icoというファイルが作成できます。あとはこれを自分のところへアップロードして、html内に下記のタグを記述するだけです。

設置するには<head>~</head>へ下記を記述
<link rel="shortcut icon" href="icoファイルのアドレス">

FC2ブログの場合
<link rel="shortcut icon" href="<%url>file/favicon.ico">

設定できると自分のブログをブックマークに入れてみてください。表示されれば設置完了です。
気づくか分かりませんが、Faviconは自分のブログのイメージにもなるのでさりげなくアピールするにはいいですね。
スポンサーサイト



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

リンク先のサムネイルを吹き出し風のポップアップに演出「WebSnapr」

2006'11.18.Sat    0    0  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索

テーマ:カスタマイズ - カテゴリ:[weblog] カスタマイズ

前に紹介したサムネイルを生成してくれる「WebSnapr」。
こちらでは別にjsファイルが配布されており、これを使う事によってリンクのマウスオーバー時にリンク先のサムネイル画像を吹き出し風のポップアップに演出することができます。リンク先のイメージを知ることができ、便利でオシャレですね。

簡単な導入方法を載せておきます。
websnaprイメージ

準備
previewbubble.zipをダウンロード。[解凍ソフトはこちら]
bg.pngをアップロードし、previewbubble.jsを修正する(テキストエディタなどで開き、10行目あたりを修正→保存)
var bubbleImagePath = '※images/bg.png';
修正が終わると次にpreviewbubble.jsをアップロードする。

websnaprイメージ
イメージ[クリックにて拡大]
設置方法
<head>~</head>への記述
<script type="text/javascript" src="※/previewbubble.js"></script>
リンクの設定(class指定を加える)
<a class="previewlink" href="http://tomytaku.blog14.fc2.com/">T-style.com</a>
上のようにリンクにclass指定「class="previewlink"」を加えます。

これで表示されるはずです。サムネイル表示に少々タイムラグがあるので表示されない方はしばらくしてから更新してみてください。

※注)アップロードした自分のpng、jsファイルパスに変更して下さい。

リンク
関連記事



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

「Reflection.js」で反射加工した画像を表示してみる

2006'11.03.Fri    2    0  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索

テーマ:カスタマイズ - カテゴリ:[weblog] カスタマイズ

画像に水面に反射するような効果を加える「Reflection.js」。
左のサムネイル画像を見てもらえれば分かると思うのですが、このJavascriptを組み込めば水面上に反射したような画像を簡単に表示する事が出来ます。
設置する場合は、リンク先にあるreflection.zipファイルをダウンロードします。解凍ソフトはこちら。ダウンロードを終えたら、各自の環境に合わせてreflection.jsをアップロードします。
reflection_image2.jpg
<head>~</head>へ記述※FC2ブログ用表記になっています。
<script type="text/javascript" src="<%url>file/reflection.js"></script>

あとは表示したいイメージにclass="reflect"を追加するだけです。
<img src="http://blog14.fc2.com/t/t-style/file/image.png" class="reflect" />

こんな感じで表示されるようになります。

ロゴを反射させるとweb2.0風な感じになりますね。こちらで映りこみの高さや透明度を変える事も出来るので色々試してみてください。なかなか面白いですね。

※環境はInternet Explorer 5.5以上、Firefox 1.5以上、Opera 9以上、Safariで動作するとの事です。

リンク



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

Lightbox js v2.0でサムネイル画像をオーバレイ表示

2006'09.08.Fri    0    0  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索

テーマ:カスタマイズ - カテゴリ:[weblog] カスタマイズ

(あわじ花さじき[はばタン])サムネイル画像をオーバレイで表示してくれる何ともおしゃれなLightbox。色んなサイトを参考にして何とか導入出来ました。試しに左の画像をクリックしてみてください。(Javascriptがオフになっている場合は動作しないので注意)
使ってみようかなと思う方は良かったら参考にしてみて下さいね。
※基本的にはこのツールはMovable Type用で下の説明はFC2ブログ用のカスタマイズ方法です。各レンタルブログの場合は改造が必要とのこと。
準備
Lightbox JS v2.0でファイルをダウンロード。[解凍ソフトはこちら]

設置方法

<head>~</head>への記述
<script type="text/javascript" src="<%url>file/prototype.js"></script>
<script type="text/javascript" src="<%url>file/scriptaculous.js"></script>
<script type="text/javascript" src="<%url>file/lightbox.js"></script>
<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" />
lightbox.cssの修正(青字の部分…/file/にアップしたファイルを挿入)
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(…/file/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(…/file/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(…/file/nextlabel.gif) right 15% no-repeat; }
lightbox.jsの修正(青字の部分)
// Configuration //
var fileLoadingImage = "…/file/loading.gif";
var fileBottomNavCloseImage = "…/file/close.gif";
var borderSize = 10;
以上の設定が終わればダウンロードした全てのファイル・画像をアップロード。[ツール→ファイルアップロード]。あとは画像表示させるだけです。

リンクの設定(画像表示)
Lightbox JS を利用したい画像リンクやテキストリンクに、青色で示すように rel 属性を与えます。またオーバレイ表示させる元の画像も用意しておいてください。(fc2の場合画像をアップロードする場合にサムネイルも作成する(jpg,png)にチェックを入れる)
サムネイル画像のサイズ設定方法[環境設定の変更]→[ブログの設定]→[サムネイル設定]
<a href="…/file/image-1.jpg" rel="lightbox" title="ここに写真のタイトル"><img src="…/file/thumb-1.jpg" alt="…" ></a>
あとは画像をクリックしてちゃんと動くか確認して下さい。複数の写真をスライドショーにすることも可能。色々試してみてくださいね。

リンク
参考リンク



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

ドイツW杯2006日本代表戦カウントダウン

2006'05.23.Tue    73    6  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索

テーマ:サッカー日本代表 - カテゴリ:[weblog] カスタマイズ

第2弾「日本代表の試合別カウントダウン」を急きょ作ってみました。急いで作ったので不具合があるかもしれません&期間も短いですが良かったら使って下さい。とりあえず2パターン作ってみました。こちらもブログのサイドバーに設置出来るようにサイズを小さくしています。気に入って頂ければ下のタグをコピーしてご自由にお使いください。お好きなようにカスタマイズして頂いて結構ですが、出来ればリンクはそのままにして下さい(^-^)
背景色は一応日本の国旗っぽく真ん中を赤にしてみましたが、青一色にしようか迷い中で。こんな色がいいよ!とかあれば言って下さいね~。不具合もあれば言って下さ~い。にしてもセンスがないなぁ。。。

追記:ドイツW杯にちなんでドイツの国旗をイメージした背景パターンを追加しました。

配布終了しました。使って下さった方、本当にありがとうございました。
Ver.1(ボタン風)
Ver.2(ノーマル)
Ver.3(ドイツの国旗風)
SAMURAIBLUE 2006
jpn01.gifVSaustralia_s.gif
japan_s.gifVScroatia_s.gif
japan_s.gifVSbrazil_s.gif
powerd by T-style.com
SAMURAIBLUE 2006
jpn01.gifVSaustralia_s.gif
japan_s.gifVScroatia_s.gif
japan_s.gifVSbrazil_s.gif
powerd by T-style.com
SAMURAIBLUE 2006
jpn01.gifVSaustralia_s.gif
japan_s.gifVScroatia_s.gif
japan_s.gifVSbrazil_s.gif
powerd by T-style.com



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

  トップへ戻る    次頁へ移動する

▲このページのトップへ
Total  Tday  Yday  Online: RSS feed meter for http://tomytaku.blog14.fc2.com/
Copyright© 2006 T-style.com ALL Rights Reserved.
アイコンカウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。