Ellinikonblue.com Weblog

　ある日思い立ちました。 HTML 5 を習得しよう！。。。と。

　理由はまぁいろいろと思うところがあって、どうもこれから先、 プログラマの端くれという口にするには HTML5/CSS3/JavaScript は避けて通れないだろうと。
　プログラム言語という意味では Java と違って、 「 JavaScript ならほんのちょっとわかる」と言えるくらいはかじってつもりです。
　ただ今回はもっちょっとがんばってみようかと。

　と言うことで、まず手始めにうちのブログの HTML5 化に着手しようかと。

　んで、ちょっと今風で小生意気な感じを取り入れてフレーバーを HTML5 化するに当たって、 Twitter Bootstrap を取り入れたる！ と意気込んだわけです。

　こつこつ（≒のろのろ）と取り組んでいたわけですが、 ほんのちょっと Twitter Bootstrap の jQuery プラグインの導入を試していたところでいきなりはまりました。

　どういうはまり方をしたかを書き出すと長くなるので、 原因を先に言うと Twitter Bootstrap v2.3 には jQuery 1.9 が必要で、 その jQuery の読み込みに 「 Google Loader を使用したこと」でした。

　Google がホスティングする 代表的な JavaScript ライブラリは Google Loader を使って 以下のように読み込んでくることができます。

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript"><!--
  google.load("prototype", "1.6");
  google.load("scriptaculous", "1.8");
//--></script>

　上記は Prototype と script.aculo.us を読み込んでくる例ですが、 こうすることによって何が便利かというと、 Prototype を読み込む場合、 上記のように「 1.6 」と指定すると、 1.6.x の最新版がリリースされると 自動的に読み込んでくると言うところでした。

　今回もこれを利用して jQuery を読み込み、 Twitter Bootstrap を試したところ、 どうもうまく動作せず、まずここで悶絶してました。
　最新版を読み込んできていると思っていた jQuery が 1.7.1 だったというのがオチです。

　長くなったので解決編は次回。。。

• Bootstrap
• jQuery
• Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers
• Google Loader Developer's Guide - Google Loader — Google Developers

　長らくほったらかしだった Photolog の方の フレーバーもやっと変更しました。
　これまで Internet Explorer で 見るとひどい状態だったのですが、やっとこれも解消。 内容はともかく、ちゃんと見られるサイトにやっとなりました (^^;>

変更前 変更後 　前々から興味のあった Google Font API も 今回は使ってみました。

　毎度のごとく、 CSS いじいじしただけの代物ですが、 今後、もうちょっといじっくってそれなりの見栄えを確保する所存です。 ＜いつもこんなこと言ってる気がします (^^;

　ひっさびさに sass をさわって、 やっと ここ の フレーバーが抱えてる問題も思い出しましたので、 ここは一気にやっつけてしまいたいところ ＜いつも気概はこんなもんです (^^;;

　終わったら今度こそ、気合い入りのこったフレーバーの実験を Devlosxom の方で… ＜いつもの締めの言葉です。期待など決してしないでください (^^;;;

　実に 6 年ぶりの フレーバー 入れ替えです。
　blosxom でも こんなことできるんやって、そろそろ忘れ始めていま… いえ (^^;;;> 、とは言っても「がら」ができただけで、グラフィック的要素全くなし。 えぇ所詮こんなもんです orz

　一応、 HTML5 を意識してみたり、 CSS3 的要素をちりばめてみたりがんばったんす。。。これでも。
　これからグラフィック要素をはめていったり、 張り足りないアフィリエイトやブログパーツをはってもうちょっとっていうか もっとがんばります orz

　6 年ぶりにやってやったって感じの満足感もあるので、ちょっとゆっくりと…ね f^^;

KANGAROO-OASIS 「 BlogShot に登録」

　上記の記事を読んで、なんとなく ブログショット を訪れて、 当然何の気なしに自分のサイトを登録してから、トップページに表示されているブログの サムネイルを眺めてから、久々に all about blosxom の Blothumbnail を眺めていました。
　個人的に「きれいなぁ」と思う以下の blosxom な サイトのサムネイルをみていますと、沸々と沸いてきました。

　今年もやるぞ！模様替え！！

　PukiWiki サイト のスキン変更は 未だ こりごりです が、 ブログの方は今年もやるぞ！夏くらいまでにはきっと…という意識が萎えないうちに とりあえず宣言だけ (^^;;;;;>

• Ck2 Blogger
  　デザインの最終目標はここのクールさのあるポップさ。
• Kazulog
  　白を基調にして何となく漂う透明感のあるデザインが良い。個人的に好きな色使い。
• アフィリエイト インテリジェンス
  　さすがにアフィリエイトの巨匠、画面内にコンテンツがきっちり詰め込んであり、 かつごちゃつき感がない。レイアウトの見本。
• #6109
  　シンプルビューティーの極み。デザインで頭がまったりしたときにみると何かを悟れるかも…

　その前に、おざなりの トップページ を 何とかしろよ…という話もある (_ _;>

　やっとこのブログを新フレーバーに変更しました。 「女神の横顔」(Goddess Profile) って名を付けました。
　できとしてはまだ 80% くらいで、 これからも少しずつ手を入れていこうと思いますが、 いつまでも変えないといつまでも作業が進んでいかないので、 8 月 1 日と言うキリのいいこのあたりで変更することにしました。
　一応、素材はすべて昔、ギリシャに旅行に行ったときに自前で撮った写真なので、 できれば汎用で使えるように手直しして公開したいと思います。 ただタイトル部分をグラフィックスで作り込んでしまったので、 いつになるか分かりませんけど。。。

　まぁとりあえず、ASP に負けるか！と気合いを入れて作ってみました。 どんなもんでしょう？感想なんか聞かせてもらえると嬉しいです。

　全く遅々として進まなかったこのサイトのデザイン見直し。
　まぁ焦る必要もないのですが、やろうと決めたことが 全く進展を見せないのも気持ち悪いし、とりあえず大幅にデザインを変更すると 時間がかかることがよく分かったので、まずこのブログのフレーバーの構造を 見直すことから始めることにしました。
　そもそも以前の構造では、CSS だけをさわってデザインを変えることに 限界があることに気づいて、構造とデザイン同時に変更しようとして 作業が停滞していたのですが、 今回、構造だけ変えてデザインはほとんどそのままにしてみました。
　多少、横幅が広がり、文字も大きくなったくらいにしか見えませんが、 HTML の構造はまるっきりこれまでとは別物です （相当 div 要素が多いです orz ）。
　これで CSS をいじるだけでデザインを変更していける（はず）ので、 作業は徐々にでも進めていける下地はできたました。
　未だ文字とレイアウト、色設定だけで見せているデザインですので、 これから徐々にグラフィック的要素を入れて変更していきたいと思います。
　ある日いきなりデザインが変わったり、 表示が乱れたりすることがあるかもしれませんが、 長い目で優しく見守ってください (^-^;>

http://www.ellinikonblue.com/PukiWiki/index.php?blosxom
　先般から、いじくり倒していたフレーバーを、 メンテナンスリビジョンとして公開します。
　メンテナンスリビジョンと言っても、 かなり構造が変わっているので、Revision 4 と言っても いいくらいに変わってます。

　ほんとにこれでこのフレーバーをいじくるのは最後にします。
　と言うのも、春到来にあわせて、イメチェンをしようと思っていたのですが、 イメージしていたデザインへ CSS の変更だけで移行するのは、 今のフレーバーの構造では対応できないことがわかってきました。
　アフィリエイトも導入したことですし、もうちょっと気合いを入れ、 時間をかけて大幅に見直すことにします。
　できれば今後のイメチェンは CSS の変更だけで行えるように、 将来を見据えて構造をしっかり考えたいと思います。

　フレーバーのイメチェンの布石として、 現在のフレーバーをメンテナンスのつもりでいじっていたら 止まらなくなってしまいました…
# その割には見かけは間違い探し程度にしか変わってませんが…

　Nest of Snowy Owls 製の writebackplus プラグインは、 コメントをいただいた際に、その中に URI らしき文字列を見つけると、 リンクに置き換えてくれると言う機能があります （おまけに target="_blank" がついてます）。
　しかしながら、その URI があまりに長く、 そのボックス要素中で width を設定していると、 Internet Explore と Firefox で挙動が違い、 Internet Explore では width の設定を無視してレイアウトが崩れ、 Firefox は width の設定を優先してはみ出ます。

　この問題は、エントリの場合はそれを書く際にある程度考慮して、 書けば大きな問題になりませんが、 全く自動で処理されるこのコメント部分では問題です。
　そこで少々、アドホックな処理ですが、 CSS で writeback フレーバー中の a 要素の中だけ word-break を break-all に設定しました。 理想を言えば、コメント部分の a 要素だけにこれを設定するのがベストですが、 いろいろやった結果、現状の構造を保ったままだと、 writeback フレーバーのための ID 属性を持つすべての p 要素中の a 要素に word-break: break-all; とする方法でなんとかうまくいきました。

　まぁ、問題は解決したように見えますが、 Firefox では この記述は無視される（はみ出たまま）こともあって、少々気持ち悪い。 CSS は奥が深い。まだまだ修行が足りんな…(-.-;>

　wikieditish プラグインを導入して、 この Weblog の運用形態も安定してきたので、 公開していたこのサイトのフレーバーも Revision 3 とし、 このデザインでの最終版としたいと思います。

ご興味のある方はこちらで公開しております。
http://www.ellinikonblue.com/PukiWiki/index.php?blosxom

　来年こそは PukiWiki サイト も併せて、こちらもデザインを一新…したいなぁ。。。(^-^;;;>

　その前に PukiWiki サイト の方、 PukiWiki のバージョンアップをいい加減にしないと。

　いじくり倒していた当サイトのフレーバーが 何とか安定してきたので http://www.ellinikonblue.com/PukiWiki/index.php?blosxom にアップしました。
　PukiWiki のドキュメントの方はまだ書き換えてないですが、 アーカイブ中に Readme を結構力を入れて書いたので、 見ていただければ十分わかると思います。
　我ながらシンプルで良くできているし、個人的な CSS ファイルの 作成スキル向上には非常に役に立ったと、少々自画自賛(^^;;;>