Ellinikonblue.net Devlosxom

ここはまだ壮大な夢の途中…

Posted on Sep 28, 2014 at 23:38

Pocket のボタンを設置

raining 「 SNS:Pocket(ポケット)ボタンの設置方法」

 前々からやろうと思って今になりましたが、上記の記事を参考に、 Pocket のボタンを設置してみました。

 ひとまず ここPhotolog に設置してみましたが、 特に問題なさそうなので、近いうちに あっち にも 設置したいと思います。

 Pocket 便利だと思うけど、 一般の人ってどれくらい使っているのかなぁ… 特にうちに対して「あとで読む」してくれる人、どれくらいいるもんだか疑問ですが…

 今回 story フレーバーに以下のコードを追加しました。
<!-- Pocket -->
<li> <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"
    data-save-url="$url$path/$fn.$default_flavour"></a>
  <script type="text/javascript">!function(d,i){
    if(!d.getElementById(i)){
      var j=d.createElement("script");
      j.id=i;
      j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";
      var w=d.getElementById(i);d.body.appendChild(j);
    }}(document,"pocket-btn-js");
  </script>
</li>
 元のフレーバーは うちの GitHub のページ を参照なすって m(_ _)m

 向こうに設置した暁には、もうちょっときれいにドキュメントを整理します orz

Posted on Oct 30, 2013 at 20:47

そろそろむこうに移植します

 ここ でずっと煮詰めてきた 新しいフレーバー「 Blosxomstrap3 」ですが、 Photolog の 「 Photologstrap 」ほど満足感はなく、デザインもまだ何となく「眠い」ままなのですが、 このまま放置しても あっち に なんの利益もないので、そろそろ向こうに移すことにして、 こっち でさらに煮詰めるか、 新しいものを考えるかした方が、建設的と判断しました。

 いまだ Calendar プラグインの問題はめどが立っていないのですが、 細かい JavaScript 周りをもうちょっときれいにとかは、 むこうに移す作業の中で整理しようと思います。

 けじめをつけるいいきっかけでしょう。
 11 月中に何とかします。(と言いきってみる f^^;> )
Image:20131030blosxomstrap3.jpg
Posted on Sep 08, 2013 at 21:11

Bootstrap なフレーバー作成の現状の問題点

 ここ のフレーバーを Bootstrap を使用したものに変更して、 すでにプラグインもそれように変更を施し、機能的なものも動作していると思います。
 アフィリエイトも交えて現在、レイアウトを研究中です。

 また ここ での成果を踏まえて、 Photolog の方も フレーバーを変更しました。

 どちらも特にタブレットやスマートフォンで見たときの見やすさは、 これまでと比較にはならないほどで、 まだ Bootstrap のルールに則ってレイアウトして、 CSS をいじくっただけの代物ですが、Bootstrap の 威力を実感できています。

 現状、 あっち への導入を最終目標として、 以下のような問題点に対して対処中です。
グラフィック的要素の追加
 絵心がないので、ごてごてにする気はないですが、 それでも小手先の CSS で飾っただけというのはちょっとひどすぎるので、 ただいま GIMP と格闘中です (^^;
calender プラグインの問題
 昨今、あんまりブログにカレンダーをおいているところは少ないので、 いいかな?とも思いつつ、これを Bootstrap 対応できるよう 書き換えをやろうかやらまいか悩みながらソースを眺めています。
 以前から何気なく使っていたプラグインながらなかなかに複雑で…手こずりそうです。
 その他にも MODx で生成している トップページBootstrap 込みで作り直したいなぁ…と考えています。

 まだまだ先は長そうですな (^^;;;>

Ellinikonblue.com Weblog 「 Photolog 新フレーバー『 Photologstrap 』」
Posted on Aug 07, 2013 at 22:41

Bootstrap なフレーバーに思い切って変えてみました

 変えまして、何とか見るに耐えるところまではもってきましたが、 ブログの機能的なものはおそらくほとんど動作していません (_ _;A

 何とかこうにか Bootstrap 3 で レイアウトができた段階で、まだフレーバーと呼べる代物ではないですし、 特に blosxom の プラグインがはくコードを Bootstrap に合わせようとすると、 どうしたってそれ専用に書き換えないといけないわけで…

 おまけに Bootstrap を組み込んだだけの状態から、 どうやってデザイン的要素を組み込んでいくかについてもまだおっかなびっくりやっている状態。

 先は長そうです。
 常に安定した閲覧は保証できないと言い切っているページなんで、 当面ご容赦を m(_ _)m
Posted on May 03, 2013 at 22:37

HTML5 化は完了

 このサイト のフレーバーの HTML5 化完了しました。。。と思います (^^;

 見栄えは全く変わっていませんが、一応、 CSS も突貫で修正してあり、 ひとまずこれで問題なさそうなら、 これまで気になっていた部分も含めて CSS をもう一度見直して Ellinikonblue.com Weblog にも導入しようと思います。
# ここまでできたら GitHub の方 にも公開します

 それからになりますが、ページの構造は HTML5 化したので、 これをベースに Twitter Bootstrap を組み込んで、 今度は見栄えもギミックもがらっと変更したいと思います。

 しかし、ここで一つ問題が…

 これまで、うちでは JavaScript ライブラリとして、 Prototypescript.aculo.us を使用してきましたが、 Twitter BootstrapjQuery を必要とするので、 あれやこれやとライブラリを導入する副作用がありそうですし、何より美しくないので、 ここはいっそ jQuery に統一しようかと考えています。

 となると問題は、 bsnap_lt / bsnap_hs で 実現しているギミックをどうするかという問題。
 うちで数少ないヴィジュアル系のギミックなので、 jQuery を使うようになっても何とかしたいなと思って 調べてみると以下のような記事を発見。

かちびと.net 「 個人的に気に入ってる 10 の Lightbox 系 jQuery プラグイン及び、その特徴まとめ」

 王道で jQuery lightBox plugin か、 Fancybox か、どちらにしてもプラグインを作り直さないといけない… と思っていたら、 bsnap_lt で 使用している Lightbox 2 が v2.5 から jQuery ベースになっているので、 ドキュメントを読む限り、 bsnap_lt を そのまま使えそう。。。

 ひとまずこれで、新フレーバーはやってみるかと果てしない目標 (^^; を立てています w
Posted on Apr 29, 2013 at 23:21

(S)CSS も公開しました

 GitHub の方Ellinikonblue.com Weblog / Ellinikonblue.net Devlosxom で 使用しているフレーバー向けの SCSS ファイルを公開しました。

 これでプラグインは除いて、 フレーバーと CSS で現時点のこのサイトくらいの見栄えは再現できます。
 blosxom を使っているだけで 絶滅危惧種に属するのに、うちのサイトを参考にする人などいるかという話はおいといて、 ほとんど自学自習の成果に対する自己満足です (_ _;>

 よし!行くぞ!! HTML5 化だ!!!
Posted on Mar 31, 2013 at 20:17

ひとまずフレーバーを公開しました

 GitHub の方 で、 現時点で Ellinikonblue.com Weblog / Ellinikonblue.net Devlosxom で 使用しているフレーバーを公開しました。

 さて次は CSS 。
 んで、 HTML5 を今年はやる!やる気になってきた!!。。。
続きはできてから言います (^^;A
Posted on Sep 04, 2012 at 21:43

Twitter Bootstrap という HTML/CSS フレームワークがあるそうな

IDEA*IDEA 「 Twitter Bootstrap の 2.1 が正式に登場」

 Twitter Bootstrap ってなに? …すみません。。。ここからスタートです (_ _;>

 世の中にはそれを使えば(ある程度)簡単に段組などが実現できる CSS/HTML フレームワークというのがあって、 有名どころとしては以下のようなものがあるんだそうです。  Twitter Bootstrap は、 Twitter 社が社内利用していたものを オープンソースでリリースしたもの(らしい)です。

 sass を使用して CSS を書くようになって、 自分なりにライブラリ的なものを作り始めてはいたのですが、 この Twitter Bootstrap のような CSS/HTML フレームワークを試してから考えた方が、 お得意の「車輪の再発明」をしなくてよいかなと言う気がします。

 ということで、今度は blosxom の HTML5 フレーバーの研究とあわせて、 ちょっとこの Twitter Bootstrap を 試してみようと思っています。

アシアルブログ 「超便利! Twitter Bootstrap でさくさく Web 開発」

「 米 Twitter 、同社発の CSS/HTML フレームワーク『 Bootstrap 2.0 』を公開」SourceForge.JP Magazine より)
Posted on Aug 25, 2012 at 20:02

blosxom で Google Font API を使う

 今回、 Photolog のフレーバーを 改装した 際、 Google Font API を 使用してみました。

 利用方法は Google Font API にもありますが、 いたって簡単で、blosxom の場合、 head フレーバーで各種スタイルシートを読み込む最後に以下の記載を追加します。
# フォントは Tangerine を使用。
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 次にこのフォントを使用する要素に対してスタイルシートでフォントを指定します。
 今回は h1 要素に対して使用しましたのでスタイルシートで以下のように指定しました。
h1 {
  font-family: Tangerine, "Times New Roman", serif;
}
 Times New Roman と serif の指定は Tangerine を使用できない、 もしくは読み込めなかったときのためのものです。

 Great VibesAlex Brush のようなフォントを 読み込む場合や、複数のフォントを読み込む場合などは以下のようにすればよいようです。
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Great+Vibes">
「よいようです」というのは Google Font API のドキュメントに書いてあっただけなので、 今度、自分でも試してみることにします。
Posted on Feb 17, 2012 at 22:05

そういえば LESS ってなに?

「 CSS の記述が 3 倍速くなる『 LESS 』の使い方」ASCII.jp より)

 最近知った sass (SCSS) で CSS を書くことにはある程度慣れて、自分なりのライブラリを作るとさらに便利になるのでは… と言う妄想と、今、生産物の知識ベースを GitHub 上に持ってこようと、 今必死で時間を作ろうともがいている(のでできてない orz )最中ですが、 その sass でがちゃがちゃやり始めたときに、 よく LESS と言う言葉を耳にはしたがよく調べもせず、 sass に染まってしまいました。

 sassLESS 、 何が違うのかは以下の記事がわかりやすそう。

(DxD)∞ 「 CSS 拡張メタ言語『 SCSS(Sass) 』と『 LESS 』の比較」

 JavaScript を仕込めば使えるというのは、 Ruby が必要な sass よりは いけてそうだが、最近はその他にも JavaScript を多用することが多い (特に JavaScript なしではできないことも多い)ので 安易に負荷をクライアント側に振るのはどうかと思う。

 理想を言えばテスト中は JavaScript で、 Fix した時点でコンパイルして使えるのが理想と言えば理想なんですが…

 あと、そういえば Compass ってなに? f^^; howtohp 「 CSS 書くなら Compass 使った方がいいよ。 SASS 使ってる人なら特に。」