スポンサードリンク
COMMENT
TRACKBACK
- Favicon 設置
- こういうのが欲しかった！「関連エントリーリストジェネレータ」
- たかが訪問履歴なんですけどねぇ〜＜日別集計＞
- 花見 in 鶴山公園
- 携帯バトン
- 日本代表幕開け！！
- ペルー戦とスケート
- キリンチャレンジカップ vsペルー
- 日本ｖｓペルー
Archive
ブログ内検索
Calender
Review Me!
POWERED BY FC2
開設はこちら>>>
FC2BLOG
BLOG TOP
> カテゴリー [ [weblog] カスタマイズ ]
Ads by Google
タグ検索新しい記事を書く事で広告が消せます。
[参考になりましたらクリックよろしくお願いします。]
Faviconを設置してさり気なくブログをアピール！
テーマ:カスタマイズ - カテゴリ：[weblog] カスタマイズ
| ブログにFaviconを設置する簡単な手順をご紹介。 Favicon(ファビコン)とは？
|  |
気に入るサイトをブックマーク(お気に入り)に入れた時にこんなアイコンを見たことがありませんか？
これはこのブログのFaviconです。
簡単に作成するにはまず正方形の画像(後にFaviconになる)を作成します。画像はGIF、JPG、PNG形式で作成。出来るだけシンプルなデザインがいいです。Faviconになる基の画像が出来るとあとは簡単に生成してくれるサイトがあるのでそちらで作成してもらいます。
- Favicon Japan
- FavIcon from Pics[こちらは海外サイト]
設置するには<head>〜</head>へ下記を記述
<link rel="shortcut icon" href="icoファイルのアドレス">
FC2ブログの場合
<link rel="shortcut icon" href="<%url>file/favicon.ico">
設定できると自分のブログをブックマークに入れてみてください。表示されれば設置完了です。
気づくか分かりませんが、Faviconは自分のブログのイメージにもなるのでさりげなくアピールするにはいいですね。
[参考になりましたらクリックよろしくお願いします。]
リンク先のサムネイルを吹き出し風のポップアップに演出「WebSnapr」
テーマ:カスタマイズ - カテゴリ：[weblog] カスタマイズ
| 前に紹介したサムネイルを生成してくれる「WebSnapr」。 こちらでは別にjsファイルが配布されており、これを使う事によってリンクのマウスオーバー時にリンク先のサムネイル画像を吹き出し風のポップアップに演出することができます。リンク先のイメージを知ることができ、便利でオシャレですね。 簡単な導入方法を載せておきます。 |  |
準備
previewbubble.zipをダウンロード。[解凍ソフトはこちら]
bg.pngをアップロードし、previewbubble.jsを修正する(テキストエディタなどで開き、10行目あたりを修正→保存)
var bubbleImagePath = '※images/bg.png';
修正が終わると次にpreviewbubble.jsをアップロードする。 | 設置方法 <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ファイルパスに変更して下さい。
リンク
関連記事
[参考になりましたらクリックよろしくお願いします。]
「Reflection.js」で反射加工した画像を表示してみる
テーマ:カスタマイズ - カテゴリ：[weblog] カスタマイズ
| 画像に水面に反射するような効果を加える「Reflection.js」。 左のサムネイル画像を見てもらえれば分かると思うのですが、このJavascriptを組み込めば水面上に反射したような画像を簡単に表示する事が出来ます。 設置する場合は、リンク先にあるreflection.zipファイルをダウンロードします。解凍ソフトはこちら。ダウンロードを終えたら、各自の環境に合わせてreflection.jsをアップロードします。 |  |
<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で動作するとの事です。
リンク
[参考になりましたらクリックよろしくお願いします。]
Lightbox js v2.0でサムネイル画像をオーバレイ表示
テーマ:カスタマイズ - カテゴリ：[weblog] カスタマイズ
![(あわじ花さじき[はばタン])](http://blog-imgs-30.fc2.com/t/o/m/tomytaku/hana-habatan.jpg) | サムネイル画像をオーバレイで表示してくれる何ともおしゃれな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/にアップしたファイルを挿入）
<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" />
#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の修正（青字の部分）
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; }
// Configuration
//
var fileLoadingImage = "…/file/loading.gif";
var fileBottomNavCloseImage = "…/file/close.gif";
var borderSize = 10;
以上の設定が終わればダウンロードした全てのファイル・画像をアップロード。[ツール→ファイルアップロード]。あとは画像表示させるだけです。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>
あとは画像をクリックしてちゃんと動くか確認して下さい。複数の写真をスライドショーにすることも可能。色々試してみてくださいね。リンク
参考リンク
[参考になりましたらクリックよろしくお願いします。]
ドイツW杯2006日本代表戦カウントダウン
テーマ:サッカー日本代表 - カテゴリ：[weblog] カスタマイズ
背景色は一応日本の国旗っぽく真ん中を赤にしてみましたが、青一色にしようか迷い中で。こんな色がいいよ！とかあれば言って下さいね〜。不具合もあれば言って下さ〜い。にしてもセンスがないなぁ。。。
追記：ドイツＷ杯にちなんでドイツの国旗をイメージした背景パターンを追加しました。
配布終了しました。使って下さった方、本当にありがとうございました。
|
|
|
VS
VS
VS
[参考になりましたらクリックよろしくお願いします。]
エリア別地域情報
|
|
イチオシ！ブログで使える便利なツール
|
Flashティッカーのカウントダウンパーツ。表示するメッセージや色んなデザインを設定出来るので便利です。i2iでは、1つのIDでアクセスカウンターやアクセス解析、動画クリップも無料レンタルできます。 配布サイト |
(02/19) トミー
(02/19) JEY
(02/19) JEY
(02/18) JEY
(07/03) トミー
(07/03) トミー
(06/04) kaho*
(04/26) みその