Webサイト Archive

以前TOPページがGoogleページランクが「2」になった時に報告しましたが、BLOGページもランク「2」になりました。

TOPページがランク2になった時の記事

BLOGページのURLが出来てから4ヶ月でページランク2になったことになります。

今回「3」を目指していたTOPページは過疎化の影響からか「2」のままでした。。。

Googleページランクについて、いつ時点での記事か分かりませんが、良いページを見つけました

グーグルページランク早見表

詳しく知りたい方は参考にして下さい

サイトのメニューバーを変更しました。

このメニューバーは下記サイトよりダウンロード出来ます。

Pure Css Horiontal Menus

メニューバーに合わせて、サイトデザインも変更しましたが、イメージが「子供用の運動靴」のような感じになってしまいました。（この感覚分かるかな・・）

私が設置した時には、このサイトの既存スタイルが悪さをして、タブがずれる現象が起こりました。もし、同じ現象の方がいたら既存のスタイルシートを見直してみて下さい。

TOPページのリニューアルに伴い、別ページとしてポップアップ開く「Episode History」をTOPページ下部に設置しました。

設置にはEpisode5まで使用していたSpry Widget のタブ付きパネルを利用し、エピソードごとのタブを設定しました。

これで少し過疎化していたTOPページが少し意味あるものになりました。

タブ付きパネルの設置には Spry Widget に記述されているソースの他に、SpryTabbedPanels.js と SpryTabbedPanels.cssが必要です

なかなか時間がなくてやっていませんでしたが、TOPページのデザイン変更を行いました。

デザインをBLOGと一致させる（普通はTOPページにBLOGなどのコンテンツを合わせるのが普通でしょうが・・・）事と、サイトとBLOGの一体感を持たせる為に、TOPページとBLOGに同じ、「BLOG記事のカテゴリーアーカイブのメニュー」を設置しました。

この「BLOG記事のカテゴリーアーカイブのメニュー」は現状ではあまり意味がないですが、何気にSpry framework for Ajaxの折りたたみパネルになっています。

今後、この機能を使って、BLOGの記事ページをWEBサイトとして構築していく事が可能になると思います。

サイト再構築を掲げておきながら、それどころかブログの更新すらさぼっています。。。すんません

9月に office Liveで取得したドメインのレジストラを変更し、それまでの環境では行えなかったMovable Typeを設置した時からの構想の一つに「自分の仕事で得られた経験等を元に記事を残していく」と言うものが実はあります。

この「BLOG みちしるべ」は仕事の記事は皆無に等しく、むしろ載せないようにしていました。

そこで「BLOG みちしるべ」とは別に新しいブログを立ち上げていこうと思います。

ブログタイトルは ...

-表参道で働く経理マンBLOG 「かえりみち」-（仮称）

一部パクリっぽい感じもなくはないですが。。。

このタイミングで構想を表に出した理由の一つに、以前同じ職場で働いていた友人が、「仕事を通じて得られたことのアウトプットのバージョンアップ行っていきたい」と思っており、どうせなら自分も一緒にやっていこう！と思いました。

ちなみに下記は現状の私が使っている環境やツールです。

「BLOG みちしるべ」は今後も継続していきますので、宜しくお願いいたします

Blogのデザインをリニューアルしました。冬バージョンです！・・・が、フラッシュ画像は前のままなので、今後差し替えていきます。

今回、Blogのテンプレートで使わせて頂いたのが、mt.vicunaさんです。

以前もmt.vicunaさんのテンプレート設置にチャレンジしたことがあったのですが、うまくいかず断念したことがあるのですが、今回は何とか設置出来ました。

スタイルシートにもコメントが入っているのでカスタマイズしやすいですが、なにせ私の知識が・・・。そこで役に立ったのがFirefox3のFirebugというHTML分析ツールです。

これを使うと、「このクラスは、どのCSSに記述されているか」などが分かりやすく便利です。

Episode8の今後はBlogのデザイン変更に伴い、サイト全体のイメチェンをしていこうと思います。

Googleのカスタム検索はAdSenseでは既に提供されていましたが、AdSenseアカウントがなくとも日本語でカスタム検索の利用が可能となりました。

（要Googleアカウント）

Google のカスタム検索プラットフォーム技術を基盤として、Google が提供する高品質かつ安定したパフォーマンスの検索を、ウェブマスターや Web サイトのオーナー、開発者の方が自由に Google 以外のドメインに組み込むことが可能となりました。

Google カスタム検索は一般のウェブサイトやブログなどに Google の検索機能を追加するだけで、特別なソフトウェアやハードウェアの購入などは必要ありません。Google カスタム検索は非常に簡単な手順で設定することができ、簡単にカスタマイズや管理できます。また、検索結果の簡単なデザイン変更も可能のため、ウェブサイトにあった検索機能としてご利用いただけます。日本語ユーザーインターフェイスの提供により、日本語で Google カスタム検索の作成や管理を行うことが可能となります。

Google カスタム検索の特徴は以下の通りです。

• ウェブサイトのデザインを検索結果ページに適用可能です。
• Google AdSense プログラムに参加して、カスタム検索エンジンから収益を獲得できます。
• 検索結果ページで検索を絞り込んで、探している情報を見つけやすくします。
• ウェブの閲覧時に検索エンジンのインデックスにサイトを順次追加します。
• 検索エンジンを共同編集したり、検索エンジンに参加する友だちや信頼できるユーザーを招待します。

登録はこちらから

私のサイトはAdSenseのカスタム検索での設置で、このページにも2か所設置しています。

ページ上部はWEBサイト全体の検索で、サイド上部にある検索はサイト内（K2style.net）のみの検索となります。

試してみて下さい

FeedBurnerのサービスを利用してRSSフィードをポッドキャストへ対応させました。

ポッドキャスティングとは？

ポッドキャスティング（Podcasting）とは、アップルコンピュータの携帯音楽プレーヤーiPod（アイポッド）と、broadcasting（ブロードキャスティング：放送するという意味）の２つの言葉を組み合わせて作られた造語。オーディオコンテンツを「購読」という形で自分の手元にダウンロードし、好きな時に好きな場所でそれを聴ける（原則無料で利用できる）仕組みや、自分が作成した音声ファイルなどをWebサイト上に公開（配信）することを指す。また、ポッドキャスティングを使って配信されている番組のことを「ポッドキャスト」といったりしているが、実際にはこの２つの言葉は混同して使われている。

と言うことです。

サイトTOPページのBLOG記事リストもFeedBurnerのものに変更しました。見て頂くと分かりますが、先日の記事「椎名林檎（りんごのうた）」の下には「Download Podcast」のリンクが表示されます。

この記事にはYouTubeの動画が入っているので、自動的にこのようはリンクが付加されます。Googleリーダーのようにポッドキャストに対応しているRSSリーダーなら「視聴」などと表示されます。

私のBLOGが動画や音声配信を主としていないので、実用的かとい言われると。。。

新しいもの好きと言うことで許して下さい

ブログをランキングサイト等に登録しだして、そのブログパーツなどをK2style.netのTOPページにも配置していたのですが、段々とゴチャゴチャして見栄えが悪くなってきたので、折りたたみパネルを設置し、全てその内に格納しました。

 TOPページの下部の緑のバーがそれです。

この折りたたみパネルはSpry framework for Ajaxで動作しています。

（いつもお世話になっています）

→ 折りたたみパネルのイメージ

イメージでは、デフォルトでは5個のパネルが開いている状態ですが、私の場合は、1個のパネルを閉じた状態にしています。

閉じた状態にするにはSpryCollapsiblePanel.jsファイル上部にある「this.contentIsOpen = true;」の「true」  を  「false」  に変更して下さい。

Episode6.0まで使っていた「アコーディオン」と少し似ていますが、アコーディオンは常に1つのパネルが開いている状態ですが、「折りたたみパネル」は任意のものを開閉出来ます。

Google AdSenseの「検索向け AdSense」の検索ボックスをTOPページとBLOGに設置しました。

是非使ってみて下さい

「検索向け AdSense」とは？

検索向け AdSense を利用すると、ウェブサイト上に簡単に検索機能を設置することができます。検索結果の画面には、AdSense の技術を利用して検索内容にターゲットを絞った Google の広告が掲載されます。
サイトを訪れたユーザが便利に使うだけではなく、サイト運営者はこの検索結果画面に表示される広告をクリックされることで、新たな収益を得ることができます。また表示される広告は、ユーザ自身が検索を行った内容にターゲットを絞っていますので、ユーザの興味関心により一層関連性が高く、効果的に収益を得られるチャンスが高まります。

実際に設定してみて、自サイトの中に検索結果を表示出来るし、検索結果のサイトを絞り込むことも可能です。

（現在の私の設定は検索結果を自サイト内に表示で、WEB全体より検索にしています）

ただ、一般的に「検索」はブラウザの検索窓で行ってしまうので、あまり使われる可能性は少ないようにも思いますが、色々な可能性は秘めていると思います

TOPページのグーグルページランクが知らないうちに2にアップしていました

たぶん9月27日にランク変更が行われたので、その時からだと思います。

ランク3までは標準的なサイトとされ、4以上はかなり大変そうです。

ちなみにランク定義の位置づけは

PageRankTMについて

PageRank^TM は、Webの膨大なリンク構造を用いて、その特性を生かします。ページＡからページＢへのリンクをページAによるページBへの支持投票とみなし、Googleはこの投票数によりそのページの重要性を判断します。しかしGoogleは単に票数、つまりリンク数を見るだけではなく、票を投じたページについても分析します。「重要度」の高いページによって投じられた票はより高く評価されて、それを受け取ったページを「重要なもの」にしていくのです。

こうした分析によって高評価を得た重要なページには高いPageRank^TM （ページ順位）が与えられ、検索結果内の順位も高くなります。PageRank^TM はGoogleにおけるページの重要度を示す総合的な指標であり、各検索に影響されるものではありません。むしろ、PageRank^TM は複雑なアルゴリズムにしたがったリンク構造の分析にもとづく、各Webページそのものの特性です。

もちろん、重要度が高いページでも検索語句に関連がなければ意味がありません。そのためにGoogleは洗練されたテキストマッチ技術を使って、検索に対し重要でなおかつ、的確なページを探し出します。

ということです・・・

とりあえず「3」を目指します

Flashメニューの変更と合わせて、全体的にサイトデザインを変更しました。

Flashメニューは、いつもお世話になっている、- Natural Breeze -さんよりお借りしています。いつもながら完成度が高いです。

後、TOPページのラボヒストリーの件数が増えて、デザイン的におかしくなってきたので、同ページ内でアコーディオン式表示より、ポップアップ式に変更しました。

デザインは自分的には「秋」なのですが、また夏の時と同様に「春」になってしまいました。。。

Live writer2008(Beta)で以前インストールした絵文字がエラーになる問題で、新たなプラグインを見つけました。

Live galleryを通常に見るとLive writerのプラグインは数件しか存在しませんが、画面のようにフィルタを「日本語」ではなく「すべての言語」に変更すれば、結構なプラグインが存在するのが分かります。

その中に「Insert Spaces Emoticon」というプラグインがあるのでダウンロードしてインストールすればLive writer2008(Beta)でも絵文字が使えるようになります。

他にも色々なプラグイン存在しますので試してみて下さい

NEWS FEEDページの表示方法を変更しました。

使用したのがGrazr Widget(RSSリーダー)と言うサービス（英語）

Grazrはview機能が優秀です。

NEWS FEEDページはスライドバーがなるべく出ないように、デフォルトに「slider」を選択していますが、一般的なアウトラインや3分割パネルの表示も可能です。

TOPページにも小さくして、このブログのFeedを埋め込みました。

ちなみにこのWidgetは埋め込みではなくWebページとして表示も出来ます。

このWebページをGoogle Chromeで「アプリケーションのショートカット」作成を使ってアプリの様に使うのも良いですね

この様なサービスは他にもあれど、サイト訪問者と共有出来るRSSリーダーの中ではGrazrは表現力が凄いのです。

BlogをMovable Typeへ変更し、各ページとのイメージを近づけるために、メニューバーを追加しました。

このメニューバーはSpry framework for Ajaxを使用しており、ボタンの 1 つにマウスポインタを置いたときにサブメニューが表示される、ナビゲーションメニューボタンのセットです。

今現在はサブメニューを表示させない設定にしていますが、本来は下記リンクのように表示できます。

ナビゲーションメニューのイメージ

このメニューバーの設置で、フラッシュメニューバーの存在が危うくなってきました・・・

グーグルは3日、WebブラウザGoogle Chrome(β版)を発表しました。

使ってみるとGmailがIE7と比べ、とても快適になっています。

2,3日前にoffice Live を解約しLive MailユーザーからGmail（Apps）ユーザーへとなった私はGmailの遅さにまいっていました。

それがサクサク動きます。

同じく、つい先日発表されたInternet explorer8（β版）と比べても快適です。

ベンチマークテストではこんなにも差が出ているのですね・・・IE7って・・・

ただ、現時点での欠点は、アドオンがほとんど使えないことです。

GoogleなのにGoogleツールバーすら使えません。

後・・・私のサイトの表示が・・・あちこち ぶち壊れています。

まず、サイトがセンタリングされていません。

実はfirefox3が発表された時点で気付いていましたが、見ない振りをしていましたが、今回確認してみてopera、safari、IE8の全てでダメになっています。

これってスタイルシート使わないとダメなのですね

ということで直してみました。

後、拡張子が 「aspx」だとソース表示になってしまいます。（これはIE8以外全てのブラウザ）

MS排除方向ですかね・・・htmlに変更しました

まだ、駄目な部分もありますが、スタイルシートの知識がないので、今はギブアップです。

今回の気付きはGoogle Chromeの出現で、IE以外のブラウザへ目を向けるきっかけとなり、スタイルシートの必要性と、ベンチマークテストの結果にも表れていますが、ブラウザ高速化抗争の始まりです。firefox3.1は更に高速化されるそうです。

今までOS標準装備の強みに胡坐を掻いていたMS陣営は、完全に高速化戦争で他陣営に水を明けられる結果となっています。今後に期待したいと思います。

久々のサイト変更のBlogです。

News Feed ページを追加しました。

ニュースをタブ形式でジャンル分けし、RSSで取得した内容を表示しています。

ニュース表示に際して、インラインフレームは使わないことにこだわりました。

理由は、記事の件数が多い時にフレーム内、にスクロールバーが出てしまうことを防ぐ為です。

Blogページはインラインフレーム形式ですが、 「1つの記事」 しか表示させさせていないのも同じ理由で、おおよその 「1つの記事」 の長さをフレーム高に設定しています。

ですので、記事が長すぎる場合はスクロールバーが表示されてしまいます。

Episode3.6 を見ると記事をいくつも表示させる為、フレーム高を8,000pxに設定しています。

（注：3.6は「Now Loading」を設置していない為、ページ読み込み途中ではタブが反応しません）

なので、javascriptのみ利用して今の形にしました。

RSSをjavascriptで表示させる為に利用させて頂いたのが、Callbee Feed/コールビーフィードです。

利用方法はRSSのURLを入れ、表示形式を少し設定するのみですので、とても簡単でした。

次は「ななめ読み」出来るように改良出来たら良いですね。

Live writerで投稿（Ping発信） → FC2ブログ（旧） サイト検索は、このサイトへ転送

--------- 同上 -------- → FC2ブログ（新） クロール制御で検索には引っかからない

この計画はなんとか成功したようです。これで動画投稿も可能になりました

ただ、忘れた頃に、クローンが出来上がって2重投稿になってましたが・・・

以前はFC2ブログに書き込みを行って、そこから発信されるRSSをMODIPHIのFeedMSと言うRSSフィードの機能を使いブログパーツとして。このサイト内に表示していました。（Episode4.5）

何故、そんなややこしいことをしているかというと、検索サイトでFC2ブログの書き込み記事をクリックされると、このサイトの存在を知らないまま記事を読んでも、「フラッシュを設置しました」と言っても、なんのこっちゃ？と言う事になります。それを防ぐために訪問した方をK2style.net（このサイト）へ誘導するために全て転送を行っています。 こんな感じ → クリック 

なので、このサイト内にFC2ブログを表示すると、漏れなく無限ループが始まってしまうのです。（大きな箱を開けると、少し小さな箱が出てきて、それを開けると更に小さい箱が・・・続く）

その為にFC2ブログはあくまでRSSの配信と、このサイトへの誘導と割り切り、MODIPHIのFeedMSをこのサイト内に表示させていました。

しかし先日Windows Live Writerを使ってyou tubeをアップしたところ・・・

がーーーん 表示されない

動画を表示させる方法はないのか？ ・・ と思いながらこんなサイトを見つけました。

xFRUIT 

MODIPHI と同じようにWebサイト系のRSSリーダーで、日本語にも対応しています。その中にRSS to My Blogという機能があって、これは簡単に言ってしまえばRSS配信された内容を自分のブログへそのまま配信する機能です。

（漏れなく 「POWERED BY xFRUIT」 が付きます）

ということは・・・・ Live writerで書き込み（Ping発信） → 今までのFC2ブログ（旧） → xFRUIT → 別に作ったブログ（新） → ブログ（新）をこのサイト内に表示

これだったら、ループも起きないし、Live writerで書き込みして投稿するだけで、後は勝手にやってくれるし、その他にも利点は

• ブログ（旧）からLive writerで書き込みの際、内容更新を告げるPing発信しこのサイトへ誘導
• ブログ（新）はPing発信しないで検索サイトのクロールもMETAタグで制御
• ブログ（新）は転送がかからないので、コメントの書き込みも出来る！

ちょっと設定・・・・

おおーっと出来た！

しかし日にちを空けてからもう一回テストすれど、今度は表示されず。。。RSS配信が１日に１回とかなのかな？ しかも、１回目の成功も何故かコメントの書き込みが出来ない状態。。。

で、こうしてみます。

Live writerで投稿（Ping発信） → FC2ブログ（旧） サイト検索は、このサイトへ転送

  --------- 同上 --------  → FC2ブログ（新） クロール制御で検索には引っかからない

この書き込みでテストします！どうなるでしょうか

ページ読み込み中のメッセージを追加しました。

現状のサイトの構成はSpry framework for Ajaxによるタブ形式を採用しています。

その先頭タブのDiv内にframeを設置してブログのRSSを表示しています。この構成が悪いのか、このページにアクセスした際に、初回はページ表示まで非常に長い時間が掛ってしまいます。

ここは構成を見直すのが普通なのでしょうが、今回の私の場合は

「読み込み中のインジケータ付けたい」という発想になりました。

そこで、KenG3にサンプルを頂いて、加工して使うことに少しチャレンジ

（ボタンによるON・OFF → ページ読み込み開始から終了に変更）しましたが、良いヒントが載っているサイトになかなか巡り合えず・・・

（たぶん結構簡単なのでしょうけど、そもそも基礎勉強を一切していないので、ワードがわからん）

で、旅路の途中で出会ったのが、あんぽんたんさんのページです。

インジケータではなく文字での表示ですが、やりたいことと一致しています。

（Gifアニメでインジケータ表示も試みてみましたが、ちょっと私じゃダメでした）

インジケータ表示は後々チャレンジしてみます。（サイト構成もそのうち変更しますけど）

ロゴ完成？

favicon.icoのデザインは「ペイント」で作りました。

初めはKと2を合わせて模った図形？のようなものを作ってみましたが、どうみても「ダサイ・・・」結局 となりました。

何気に図形？とイメージは近いです。

（時間とお金を掛けていないので、これ以上は突っ込まないでください）

そのファイルをFavIcon from Pics（英語）でicoファイルに変換してサーバーにアップ。

（本文サブタイトル横のロゴのように回るGifアニメまでセットで作ってくれます）

続いて html のhead タグ中に＜rel="shortcut icon" href="favicon.ico＞を追加で完了です。が、表示されない・・・

この現象はIEでは、「このサイトにicoファイルは無い」という情報がキャッシュされてしまっているので、履歴とキャッシュをクリアすれば次から表示されるようになそうです。

Summer Version

Episodeも変わったので、サイトデザインをリニューアルしました。

自分的には夏なイメージにしたつもりです・・・

どちらかと言えば春の様な。。。とは言わないように！

今回素材作成に使ったソフトは「彩彩畑」 今回のタブボタンと背景はこちらで作りました。

無料だけどなかなか優秀で、小さな素材をループさせて使う場合などは重宝すると思います。

あとはグラデーションなどの加工も簡単です。

リニューアルついでに、HTML内に無意識に作られ続ける「style」の削除と再設定など行って、サイト内のゴミを除去しておきました。現状の私の知識と、使用内容ではスタイルシートは使わない方が楽ですね。

TOPページのデザインを変更しました

タブのメニューにRSSリーダーやGoogleガジェットを追加などをして、たんだんと「いっそのことタブにBlogを埋め込んでしまえ」と思い、そのようにしてみました。

 ただ、ページ上のメニューボタンの存在意義が大きく後退してしまいましたが、なにか？

そろそろEpisode3シリーズも完結と言うことですね。

TOPページのアコーディオンをタブ形式へ変更しました

アコーディオン式の動きは好きだったのですが、動作が少し「もっさり」で動きが遅かったのですが、タブ形式はサクサク動きます。

メンテもこちらの方が楽ですね。

ちなにみこの機能はAdobeのスクリプトでdreamweaverでの加工が楽なのですが、既にdreamweaverの試用期間が過ぎてしまいました。

ならば「再度ダウンロード！」と思いサイトに行ってみると・・・

「体験版は現在ご利用いただけませんご迷惑をおかけして大変申し訳ございませんが、体験版は７月上旬までご利用いただけません。詳しくは、FAQをご覧ください。」

がーーん

しょうがないので自力でやりました！

大した祝いではないのですが・・・ 検索エンジンで、（概ね）「k2style]のワードで検索順位１位になりました！

何気にSEO対策も実践中です。

初めにサイト制作の際に、＜META＞タグの設定。次いで検索エンジンのWEBサイトとサイトマップの登録です。

サイトマップの作成にはGoogleのウェブマスター ツールを参考にしました。 RSSとサイトマップの作成でXMLの感覚値がすこーしだけアップしました

今後は内容を充実させていかないとね・・・

ローカルで表示させるのと動きが違います。なんでだろう？

 本来はHOMEのトピックはタブ形式なのと、アルバムはその場で拡大表示になるはずなのに・・・ちょっと残念です。

第2章と言っておきながら、ブログの引っ越しだけではなんなので、フレームバーを設置してみました。

この形に落ち着くのには結構な苦労がありました。

作りながら、「どう考えてもダサくないかい？」という疑問が沸くので、何回か作り直しましたが、一旦デザインのイメージが出来れば後は楽ですね。

（今の形もダサくない？って言うのは。。。言わないように） バーの表示がない方は http://k2style.net をクリックして下さい。

ちなにみ「Google Apps」は独自ドメインを持っている方の「iGoogle」のようなもので、Appsのスタートページはログインなしに公開できるので、設置しました。 「Live.com」は「iGoogle」のWindows Live版です。

LiveID（LiveメッセンジャーのID）でログインして、自分流にカスタマイズして使ってください。なお、お使いのプロバイダーや会社のメールもGmailでPOP受信してLiveメールに転送すれば。「Live.com」上でメール確認ができますので、自分用のポータルサイトとして使ってみてはいかがですか。