hazisarashi.com » WebDesign http://hazisarashi.com MacなWebデザイン系プログラマのツール紹介などなど Sat, 14 Aug 2010 18:54:59 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 外部リンクに自動的に新しいウィンドウリンクを付ける http://hazisarashi.com/2009-07/177/ http://hazisarashi.com/2009-07/177/#comments Sat, 25 Jul 2009 21:55:09 +0000 恥さらし http://hazisarashi.com/?p=177

xhml-newWindow-javascript-L

外部へリンクする際良く使用する target=”_blank” はxhtmlでは禁止されているので、どうせなら外部へのリンクは 「新しいウィンドウで表示」のアイコンを別途付けてしまおう！

ということで、jQueryを使って新しいウィンドウで表示するアイコンを付ける物を書いてみました。

$(document).ready(function(){

	var checkArea = 'div.post-inner a:not([href^="http://hazisarashi.com"]),';
	var anchorObject = '<img src="http://hazisarashi.com/js/images/external.png" width="12" height="11" alt="リンクを新しいウインドウで開く" title="リンクを新しいウインドウで開く" />';
	var className = 'newWin'

	$(checkArea).each(function(){
		var target = this;
		var img = $(target).find("img").length;

		var url = $(target).attr('href');
		if ( url != '' && img == 0 ){
			$(target).after( $('<a href="javascript:void(0);">'+anchorObject+'</a>').click(function(){ window.open(url, "_blank", "status=yes,scrollbars=yes,directories=yes,menubar=yes,resizable=yes,toolbar=yes"); return false; }) );
		}

	});

})

これだけです。
頭の変数を修正することで、どこのサイトでも使える用になります。

checkAreaは、適応したいリンクの jQuery Selectors
anchorObjectは、表示させるアイコンのHTML
classNameは、リンクのclass名

必要に応じて、class名を元に外部CSSなどで margin などを記述してください。

関連記事 :

]]> http://hazisarashi.com/2009-07/177/feed/ 0 WordPress で Facebox を使う http://hazisarashi.com/2009-07/161/ http://hazisarashi.com/2009-07/161/#comments Sat, 25 Jul 2009 21:23:25 +0000 恥さらし http://hazisarashi.com/?p=161

wp_x_facebox-L

今日は、ブログの調整を色々行っていました。
今回は画像のポップアップをjavascriptで実装する方法に関してです。

今までは prototype.jsベースの lightview.js を使っていたのですが、そろそろ prototype.js を脱しようと思い、jQuery.js ベースの Facebox を使うことにしました。

Facebox の導入はとても簡単でした。
大半のこういったスクリプトはWordPressプログラムとして、提供されているので試してみましたがダメでした。

何がダメかというと、オプション設定が無い為です。
Faceboxはどのリンクをポップアップにするかを簡単に記述出来る様になっているので、オプションが無い ＝ プラグインソースを修正する必要がある = プラグインの意味がない！という結論に至りました。

なので、手動でファイルをダウンロード。

まずは js と css 内の画像へのリンクを修正する必要があるので、修正しファイルをFTPでアップロード。
あとはヘッダー又は、フッターに下記のソースを書き加える。

訂正：<head>タグ内でしか<link>タグ使えないのにフッターとか書いてました…。訂正致します。

<script type="text/javascript" src="/js/facebox/facebox.js"></script>
<link type="text/css" rel="stylesheet" href="/js/facebox/facebox.css" />
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('div.post-inner a[href$=".jpg"], div.post-inner a[href$=".gif"], div.post-inner a[href$=".png"], a[rel*=facebox]').facebox();
}) </script>

基本的には以上で終わりです。

5行目の部分が自動でポップアップにするリンクを定義してる部分になります。
ここは、「,」区切りで記述してあり、例えば

div.post-inner a[href$=".jpg"]

などは、CSSの記述と同じで div.post-inner 内の .jpg で終わるアドレスにリンクしているアンカーに対して、ポップアップを有効にすることを意味しています。

詳しくは、jQueryの記述方法をご覧ください。

参考サイト：jQueryでLightviewみたいなFacebox.js

関連記事 :

]]> http://hazisarashi.com/2009-07/161/feed/ 0 Blogをリニューアル・移行致しました。 http://hazisarashi.com/2009-07/143/ http://hazisarashi.com/2009-07/143/#comments Sat, 25 Jul 2009 02:39:39 +0000 恥さらし http://hazisarashi.com/?p=143

20090725-renewal

独自ドメインを取得して、サーバーを借り。ついに自分のサイトを持つこととなりました。

今まではニコニコ生放送での活動を中心として行ってきましたが、今後は他の活動を含めココをベースに行っていきたいと思っております。

サイト事態はまだ完成とは行きませんが、とりあえずこの状態からスタートします。

ちなみに、サイトのデザインですが作成するのはもう時間の無駄だと判断して（最近デザインから逃げてる気がする）、海外のデザイナーさんが制作された物を購入致しました。

ではでは、今後ともよろしくお願い致します。

関連記事 :

]]> http://hazisarashi.com/2009-07/143/feed/ 0