Ellinikonblue.com Weblog

夢は夢のまま終わらせない…

Posted on Mar 24, 2016 at 23:49

Bootstrap 4 がやってくる

コリス 「 Bootstrap 3 からBootstrap 4 に移行する時に知っておく必要がある注意点のまとめ」

 こういう記事を見ると、 そろそろ Bootstrap 4 の 足音が聞こえてきた気になってきます。

 WordPress のサイト構築の経験を いくつか積ませてもらって、ちょっといろいろ考えるところもあり、 最近、今のフレーバーがいかに非効率かということを思い知ったので、 これを機に構造を見直そうと思っているのですが…

 上記、コリス さんちの記事を読む限り、 また今回の Bootstrap 4 、 3 とは別物って感じがする orz

 flexbox の組み入れを試してみることを考えていなくはなかったのですが… なかなかに高い壁のようですし…うーん (_ _;>

Posted on Sep 29, 2014 at 22:56

Pocket ボタンを(今頃)設置しました

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

 Pocket は自分でもよく使っているサービスで、 ちょっと前からウェブサイトでこの Pocket ボタンが設置されているのを見て、 自分のサイトにもつけたいな…どうやってつけるんだろうとは思っていました。

 で、上の記事を見て、やっと重い腰を上げました (^^;A
 Pocket のサイトを探して、 なかなかドキュメントを見つけらなかったこともこれまで設置しなかった理由でもあるのですが、 それも上記の記事中にあり、今回めでたく設置ができましたとさ w

 当方では、blosxom の story フレーバーに 各種 SNS やウェブサービスとの連携のボタンのコードを記載しており、 今回は Pocket 用に以下のようなコードを追加しました。
<!-- 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 のページ で公開して… あ、今のこのフレーバーはまだないです orz …す、すいません。なるべく早く、整理して公開するようにします m(_ _)m

 みそは a 要素の data-save-url 属性の部分。 その他は Pocket のページからもらったコードそのまんまです。

 設置してみて、うちのページを「あとで読む」してくれる人いるのかな…と思っていたのですが、 結構、あとで読んでくれていることがわかって、今、ちょっとうれしがってます ( ´▽`)
Posted on Nov 11, 2013 at 19:05

Ellinikonblue.com Weblog 新フレーバー「 blosxomstrap3 」

 やっと、こちらBootstrap 3 を組み込んだ新フレーバー 「 blosxomstrap3 」に移行しました。

 ちなみに変更前はこんな感じ。
Image:20131110BlueSlate.jpg
 で、変更後こうなりました。
Image:20131110blosxomstrap3.jpg
 以前のフレーバーに比べるとデザイン的にはなんかまだかなり眠い感じですが、 これ以上時間をかけても、劇的な解決は望めそうにないので、 一旦、こちら にも このフレーバーを導入して、 改めて あっち で デザイン共々もう一度見直した方が賢明と判断しました。

 デザイン的には眠くても、 JavaScript まわりは jQuery で一新、 レスポンシブになり、スマートフォンやタブレットでの閲覧では 劇的な改善が望めました。
 今回はここまででよしとします。

 今度は Bootstrap も何とか使い方がわかったので、 もちょっとデザインの方を決めてみたい…えぇ単なる願望です (^^;A
Posted on Oct 05, 2013 at 21:16

「 Photologstrap 」煮詰まりました

 Twitter Bootstrap を利用した blosxom のフレーバーを、 Photologあっち で二通り試していましたが、 Photolog の方、 「 Photologstrap 」は煮詰まった感じです。

 ひとまず公開した当初がこんな感じ
Image:20130902Photologstrap.jpg
 今、現在こんな感じ
Image:20130930BootstrapFlavour-1.jpg
 過去の素材を再利用しながら、新しい素材も(簡単なものですが)作成しつつ、 少々散らかった感というか、ごっちゃり感はありますが、これも「あじ」と思える程度で 何とか踏みとどまっている。。。私のセンスでは煮詰まったと言うことでしょう。

 と言うことで、Photolog の 一段落と言うことにして、GitHub の方 で 公開する準備をゆっくりしていくことにします。

 さて次は、こっち に導入するつもりで、 あっち で いじくり続けている方を何とかしましょう。

 いろいろいじくり続けて今、こんな感じ
Image:20130930BootstrapFlavour-2.jpg
 まだ白々とのっぺりしてるなぁ…もう1つ、2つアクセントが欲しいと、 日々ひらめきを待っている状態。。。あぁ、なんか降りてこんかなぁ。。。 (^^;A Ellinikonblue.com Weblog 「 Photolog 新フレーバー『 Photologstrap 』」
Posted on Sep 02, 2013 at 20:54

Photolog 新フレーバー「 Photologstrap 」

 なんてものに模様替えしてみました。 最近、フレーバーいじりを続けいて、やっとオープンにできた成果物です。
Image:20130902Photologstrap.jpg
 先般から Twitter Bootstrap を使った フレーバーをこつことと考えていたのですが、 ここ への導入の前に、 あまりに見栄えのひどいまま放置されていた Photolog の方を 何とかしたいなと思い立ちました。
 ちなみに模様替え前はこんな感じ。。。 はっきり言って Google Fonts を使っただけ。
Image:20120820PhotologNewFlavour1.jpg
 まだ今回も「 CSS いじっただけやんけ!」と言われるとそうなのです (^^;A が、 今見ると以前のフレーバーは HTML 5 に真剣に取り組もうかどうかを考えあぐんでいたのに、 それを意識してページを作ってみたという試行的カオスの廃棄品のような構造で、 そんなものをいつまでも野放置しているよりはましでしょう f^O^;

 と言う動機なのですが、 Bootstrap も組み込んだことで、 フレームワークのルールに逆らわずにふつうにレイアウトするだけでバランスが落ち着くというか、 それなりに整って見えます。
 そんなに考えなくてもレスポンシブにできるというのも大きな利点です。

 ここ への導入を目指している、 同じく Bootstrap を組み込んだフレーバーとあわせて、 もうちょっと Bootstrap を研究して、 デザインを煮詰めていきたいと思います。
 ほんとに思っています。放置はしません (^^;A
Posted on Aug 21, 2013 at 00:02

Bootstrap 3 がでました

Bootstrap Blog 「 Bootstrap 3 released 」

 先般からフレーバーへの組み込みを目指して格闘している Twitter Bootstrap ですが、 その Version 3 が正式にリリースされました。

 えぇ、またもや RC2 から微妙に変わっています orz
 しかし、今回はほぼ組み上がっていたフレーバーも微調整で対応でき、 JavaScript で実現していたギミックも jQuery で組み直し、 blosxom プラグインも Bootstrap 向けに修正し、 ひとまずブログとして機能するところまでは持ってきました。
 ただし、デザイン的にはまだほぼ真っ白です。

 一つの目的だったスマートフォン、タブレット向けに レスポンシブな構造にするという部分は思った以上にうまく機能していて、 表示領域がある程度以下のデバイスでは、今のフレーバーと比較にならないほど 見やすくなりました。

 レスポンシブになったと言うだけでもメリットはあるので、 こちら に導入も考えたのですが、 思いとどまりました。
 過去、フレーバーの構造を変えてデザイン後回しで導入して、 大幅に進化したことはないからです。

 Bootstrap 3 もリリースされたばかりですし、 まだもうちょっと研究したいこともあり、もうちょっとデザイン的に煮詰めてから こちら に導入しようと思います。
# ひょっとしたら一番見栄えのひどい Photolog へ 先に導入するかもしれません。

 もうさすがに入れ替えた途端デザインが崩壊するほどの仕様変更はないよね? > Twitter Bootstrap

Ellinikonblue.com Weblog
「 Bootstrap 3 RC2 だろうが…」
「 Bootstrap 3 ってなんだよ」
Posted on Aug 16, 2013 at 13:53

Bootstrap 3 RC2 だろうが…

 先般、Twitter Bootstrap を使った フレーバーが 3 の Release Candidate(RC) 版のリリースとともに振り出しに戻ったところですが、 今度は RC2 版がリリースされました。

 ぐえ。グリッドの分類が増えとる。。。 orz

 スマートフォン向けの xs (eXtra Small devices) ってのが増えていて、 しかも特定サイズで表示・非表示を切り替えるためのヘルパークラス(レスポンシブクラス)が 重複して使えない。。。

 ぐあ!パネルの構造が変わってる。。。 orz

 パネルはヘッダー部分と本体部分を分けて記載する構造に変わっています。

 その他、 RC1 で作り込んでいたフレーバーで、 Bootstrap 3 RC2 に置き換えると レイアウトがぐちゃぐちゃ。。。特にスモールデバイス以下で見ると壊滅的 o...rz

 作りが悪かったのか…
 RC2 でしょうに。。。ここまで来てそれはないんでない > Twitter Bootstrap

 再び振り出しに戻る。。。(T-T)
 3 のリリースのあかつきにはうちもレスポンシブなブログに。。。
# と言うわけでフレーバー作成はめげずに継続中。。。レスポンシブな感じにやっとなってきた (^^)b Ellinikonblue.com Weblog 「 Bootstrap 3 ってなんだよ」
Posted on Jul 30, 2013 at 20:50

Bootstrap 3 ってなんだよ

 Ck2 Blogger さんちが模様替えをされ、 レスポンシブな感じが「いいなあれ。。。」と思って、 ほったらかしになっていた Twitter Bootstrap を 使ったフレーバーにうちも再度チャレンジ!と、 Bootstrap のサイトを訪れてみると。。。 Bootstrap 3 ってなんだよ orz

 しかも、グリッドの考えが根本から変わっている o...rz
 Pimp My Site さんちの記事によると。。。
  • モバイルファースト
  • CSS はレスポンシブ用スタイルも含めて 1 ファイルにする
  • IE7, Firefox3 系 のサポート廃止
などなどいろいろ変更点があるらしい。

 うちもそろそろスマートフォンやタブレットへの対応を本気で考えんと…と思って、 2.x 系でごにょごにょ考えてたけど、 なんかうまくいきそうにないのでどうしようか考えている間にそのまま忘却。
 今回、 3 で考え直してみると 3 のグリッドのほうが単純でうまくいきそうなんですよね。。。 ということで。。。

 ぐえ。ふりだしに戻る (T-T)
Posted on Jul 04, 2013 at 23:21

HTML5 フレーバーに変更しました

 だいぶ前からフレーバーそのものはできていたのですが、 やっと このブログ も HTML5 化しました。

 ひとまず…って感じですけどね。
 見栄えではほとんど(てか、まったく)わかりませんし。。。

 次はちょっとこったフレーバーの研究をしていたり、 サイト全体を HTML5 化しなければ。。。と思いつつも PukiWiki の方 は どうしよか?と悩んでみたり。

 ま、ぼつぼつ、こつこつと進化は続けていこうと思います。

 興味ある方は GitHub の方 で 公開しておりますので、煮るなり焼くなりしてください (^^;>
Posted on Apr 20, 2013 at 23:12

HTML5 習得目指して迷走中…なぜだ!?> Google Loader

 Twitter Bootstrap を試すために、 jQueryGoogle Loader で読み込んでみたところ、 どうもうまく動作せず、すったもんだしたあげく、 以下のようなファイルを作って確認してみると、 読み込んできている jQuery のバージョンが 1.7.1 であることがわかりました。
<!DOCTYPE html>
<html lang="ja">
<head>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript"><!--
    google.load("jquery", "1");  
  //--></script>
  <script type="text/javascript">
    $(function() {
      alert($.fn.jquery);
    });
  </script>
</head>
<body id="pagetop">
Hello jQuery!
</body>
</html>
 なんでやねん!って思って デベロッパーガイド を 見てみると、昔はあったはずの Google Loader を使用した ロード方法の記載がなくなっていました orz

 では、今はどうやって Google から JavaScript をロードすることが推奨されているかというと、 以下のように記載されています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 jQuery を 読み込んでくる場合の例ですが、 URL の中にバージョン番号が練り込まれています。
 上記の例では意識せずに最新版を読み込んでくることができなさそうですが、 以下のように記述することで、最新版 (1.9.1) を読んでくることができました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
# 「 1.9 」ではだめです。「 1 」でないといけません。

 なんか釈然とせんなぁ… そもそも Google Loader を 使うことを推奨しなくなったのはいつからなんでしょう?

 しかも、四苦八苦しているのはなにもこの話だけではなかったりする。。。 Twitter Bootstrap も かなり難物で… (^^;
jQuery ポケットリファレンス (POCKET REFERENCE)
鶴田 展之 著
( 技術評論社 )
¥ 2,678
Ellinikonblue.com Weblog 「 HTML5 習得目指して迷走中… jQuery 読み込みでまずこける orz 」