HikiのPluginで遊ぶ

今回、紹介するのは、てわすら Home　の磯遊びの写真。これがどうなのって言うと、この写真のように、部分的に中央寄せする方法です。実は、Hikiで画像を中央に揃える方法を知らない。中央に配置しようとしたこともなかった。しかし今回、移動水族館の写真を中央に配置しようとして、悩んでしまった。結果、簡単だがpluginを作ってみた。

作ったのは下記のような奴。

cimg.rb

def cimg(img_src, text = '')
  %Q|<div class="cimg"><img src="#{img_src}" alt="#{text}"></div>|
end

使い方は至って簡単。

{{cimg(/image/hoge.png hogehoge)}}

のように使う。ただ、これだけではダメ。おいらは、append-cssというpluginを使ってcssを追加している。

div.cimg {
  text-align: center;
}

こんな感じのcssを追加している。これで、中央に画像を表示させている。

例として、こんなのは？

{{cimg(/images/anpan.png anpanman)}}

去年の花火大会の時のアンパンマンです。Hikiっていろんなことができますね。