しばらく外していたFaviconを再び設置しました。
今回は似顔絵のアイコンを設定してみました。
なかなかいい感じにできたと思いますw
かなり美化していますがwwww
調子に乗って知り合いの分も作ってみました。
誰とは言いませんが、本人を知っている人には分かると思いますw
最後の人は完全に昔のイメージですが…ww
やってみると面白いのでよかったらどうぞ。
最近入れたアドオンで個人的に便利だなぁと思ったものをちょっと紹介。
まずはHide Find Bar with Ctrl+F。
ブラウザ内を検索するにはCtrl＋Fを押して画面の下に表示される検索ボックスに入力しますが、これを閉じるにはいちいちマウスで閉じるボタンを押さないといけません。
このアドオンはこれを再度Ctrl＋Fで閉じることができるようにするアドオンです。
細かいところですが、非常に便利。
詳細は以下にて。
- 窓の杜 – 【REVIEW】Firefoxの検索バーを［Ctrl］＋［F］で隠す「Hide Find Bar with Ctrl+F」
- Hide Find Bar with Ctrl+F :: Add-ons for Firefox
続きましてDblClickerです。
Firefoxではリンクを新しいタブで開きたい時にマウスのセンターホイールを押したり右クリックで…(ry
まぁ何かと面倒な操作ですね。
これをダブルクリックで実現してくれるアドオンです。
詳細は以下にて。
- Mozilla Re-Mix: ダブルクリックでリンクやブックマークを新規タブに開くことができるFirefoxアドオン「DblClicker」
- DblClicker :: Add-ons for Firefox
そしてQuickRestart。
ボタンひとつでブラウザを再起動できます。
どれも細かいところの改善ですが、細かいからこそイラッとする点が良くなるのでお勧めです。
あと今さらですが、最近になってようやくGreasemonkeyを導入してみました。
きっかけはYouTubeの動画をより高画質でダウンロードしたいと思って色々と検索してみたら…
という記事を見付けたからです。
便利ですね、Greasemonkey（笑）
何か面白いスクリプトあったら教えてください。
ずいぶんご無沙汰してましたが、何とか元気です。
最近…というか今もですが…ちょっとゴタゴタしてまして更新できてませんでした。
はてブの人気エントリーとか新着エントリーは毎日のように覗いてたんですが、そこでこんなエントリーを発見しました。
私には激やせとか関係ないですがｗ
以前からソーシャルブックマークにははてなブックマークとDeliciousを併用していました。
Deliciousには主にWebデザイン系をメインに、はてブにはそれ以外の気になった記事をメインにブックマークしてきましたが、どんどんたまってくるとどっちにブクマしたか分からないという状況がなきにしもあらずで、何とかならんもんかなぁと思っていました。
Deliciousが良かったのはFirefoxのアドオンがよくできていたので使いやすかったという点だったのですが、はてなブックマークの方もアドオンができていました。
何か上の記事と同じ流れですがそこは気にせずｗ
というわけで試しに入れてみたらこれが結構使いやすかったので今回思い切ってDeliciousからはてブに記事を全部インポート。
これからはDeliciousは使わず、はてブ一本で行きたいと思います。
先日、アップルからSafariの新しいバージョン4がリリースされました。
そして、全然知らなかったんですがInternet Explorerはバージョン8がリリースされてたんですね。
メインブラウザとして常用しているFirefoxもバージョン3.0.11となりました。
そこで、Operaの最新版もダウンロードして当ブログのスクリーンショットを撮ってみました。
なお、今回IEの古いバージョンでの表示はIETesterというフリーソフトを使ってみました。
Firefoxはバージョン3.0.11。
Safariはバージョン4。
Operaはバージョン9.64。
そしてIEは最新のバージョン8から過去の5.5、6、7。
以上、7つのブラウザが対象です。
ちなみにOSはWindows Vista Home Premiumです。
まずは、メインブラウザのFirefox3.0.11から。
完璧でしょうｗ
続きましてSafari4。
こちらも表示は完璧。
今回のバージョンからアップルらしいデザインは薄れましたね。
以前はフォントが良かったのに今回はWindowsに合わせるような形になったっぽいです。
個人的にはちょっと残念。
続きましてOpera9.64。
こちらも完璧です。
さぁここからは何かと問題の多いIEに行きたいと思います。
まずは最新版のバージョン8から。
イイですね～
以下の画像と比べてもらえば分かるんですけど、7まではサイドバーにある各リストの項目と見出し画像の間に大きな隙間ができていたんですよね。
8になってそれは解消されています。
まぁ私が悪いのかIEが悪いのかは別として、こちらだけの都合からするとこれは嬉しい改善点ですね。
以下が7です。
6と5.5は2枚続けてどうぞ。
まずは6から。
パッと見は問題なさげですが透過pngに対応していないのが不格好ですね。
最後は5.5です。
もう何も言いますまい…orz
何を今さらって感じもしますが今日はみんなでGravatarに登録しようぜって話です。
GravatarというのはGlobally Recognized Avatarsのことで直訳すると”世界的に認められたアバター”ってことで要するに”世界で通用するアバター”ってことでいいですかｗ
一番よく見かけるのがブログのコメント欄ですね。
特に海外のブログに多いように感じられます。
コメント投稿者ごとにそれぞれ独自のアバター画像を表示させていますよね。
視覚的に面白いのでうちのブログでも取り入れてます。
WordPressでは標準でこのGravatarに対応しています。
WordPressで構築されたブログなら管理者のちょっとしたカスタマイズで一気にコメント欄が画像付きの賑やかなものになります。
コメントを投稿する側にしてみればひと目でこれが自分のコメントだって分かります。
Gravatarは英語のサイトですからそれだけで躊躇する方もいらっしゃるだろうということで、今回はこのGravatarについてその登録方法などを画像付きで分かりやすく解説してみるのでそれに倣って是非登録してみようよ、という何とも上から目線的な投稿ですｗ
Read More…
何となく晒してみます。
- ColorZilla
- Delicious Bookmarks
- FireGestures
- Html Validator
- IE Tab
- Make Link
- Menu Editor
- Mitter Toolbar
- PDF Download
- Pearl Crescent Page Saver Basic
- Reget Favicon
- ScrapBook
- Tab Scope
- Wappalyzer
- Web Developer
- テキストリンク
全部で16ですか…相当ありますねｗ
個々の解説は省略しますが、個人的に重宝しているのは以下の5つ。
FireGesturesはマウスジェスチャー機能ですね。
もうこれがないとネットでブラブラ徘徊できないくらい依存しています。
Html Validatorはその名のまんまです。
現在見ているページがValidかNot Validかを教えてくれます。
面白いのはCSS Maniaに掲載されるようなデザインの素晴らしいサイトでも平気でNot Validだったりすることですね。
Make Linkはブログを書く時に重宝しています。
他のブログやニュースサイトから引用する時などに便利。
自分でカスタマイズできるので好きなように設定できますよ。
Pearl Crescent Page Saver Basicはページキャプチャーなんですが、これのいいところはブラウザのツールバーなどを除いた画面、つまり純粋に現在のページだけを取り込んでくれるところです。
まぁそう頻繁には使わないんですが、私は主に新しいテーマを作成している時にデザインの全体像を確認する際やテーマが出来上がった時にダッシュボード上に載せるスクリーンショットを撮るために使っています。
最後にWeb Developerなんですが定番すぎて解説の余地もありません。
私のような素人にはサイト作成に有益な情報が詰まりすぎてて使いこなせてないと思いますけどねｗ
まぁそれでもよく使うと言ったら「Outline Block Level Elements」と「View CSS」と「View Image Information」の3つぐらいですかね。
他のアドオンもそこそこ使っているんですけど、他にも何かお勧めのものがあったら是非教えてください。
最近多くなりましたよね、こいつ。
ページの下の方に「トップへ戻る」とか「Back to Top」って言ってるボタンとかリンクがあってそれをポチッとやるとスルスル～とスムーズにスクロールするやつですよ。
多分Javascriptとか使ってゴニョゴニョやるんだろうなとは薄々感づいていましたが、どうもJavascriptは苦手。
食わず嫌い的な言い方すると「触らず嫌い」とか「扱わず嫌い」って感じでしょうか。
まぁそんなことはいいとして。
何となく羨ましかったので重たい腰を上げてググってみました。
で、早速取り入れたわけなんですが。
これはいいっすよ！
ページ下のブログ名をクリックするとトップへスルスルっとな。
良く見かけるスムーズスクロールって
href=”javascript:void(0)”
や
onClick=”hoge()”とかが必要な場合が多くて、導入に躊躇しちゃいますが、ご紹介するのは通常のページ内アンカーで
<a name="top"></a><a href="#top">画面のトップに戻る</a>
の様なHTMLソースでOKだったりします。
上記のエントリーで書かれているまんまのことを私も考えていましたので正直言って導入は楽勝でした。
気になる方は是非チャレンジしてみてください。
ちなみに、私の性格上ちょっとだけ弄っています。
スクロールの速度を少し遅くしてみました。
smoothscroll.jsの一番最後の方にある
ss.STEPS = 25;
ここの数字を色々と変化させてみて最終的には100で落ち着きました。
500とかしたら鬱陶しいほど遅くなりますので面白いですよ。[*1]
【追記】
個別ページでちょっと問題が。
WP-Footnoteとかコメント欄のアンカーリンクも全部スルスルになってます。
まぁしばらく放置してそのうち考えます…orz
【さらに追記-2009.1.22-】
解決。
ヘッダーにあるjsファイルへのリンクを以下のようにしました。
<?php if(is_home()) { ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/smoothscroll.js"></script>
<?php } ?>
簡単でしたねｗ
条件タグを使用してトップページだけにjsファイルを読み込ませるようにしました。
【さらにさらに追記-2009.2.13-】
上のコードだとトップページだけしかスルスルなりません。
他のページや個別記事ページでもスルスルさせたいので元ファイルをいじってみました。
で、結果が以下。
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
この中にある「#」にtopを付加して
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf('#top') != -1) &&
「#top」にしか反応しないようにしました。
- そもそもこんな改造していいものなのか知ったこっちゃないので文句言われても知りませんよ（笑） [↑]
今回新しいテーマを作成したのをきっかけに、Firefox、Opera、Safari、Internet Explorer7、6、5.5、5.0、4.0のそれぞれでうちのブログを表示させスクリーンショットを撮ってみました。
まずは私のメインブラウザであるFirefoxから。
バージョンは最新の3.0.2です。
さすがにレイアウトの崩れは全くありません。
当たり前ですね、Firefoxを基準にレイアウトしてますから（笑）
次はOpera 9.52です。
こちらも全く問題ありません。
今回初めてOperaをダウンロードしましたが、デフォルトでマウスジェスチャーが装備されてて感動しました。
タブ型ですし、案外使いやすいのかもしれません。
さて、次はSafari 3.1.2(525.21)です。
問題なしですね。
Safariは独自機能というのか検索フォームなどのフォーカスが格好良いですね。
フォントも独特ですし、見た目の良さは個人的にピカイチだと思います。
Windows版がリリースされた時に飛びつきましたがメニュー項目の文字化けとかあって全然使えなかったんでどうしたもんかと思っていたら最新版では全く問題ないですね。
でもWindowsに慣れていないのかFirefoxよりも遅いのが気になりました。
パソコンの環境のせいですかね。
さてお次は何かと問題の多いInternet Explorerシリーズです。
まずは最新版のIE7から。
さすがは最新版の強みとでも言いましょうか、IE6で非対応だった疑似クラス「:first-child」にも見事に対応してます。
IE7になってからタブブラウザになったんですけどFirefoxから再び戻ることはなかったですね。
IE8にも期待はしてませんが気になるところではあります。
さて次はIE6。
未だにこのブラウザ使ってる人がほんと多いですね。
アクセス解析見てるとうちのサイトだとFirefoxに次いで第二位ですよ。
会社の上司や同僚も揃ってIE6です。
あと余談ですけどほとんどの人がサイドバーにブックマークを表示したままブラウジングしてるんですよね。
ノートパソコンの狭い画面が更に狭くなってます。
その方がお気に入りに入れたサイトを巡回するのに適してはいるんでしょうけど使いにくいとは感じてないんですよね。
まぁそんなことはいいとしてスクリーンショットはこちら。
パッと見た感じは悪くなさげですが、よく見るとフォントサイズが大きいし左カラムの上部によからぬ空白が見えます。
ただこの空白は、IE6が疑似クラス「:first-child」に対応していないからなんですね。
CSSでは各投稿の上部にマージンを設けて間隔を開けてるんですが最初の要素だけマージンを0と指定し一番上の空白がなくなるようにしています。
モダンブラウザでは問題ありませんが、IE6では上部に空白が残ってしまいました。
まぁでも本文は読めるので放置プレイです（笑）
さて、ここから一気にIE5.5、IE5.0、IE4.0のスクリーンショットを晒してみたいと思います。
まずはIE5.5。
次にIE5.0。
最後はIE4.0です。
恐ろしいですね（笑）
IE5.5ではタイトルロゴとナビゲーションの画像置換が効いてません。
ナビゲーションに至ってはずれまくってます。
IE5.0ではもっと恐ろしいことに、タイトルロゴとナビゲーション画像がどっか行っちゃいました。
小さいアイコンも文字にかぶりまくりです。
この辺はよく考えればすぐに対策できるんでしょうけど面倒なんで先延ばし…てか未だにIE5.0を使ってる人がいるとは思わないし、もしいたとしてもうちのブログを見に来てくれるとは思えませんから（笑）
最後のIE4.0は何なんでしょうか。
どこをどう解釈すればこんなレイアウトになるんでしょうね。
というか解釈そのものができてないんでしょう。
何かの本でIE4.0にはCSSそのものを読み込ませないという方法が載ってましたので今度時間があったらやってみたいと思います。
ちなみに、IEでの動作確認はMultipleIEsというソフトを使いました。
IE3.0からIE6.0までの動作が確認できます。[*1]
IE7にバージョンアップしてしまってIE6で確認できないという方にはお勧めですよ。
- IE3.0についてはほとんどの場合動かないと思いますが… [↑]
iTunesアートワークの登録について少しだけ。
CDなどから音楽ファイルをiTunesに取り込んだ時、iTunes上で設定していれば自動的にアートワークが登録されます。
しかし、iTunesでアートワークが見付からなかった場合、自分でネット上を検索して適切な画像を探してきますよね。
その時、一般的にはGoogleなどの検索エンジンで「アーティスト名 アルバム名」を入力して検索すると思います。
すると大抵の場合、Amazonでの検索結果が上位にヒットするはずです。
ここまでのやり方は色々あると思いますけど、私は大体このパターンでジャケット画像を探します。
例えば、木村カエラの「+1」というアルバムのジャケット画像を探すとした場合、Googleで「木村カエラ +1」と入力します。
すると、検索結果の上位にAmazonへのリンクが表示されますね。
そのリンクを辿ると、以下のようにジャケット画像が表示されます。
「イメージを拡大」もしくは画像をクリックするとポップアップで大きな画像が表示されます。
ここからが本題です。
通常はこの画像をそのままローカルに保存すると思いますが、このままだと画像の両サイドに以下のような不要な空白部分が追加されているのが分かるでしょうか。
もちろんこのままでも問題ないのですが、この画像をそのままiTunesに登録してしまうとCover Flowで表示した時にとても格好悪いと思いませんか。
そんなこと全く思わない方はこれ以上読まなくても全然OKです。
私のようにアートワークは完璧に取り込みたいと思う場合には、先ほどのポップアップが表示された際に画像をそのまま保存するのではなく、まず画像のURLをコピーしてください。
木村カエラの例で言えば、画像のURLは「http://ec2.images-amazon.com/images/I/41nOdlby6gL._SS500_.jpg」となりますが、このコピーしたURLをブラウザで表示した後に、このURLの最後にある「._SS500_」という部分を削除して再度ブラウザに表示させてみてください。
つまり、「http://ecx.images-amazon.com/images/I/41nOdlby6gL.jpg」を表示させるということです。
すると、以下のように両サイドの不要な空白部分が取り除かれた画像が表示されますね。
これってAmazonの陰謀ですよ（笑）
どんな画像でも「500px×500px」にしたいがために、それよりも小さな画像には「._SS500_」を追加することでいわゆる透明なレイヤーを追加する、みたいな力業を行使しているんですね。
上の木村カエラの例ならまだ両サイドだけですからましな方ですけど、「大橋卓弥 はじまりの歌」だと四隅全部に無駄な余白が…
まぁ別にAmazonにこだわらなくてもGoogleの画像検索にかけると余白なしの画像が見付かる場合も多いんですけどね（笑）
突然ですが、XHTML-CSS Validatorというサイトが激しく便利なんです。
使い方は至ってシンプル。
チェックしたいサイトのURLを入力し「Check it」ボタンをクリック！
HTMLとCSSの両方について同時にチェックできますので便利かなと。
ちなみにこのブログでチェックしてみました。
…惨敗ですな（泣）
HTMLでは18のエラーと18の警告、CSSでは10のエラーと30の警告を喰らってしまいました…
とまぁここまでは普通なんですが、何とその他にもFirefoxのアドオンが配布されているんです。
これが凄く便利です。
これまではわざわざValidatorのページを開いてチェックしたいサイトのURLをコピペして…ってとても面倒でしたが、これだとチェックしたいサイトを見付けたら即ブラウザのボタンをクリックするだけでチェックできちゃいます。
ただ、全部英語なのでちょっと難しいかもしれませんがまぁ大体のところは分かるでしょう（笑）
てか日本語でこういうサービスってないんかなぁ…
Another HTML-lint gatewayだったら知ってるけどこれもいまいちなぁ…
独自ドメインを取得したのでWeb上で利用しているあらゆるアカウント名を「manchie」へと移行しているんですが、del.icio.usでちょっと面倒臭いことになってしまいました。
以前のアカウントでブックマークした全てのリストをエクスポートし、新しく作ったアカウントの「manchie」へインポート。
ここまでは何も問題なく行けたんですが、新しいブックマークが全て「not shared」となってしまいました。
何か設定をミスったかと思って色々と調べてみましたがどこを探しても「shared」扱いにする設定が見付かりませんでした。
また、全てのブックマークを「shared」扱いに変更することもできないようです。
Google様で検索すると、
“not shared”扱いの全てのブックマークを一発で解除することができないようで、ブックマークを1つづつ、手作業で”not shared”を解除するしかないようです。del.icio.usのnot sharedをまとめて消したい – youare.jp
というエントリーを見付けました。
はぁ…ダメなんですね（泣）
もともとブラウザにある個人用のブックマークを読み込む機能なので間違って安易に公開しないようにこういうことになっているんでしょうが、せめて一括変換できるようにしておいて下さいよ、del.icio.usさん！
仕方がないので800弱のブックマークをコツコツと一つずつ「shared」に設定し直します…
あぁーやめときゃよかった（笑）
せめてちゃんと調べてからやるべきだったなぁ…
まぁでもこれを機にタグとかリンク切れとかの整理するかな！
全くタイトルの通りなんですが、今更ながら写真共有サイトのFlickrにハマッています。
随分前にアカウントだけは取得してたんですが、どうしても英語に慣れることができずにしばらく放置していました。
ところがWordPressに移行したおかげ（？）で海外のサイトにぶち当たる経験が多くなり、自然と英語恐怖症が緩和していきました。[*1]
というわけで、8月に行った台湾旅行の写真をとりあえずアップしてサイドバーに表示してみました。
WordPressのプラグインを使っても同じようなことができるんですが、今回はFlickrのサイト内で作ることができる純正バッジを使いました。
この純正バッジを見付ける前はプラグインを使ってゴニョゴニョとやってみたんですがどうしても自分の気に入る感じにならなかったので、「困った時にはGoogle先生や！」ということでガサガサ検索したところ、次のような記事を見付けました。
flickrユーザーが、自分のブログ等にflickr上の写真を表示するためのバッジ。こちらでジェネレイトする事のできる純正のflickrバッジをCSSレイアウトにカスタマイズしたものです。右カラム内にあるものがそうです。mBlog – CSS Based FlickrBadge
純正のバッジだと写真の数が1、3、5、10枚のどれかしか選択できませんが、ソースを弄ることで何枚でもオッケーみたいです。
サイドバーに表示することを考えると6とか8枚など偶数がいいですよね。
上記のサイトにある通りにそのままコピペしてもいいんですが、弄るの大好きな私は当然ゴニョゴニョやっちゃいました。
参考になるか分かりませんが、自分用のメモ書きも兼ねて載せときます。
<div id="flickr-badge"> <p id="flickr-www"><a href="http://www.flickr.com"><strong>www.flick<span>r</span>.com</strong></a></p> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=6&display=random&size=s&layout=v&source=user&user=12095433%40N02"></script> </div>
ここで、以下の記事にもあるように<script>～</script>にある「user=12095433%40N02」のところは各自のアカウントに沿って変更して下さい。
「user=」ユーザーIDの指定。最低限ここだけは変更しないと意味がありません。
example：55561732%40N00
自分もそうですが、flickr内で固有のハンドルを使っている人はURLに自分のIDが出ません。そういう方はidGettrというサイトで自分のIDが何であるかを調べる事ができます。自分の場合は「55561732@N00」なので、「@」部分が「%40」になり、「55561732%40N00」となります。
mBlog – CSS Based FlickrBadge
#flickr-badge {
width: auto;
}
#flickr-badge img {
margin: 0 8px 8px 0;
padding: 5px;
border: 1px solid #bababa;
}
#flickr-badge img:hover {
background: #3993ff;
}
p#flickr-www {
font-size: 11px;
margin-bottom: 5px;
}
p#flickr-www a:link, p#flickr-www a:visited {
color: #3993ff;
}
p#flickr-www a:hover, p#flickr-www a:active {
color: #3993ff;
text-decoration: underline;
}
p#flickr-www strong span {
color: #ff1c92;
}
これでサイドバーに綺麗に表示されるようになりました。
ランダム表示に設定しているので過去の写真も埋もれずに済むのでいい感じかなと思います。[*2]
ちなみに、Flickr関連で試してみたWordPressのプラグインは以下の2つです。
どちらもデータベースのエラーが出てしまったんですが、とうとう解決できずに断念しました（笑）
WordPressへ移行したのをきっかけに新しいドメインを取得しました。
その名もmanchie.com（マンチードットコム）です。
知っている人はすぐにピンとくると思うんですが、先日発売された吉井和哉の新しいアルバム「Hummingbird in Forest of Space」の中から、12曲目の「マンチー」を拝借しました。
しばらく前から新しいドメインにしたいなぁと色々考えていましたが、すぐに思い付くようなドメイン名は大体が取得済みでしたので、なかなか「これだ！」と思うものが見付からず進みませんでした。
今回の新ドメイン名取得にあたっての三大ポイントは、
- 何としても「～.com（ドットコム）」にする。
- 短くて覚えやすく、かつインパクトのあるものにする。
- 小文字にした時に下側がはみ出さないように「g」や「y」が入ったものは避ける。
以上の三点は最低限クリアしようと考えていました。
そして、今使用しているチカッパ！レンタルサーバーとの連携が楽なムームードメインでチェックを繰り返し、その中で何とかオッケーが出たのが今回のmanchieでした。
最初は聞き慣れない感じで違和感がありましたが、すぐに慣れて今では結構気に入っています。
というわけで、今回のエントリーが新ドメイン名の元で開設した新しいブログの記念すべき第一号のエントリーとなりました。
以前のブログは残しておきたいんですが…新しくなったので思いっきり前のログは全消去してやろうかな…でも勿体ないなぁ…でもなぁ…とか優柔不断満載で悩んでおります。
それでは改めてどうぞよろしく。