スポンサーサイト

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

さくらのブログにfancyboxを組み込む

さるねこ父が運営に関わっている「長崎の町ねこ調査隊塾」のブログは、さくらのブログというマイナーなブログサービスを利用しています。さるねこブログ同様、ねこ写真が頻繁に出てくるので、その見栄えをよくするために、fancybox という画像ポップアップスクリプトを組み込んでみました。ここで覚え書きとしてまとめておきます。

 

  1. fancybox のサイトから jquery.fancybox-1.3.4.zip をダウンロード
    • fancybox は既に Version 2 がリリースされていますが、さほど凝ったことをするわけではないので、旧バージョンを使います
  2. zip ファイルを解凍し、そのなかの fancybox フォルダの内容(画像+スクリプト)を適当なサーバにアップロードします
    • さくらのブログを使おうとするなら、さくらのレンタルサーバを使えているはずなので、そこを使います
    • 以下では、さくらのレンタルサーバのドメインを xxxxx.sakura.ne.jp、fancybox フォルダをその下の /home/xxxxxx/www/fancybox にアップロードしたとします
  3. さくらのブログの管理画面 - [デザイン] - [HTML] から、現在適用されているHTMLの編集を行ないます
    • タグを探し、その直前に次の3行を追加(青字・紫字部分は2で設定したように合わせる):fancyboxが使えるようになります

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="http://www.xxxxx.sakura.ne.jp/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" href="http://www.xxxxx.sakura.ne.jp/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

  1. どのタグ/セレクタに fancybox を作動させるのか、どのような挙動を行なわせるのかを、上記3行に引き続いて指定します
    • たとえば <a class="photo"></a> に作動させることにして、クリックすると現在の画面にフェードがかかる(overlay)ようにする場合、下記のようになります
    • オプション値について詳しくは fancybox の解説ページを参照して下さい

<script type="text/javascript">
$(document).ready(function() {
$("a.photo").fancybox({
'speedIn' :600,
'speedOut' :200,
'overlayShow' :true
});
});
</script>

  1. 以上、HTMLテンプレートの head 要素にスクリプトを追記したら準備は完了で、以降は個々の記事内で使われている写真等へのリンク a タグに photo クラス属性を追加するだけで、fancybox の画像ポップアップ効果が利用できます

(適用前) <a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

(適用後) <a class="photo" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

 

おしまい。なお、fc2 ブログでも基本的には同じように画像+スクリプトをサーバにアップして、それを HTML テンプレートから参照すれば使えますが、fc2 ブログだけを利用している場合、ファイルのアップロード先やアップロード時の作業にちょっとした注意が必要だったりするようです。詳しくは、こちらこちらの記事を参照。

スポンサーサイト

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

iPhone5

iPhone4から機種変しました。地図がおバカなのと、日本語入力周りに不具合があるのがショボンですが、概ね満足です。よく「青カビ」といわれた iPhone4 で蛍光灯下で写真を撮ったときに真ん中が青くシミになる現象もなく、カメラ性能は今のところ満足です(パープルフリンジはまだ確かめてない)。

 

というわけで、iPhone5で撮影したふみすけをば。

 

IMG_3285

RSS Ping 設定更新

どうも最近 rss の更新に遅延がみられるので、ためしに設定を変更してみた。

 

【旧設定】

http://rpc.weblogs.com/RPC2
http://rpc.technorati.com/rpc/ping
http://api.my.yahoo.com/RPC2
http://rpc.blogrolling.com/pinger/
http://rpc.pingomatic.com/
http://api.my.yahoo.co.jp/RPC2
http://ping.rss.drecom.jp/
http://blog.goo.ne.jp/XMLRPC
http://ping.bloggers.jp/rpc/
http://www.blogpeople.net/servlet/weblogUpdates
http://rpc.technorati.jp/rpc/ping
http://ping.ask.jp/xmlrpc.m
http://ping.namaan.net/rpc/

 

【新設定】

http://ping.fc2.com
http://ping.myblog.jp
http://www.blogpeople.net/servlet/weblogUpdates
http://ranking.kuruten.jp/ping
http://blog.goo.ne.jp/XMLRPC
http://rpc.reader.livedoor.com/ping
http://ping.namaan.net/rpc/
http://blogsearch.google.co.jp/ping/RPC2
http://api.my.yahoo.com/RPC2
http://ping.rss.drecom.jp/
http://rpc.weblogs.com/RPC2
http://www.bloglines.com/ping
http://rpc.blogrolling.com/pinger/
http://rpc.pingomatic.com/
http://ping.bloggers.jp/rpc/

Webstagram

基本はiPhone専用(最近Android版アプリもでましたが)のInstagramの画像をPCなどで見ることができるサービスにWebstagramというのがあります。昨日あたり、ちょいと調子が悪かったのですが、そしたらこんなエラーページが出てきて、ちょっとなごみました。

 

2012-0718_618972117

 

一生懸命キジシロさんが直してくれたおかげで、今はサービスは正常に動いています。さるねこ父の投稿写真はこちらから。ほとんど Twitter に同時に投げているのでかぶってますが。

テーマ : iPhoneアプリ
ジャンル : 携帯電話・PHS

ameblo × Windows Live Writer 2011 × metagateway

さるねこ父は、アメブロに記事を投稿する際に、Windows Live Writer 2011 というソフトと、metagateway というブログ投稿サービスを組み合わせていました。アメブロのブログ作成ページは、お世辞にも使いやすいものではありませんでしたので……

 

ところが、12/1から metagateway のサービスが、ドメイン期限切れで止まってしまったために非常に困っていたところ、次のように Windows Live Writer の設定を変えることで、投稿できることがわかりました。

 

  • ブログのwebアドレス:http://metagateway.jp/ → http://mgw.appspot.com/
  • ユーザ名:○○○@gmail.com (Metagateway ログイン ID)
  • パスワード:×××× (Metagateway ログインパスワード)
  • 使用するブログの種類:WordPress
  • ブログのリモート投稿URL:http://metagateway.jp/xmlrpc/ → http://mgw.appspot.com/xmlrpc/

 

……ふう。ようやくココちゃんの記事を書こうという気分になってきましたよ。

 

K-r17767-3

コ:コッちゃんもてつだいましゅよ。

 

 

K-r17875-3

シロクロ長しっぽのココちゃん(3ヶ月)、里親さま募集中です。

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ねこの肉球フォント

オフィスさるねこで、いろんな書類をつくっているうちに、こんなの見つけました。

NikuQ-font

素材ダウンロードは、あくび印さんから 字形 | AK-NikuQ-Nyako になります。Win版・Mac版あり、いぬの肉球フォントもありです。

いくつになったの?
15枚の写真からランダムに表示します
@sarunekofumi-zrssfeed
検索フォーム
ブログ最新記事

 

→ さるねこふみ別館ブログ

→ オフィスさるねこブログ

全記事(数)表示
全タイトルを表示
カテゴリ
関連リンク
RSS Link
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
最新コメント/記事
データ取得中...
カテゴリー/アーカイブ