Adagioで行こう: ウェブログ・ココログ関連

2010年1月
日	月	火	水	木	金	土
					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

ウェブログ・ココログ関連

2008/12/08

やっと復旧

「ポップアップ（ライトボックス）機能」が復旧したようですね．．．．

と言っても、従来どおりのウインドウでのポップアップは復活しないし、そもそも、使ってないんであんまり関係なかったりしますけど。

見た目の良さではライトボックス機能もありかとは思いますが、大きな画像をみながら記事読んだり、複数の画像を見比べるには従来の普通のポップアップのほうが便利なんですけどね～。コンテキストメニューから別ウインドウでも出来ますけど、ユーザビリティを考えると、ど～なんでしょ？と私的には思うわけでして。

やっぱり、これからも地味にコード書き直すのが良いのかな？

いっそ、ライトボックスの設定の所を普通のポップアップになるように無理やり書きかえるJavaScriptでも作ろうか．．．．．

2008/12/08 15:26 ウェブログ・ココログ関連 | 固定リンク | コメント (2)

2008/10/01

ライトボックス機能は不要です。

ココログ機能追加で従来のポップアップが出来なくなってしまったからなのか、ここ最近、アクセス解析を見ると、画像のポップアップで検索して「以前書いた記事」に当たられる方が多いようですので、現時点のココログに新規投稿した記事で従来と同じ画像ポップアップ表示にする方法を書いてみました。

やることはとっても簡単

画像の貼り付けを、”ライトボックスを使用”のまま普通に行ったら、「HTMLの編集」に切り替えて、貼り付けた画像のリンク

「 <a href="http://xxxxx....> 」

に含まれている

「class="mb"」

を、従来の記事と同じ

「onclick="window.open(this.href, '_blank',
   ' width=xxx,height=yyy,
   scrollbars=no,resizable=no,
      toolbar=no,directories=no,
      location=no,menubar=no,
      status=no,left=0,top=0 ' );
return false"」

に置き換えるだけです。"xxx"、"yyy" には、元画像のサイズを指定します。

これで、今まで通り別ウインドウで画像がポップアップするようになる訳ですが．．最近は慣れてしまいましたが、この状態に陥ってからは記事を投稿する度に毎回修正作業しなきゃならないのが困り物です。

--
Niftyさんってば、新しい機能の追加も良いですけど今まで出来てたものが出来なくなるのはカンベンして下さいよ～．．．．ブツブツ

2008/10/01 22:57 ウェブログ・ココログ関連 | 固定リンク | コメント (2)

2008/05/28

ココログでMeiryo

WindowsXPでメイリオフォントが使えるようになったので早速インストールたところ、なかなか見やすくて良い感じ～なので、ココログの設定も変えてみようかと思ったら、フォントの選択リストにメイリオがないんですね．．．んじゃってんで、手動で設定してみました。

やり方は、

まずは、自分のブログのスタイルシート”http://自分のブログのURL/styles.css ”をファイルに保存してエディタで開きます。
＃FireFoxならアドレスバーに入力するとブラウザ上で表示されます。

次に、管理ページから、デザインのカスタムCSS編集をひらいて、先ほど保存（表示）したスタイルシートから "font-family:" がある項目を探したら、もともとの設定に'メイリオ', 'Meiryo'を追加したものをカスタムCSSへ記述と言った感じです。

font-family: 'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'Georgia', 'Times New Roman', serif;

で、カスタムCSSには、下記のようにfont-family:を変更したい項目について項目と変更する内容を記述していきます。

.content {
font-family: 'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'Georgia', 'Times New Roman', serif;
}

.content p{
font-family: 'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'Georgia', 'Times New Roman', serif;
}
　　：
　　：

カスタムCSSへの記述が終わったら「変更の保存」をすれば完了ですが、

IE6の場合、<html>タグに lang="ja"の記述がないと半角文字などで他のフォントが混在してしまって表示が微妙なんですね。ココログでは、この記述の変更ができないので．．．どうしたものか？

---　追記　---

とりあえず、フォントが混在すると気持ち悪いので、暫定対処としてIE6ではＭＳＰゴシックになるように上記設定に加えて、フォント違いで*htmlを頭につけた項目を追加してみました。

*html .content {
font-family: 'ＭＳＰゴシック', 'Georgia', 'Times New Roman', serif;
}
　　：
　　：

これで、IE6の場合だけブラウザのフォント設定がメイリオになっていても、ＭＳＰゴシックで表示されます。

2008/05/28 13:32 ウェブログ・ココログ関連 | 固定リンク | コメント (2)

2007/10/25

楽天ダイナミックアド

2008/04 更新
以前は、IE/FireFox共にココログに貼り付けても動作していたのですが、現在IEの場合にエラーが発生してページが閉じてしまいます（IE6で確認しました)。ココログに貼り付けずに単体ではちゃんと表示されているので、スクリプトには問題ないと思うのですが。何でかな？

楽天アフェリエイトで楽天ダイナミックアドを利用してみたところ一番小さいサイズを選んでも、表示が大きく場所を取りすぎるので、楽天ダイナミックアドAPIをつかって、シンプルに表示するJavaScriptを作ってみました。

表示サンプル

ソースのダウンロードはこちら
　ads_by_rakuten.txt

ココログの場合、ダウンロードしたソースをマイリストにメモで登録して、サイドバーに貼り付ければOKです。

ソース内の

　[your blog url]
　[your deveropr id]
　[your affiliate id]

には、それぞれ検索対象のURL、楽天APIのID、アフェリエイトIDを指定します。詳しくは、楽天ダイナミックアドAPIの解説をご覧ください。

画面への表示は、コールバック関数の
　RakutenAdsCallBack()
で定義しています。

表示するアイテム数はループ回数を１～5の範囲で指定することでで変更できます。添付のソースでは3です。

で．．．．

作ってからしばらくの間、サイドバーに貼り付けて使用していたのですが、表示されるアイテムの内容が、記事の内容と関係ないものばかり。ダイナミックアドの検索エンジンがあまり賢くないようですね。現在は旬のアイテムや自分が気になる事柄に関係した広告へのリンクを貼り付けています．．．X-(

関連リンク：
　楽天アフェリエイト
　楽天ダイナミックアドAPI
　楽天ダイナミックアド

2007/10/25 13:35 ウェブログ・ココログ関連 | 固定リンク | コメント (0)

2007/08/09

フォト蔵　はじめました。

ココログのアルバム機能の場合、使い勝手がいまいちと言うこともあって写真や動画の公開、共有が出来る「フォト蔵」というサイトへ登録してみました。

本コンテンツをご覧になるには、Flash Playerプラグインが必要です。FlashのWebサイトよりインストールしてください。

有名どころの「Flickr」と迷ったのですが、実際に両方登録して機能などを調べた結果、Flickrの場合、有料オプションを付けないと最新の200枚しか閲覧できなかったり、アルバムの登録数が限られていたりと、ちょっと制約が多かったことや、基本的に英語ベースなので日本語のサイトには向かないかも？と言ったところが気になり、フォト蔵に決定しました。

ちなみに、フォト蔵は、１0000枚までアップロード可能なので、週末に撮った写真の中から10枚程度気に入ったものをアップロードする程度なら20年は使える計算です。　:-)

試しに、アルバムを作ってフォト蔵のサムネイルを貼り付けてみましたが、サイドバーがごちゃごちゃして手狭になってきたので、近いうちに整理しないといけませんね。レイアウト変更しないとだめかな？

2007/08/09 00:19 ウェブログ・ココログ関連 | 固定リンク | コメント (2)

2007/03/15

ココログを便利にするJavaScript

カテゴリーやバックナンバーの表示方法などなど
ココログを便利にするツールが、「暴想」さんのブログで
公開されておりました。

これは良いかも！と、さっそく次の機能を設定してみました。

・タイトルと概要を表示する JavaScript
・月別バックナンバーをプルダウンメニューにする JavaScript
・カテゴリ別バックナンバーをプルダウンメニューにする JavaScript

これ、痒いところに手が届く感じで、いいですね。

ソースを眺めて見て、こういうふうにやればできるんだぁ～
と、JavaScript初心者としては、勉強にもなったりしちゃいました。　:-)

2007/03/15 22:53 ウェブログ・ココログ関連 | 固定リンク | コメント (3)

2007/02/15

復旧したようですね。

先日から調子が悪かった、画像のポップアップですが、
やっと、アナウンスがありました。

「ココログ障害のご報告」によりますと、どやら設定ミスで
すべてのココログで発生していたようで、現在は復旧したとのこと。

フリーの管理画面へのアクセスやコメントができない状況も復旧したようです。

とりあえず、無事？に直って一安心。

2007/02/15 12:24 ウェブログ・ココログ関連 | 固定リンク | コメント (2)

2007/02/12

サーバー負荷増大？

数日前から、ココログ記事内にある画像のポップアップを開こうとすると
次のような画面が開いて、画像が表示されない事が多くなっています。

ココログフリーでは、サーバー負荷増大の為レスポンスが悪化している様ですが、
ベーシックやプロに投稿されている記事でも画像が表示されない症状は同様なので、
どこか共通の問題が発生してるのかな？

＃2/12 現在この件についてのアナウンスは無し。

2007/02/12 17:59 ウェブログ・ココログ関連 | 固定リンク | コメント (3)

2007/01/26

画像ポップアップ　なぜかなぁ？

昨日公開したスクリプトですが、window.open()のオプションパラメータ修正と合わせて、
ソースを外部読み込みの設定にしたところ。

FireFoｘでは問題ないのですが、IEだとなぜかmargin:の設定が反映されずに、
常に枠なしで表示されてしまいます。
＃外部リンクの場所を本文中、サイドバー（マイリスト）と変えてみましたが、結果は同じ。

本文に直接にソースをおいた場合と、外部から読むこむ場合で、何が違うんですかね？
ちなみに、ココログではなく、普通に書いたページだと外部読み込みにしても問題なかったりします。

とりあえず、サイドバー（マイリスト）に直接ソースを書き込んでますが...
なぜなんだろう．．．なんとかしたいぞぉ。

あと、FireFoxはそもそもだめみたいなんですが、status=noってしてるのに、
ココログだとIEでステータスバーが出ちゃうのも変だぞ？
＃普通のページだとちゃんと消えてるし。

2007/01/26 16:25 ウェブログ・ココログ関連 | 固定リンク | コメント (0)

2007/01/25

画像ポップアップ用スクリプト

ココログライトボックス機能追加で従来のポップアップが出来なくなってしまった為か、画像のポップアップで検索してここに当たられる方が多いようですので、従来方式への変更方法を記事を掲載しました。ライトボックスから従来方式への変更は「こちら」

ココログの場合、画像をポップアップ付きでアップロードすると

（画像をクリックするとポップアップします）
こんな風に枠無しのウインドウで開かれるわけですが、

↓のように、ターゲットの指定をを書き換えて、
onclick="window.open(this.href, '_blank',～
onclick="window.open(this.href, '_popup1',～

ウインドウを閉じずにサイズが違う画像を表示させると

（画像をクリックして開いたウインドウを閉じずに隣の画像をクリックすると．．．）
window.open() で開いているので最初に開いた画像のサイズのままになってしまいます。

もともと、本家サイトでココログ風な枠無しで画像をポップアップさせる物が欲しくてフリーのJavaScriptを探していたのですが、自分が欲しい動きをするものが見つからず、それらを参考にしながら作ってみたところ、ココログなどで使っても良さそうなの物に仕上がったので、ちょこっと公開します。

<<< ソースのダウンロードこちら >>>

ココログの編集機能で自動的に貼り付けた場合との違いは、

1.同じターゲットでも指定されたサイズで自動的にウインドウのサイズをあわせます。
2.好きな幅と色で、ウインドウに枠を付けることが出来ます。
3.画像の下にキャプションを表示できます。
　＃キャプション指定時に枠指定が無い場合は、自動的に黒い枠がつきます。
　＃指定が無い場合、枠：黒、キャプション：白　になります。

といった所で、実際の動作は、こうなります。

サイズが違う画像で、同じターゲットを指定 (枠無し)
popupView(this.href,'_popup2',450,600)
popupView(this.href,'_popup2',600,450)

（画像をクリックして開いたウインドウを閉じずに隣の画像をクリックするとサイズが調整されます）

枠を表示
(黒枠 10px)/(青枠 20px)
popupView(this.href,'_popup2',450,600,'',10)
popupView(this.href,'_popup2',600,450,'',20,'blue')

（画像をクリックするとポップアップします）

キャプションの表示
(枠指定無し/枠指定有り(赤枠 20px,黒文字)
popupView(this.href,'_popup2',450,600,'ホテイアオイ')
popupView(this.href,'_popup2',600,450,'ゼラニウム',20,'red','black')

（画像をクリックするとポップアップします）

文字サイズの計算とか、かなり適当ですが．．．
一応、各種ブラウザで動作するようにしてありますので、
それなりに使える程度の物にはなってるかと思います。

ココログで使用する場合、まず普通にポップアップ付きで画像をアップロードしてから、ソースを修正するのが簡単です。

修正方法は、以下の通り。

該当画像の参照部分で赤の太字部分を削除します。
href="http://******.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/******.jpeg"
修正後はこんな感じ。
href="http://******.cocolog-nifty.com/photos/uncategorized/******.jpeg">

次に、
onclick="window.open(this.href, '_blank', 'width=600,height=450　～ ); return false" ～
を、ポップアップ用の関数へ置き換えます。