web関連の最近のブログ記事
以前、lightboxについての記事を書きましたが、MovableTyleでは画像を挿入する場合、通常1枚を left center right の何れかに設置するようになっています。
せっかく、lightboxのスライドショーの機能として写真を順番に表示させることが出来るので、画像のサムネイルを一覧表示させられるかやってみました。
画像挿入時のファイルオプションの設定
- ブログ記事に画像を表示するにチェックする
- サムネイルを利用にチェックする（幅： 160 ピクセル）
- 位置は、左寄せ
※ポップアップウィンドウで元の大きさを画像にリンクには、チェックしない
始めは画像の位置を中央にしたり、横幅を代えてみましたが、私の環境では、「幅160px」の「左寄せ」に統一することで、キレイにうまく回り込ませることが出来ました。
左寄せの標準状態では、CSSで上0,右10px,下10px,左0の余白が設定されてますので、右寄せよりレイアウト的には良いのではないでしょうか。
ところで、MovableTypeは特別CSSをいじらなくても、勝手に回り込んでくれるのですね。
知りませんでした。
サムネイル表示まではうまくいきましたので、今度は、lightboxで表示させた際に、同一グループでスライドショー表示をさせられるか試してみました。
htmlモードのおまじない方法
予めブログ記事に写真を貼り付けたあと、htmlモードで「おまじない」を記入してやればすぐに出来てしまします。
a href="http://・・・・・/" rel="lightbox"
a href="http://・・・・・/" rel="lightbox[group]"
rel="lightbox" の後ろに半角で [group] と記載するだけで出来てしまいます。
もし、これが面倒であれば、lightboxの設定の際に、上記[group]を入れてしまっても支障ないと思います。
※[ ]内は何を入れても機能します。今回はgroupとしました
それでは、実際に設置したところをご紹介します。
写真を表示させて、写真の右半分側でマウスをクリックすると次のページに行きます。
逆に、左半分側でマウスをクリックすると戻ります。
私の血液型は典型的なA型です。
今まで、間違われたことなど一度もありません。
そのぐらい、変なところに細かく、そして、変なところにダラシナイ。
そんな性格なので、ウェブサイトを見ていると、なぜだか文章の右側の折り返しが狂って下の段に落ちてるのが気になってしょうがない。
私の中で、文章の折り返しが揃わないというのは許されない範囲なのだ。
これは、ブログでも同じことで、MovableTypeの初期設定では、ブログの記事の右側部分が揃う設定にはなっていない。
別に気にならない人は関係ないかもしれないが、私のように気になる人は結構多いのではないだろうか。
ちょっとイジッテみよう。
最近は、猛烈にCSSの勉強をしている。
XOOPSやMovableTypeなどを設置して、テストすることが多いのですが、借り物のデザインだったら、自分の環境に合わせてちょこちょこっとイジる程度で済んでしまいます。
しかし、最近は、ちょっとしたホームページを作る機会があったので、真剣に勉強することにした。
また、それにあわせて、MovableTypeも人より少しだけオシャレちゃんにしたいのも動機の一つです。
それでは、サンプルとして、下記に欲しいものリストを記載してみようと思います。
欲しいものリスト
| 順位 | 項目 | 細目 | 数量 | 単価 | 合計 | 摘要 |
|---|---|---|---|---|---|---|
| 1 | マンション | 沖縄に | 1 | 30,000,000 | 30,000,000 | 絶対買えない |
| 2 | 面白グッズ | Apple ipod touch(32GB) | 1 | 59,800 | 59,800 | 副業で買うぞ |
| 3 | 液晶テレビ | シャープ | 1 | 300,000 | 300,000 | そのうち |
| 4 | 健康グッズ | 鳥インフルエンザウイルスSARS ウイルス対策用マスク |
100 | 1,050 | 105,000 | 買いだめする必要ある |
| 5 | デジカメ | SIGMA DP1 | 1 | 98,000 | 98,000 | カッコイイ |
| 6 | ストーブ | 灯油ストーブ | 1 | 30,000 | 30,000 | タンク10リットル |
| 7 | カメラレンズ | PENTAX FA43mmF1.9 Limited シルバー |
1 | 69,500 | 69,500 | ほしーい |
| 8 | バイク | HARLEY-DAVIDSON VRSCDX |
1 | 2,341,000 | 2,341,000 | いいねー |
| 9 | 時計 | ROREX ミルガウス |
1 | 1,000,000 | 1,000,000 | いつかは・・・ |
| 10 | 面白グッズ | マジコン M3 | 2 | 6,000 | 12,000 | ヤルカナー |
表をマウスで選択してみてください
メチャクチャいいですよね。
それでは、忘れないように記載しておこう。
以前のバージョン(Movable Tyle 3.*)を使っていたときに、「MTpaginate」というプラグインを設置して、以下のようにページを分割していました。
All Pages 1｜2｜3｜4
Movable type 4でもトップページが分割されない仕様だったので、同じように設置しようとしたとき、下記の部分で足踏みしてしまった。
- php化への対応
いろいろな所で、Movable Type 4のphp化について触れられていますが、大変面倒で煩わしかったので、今回は避けたい部分の一つです。
そんな中、php化を行わずに、htmlをページ分割してくれるプラグインがあったので早速試してみることにしました。
以前のバージョン(Movable Tyle 3.*)を使っていたときに、「lightbox」というプラグインを設置していました。
この「lightbox」というプラグインは、サムネイル画像を押したときに、大変オシャレにポップアップ表示されるため、気に入っていたプラグインの1つです。
今回、新しいエンジン(Movable Tyle 4.*)でも、是非とも設置したかったので調べてみました。
そうすると、lightbox自体もバージョンアップ(1.*→2.*)しているのですね。
ますます意欲がわいてきます。
Movable Tyle 4.*では、なぜかデフォルトでは、ウィジェットセットに「トラックバック」が無い。
当ブログは、別にメインページに表示されなくても全く問題ないですが、ブログと言ったら「トラックバック」が表示された方が自然と思います。
私の想定だが、もしかしたら、トラックバックの存在そのものが、世間には受け入れられない風潮になってきたのかもしれない。
Movable Type は以前使っていたことがある。
いろいろなプラグインを入れては、楽しんでいたのだが、バージョンが「4.*」に上がってからは、一般的に使うのであれば「デフォルト」で十分といった印象。
新しい機能の中に、 ウィジェットセットというのがあり、XOOPSのブロックのような仕組みのようで、なんとなく使ってみたくなった。
最近のコメント
job-taka on 使い勝手向上委員会 パソコン購入苦悩の一週間（本体編）: ご無沙汰しております
gamisin on 使い勝手向上委員会 Movable Type 4 でページ分割したい: コメントありがとうご
tytd on 使い勝手向上委員会 Movable Type 4 でページ分割したい: とても助かりました！
job-taka on あけましておめでとう!!: 今年も宜しくお願いし