Ivy SOHO.net

ひとつ便利な自動タグを紹介します。

この記事は 画像を配置する自動タグを活用しています。 記事には、以下の自動タグをいくつでも配置できます。

[imgcenter:画像URL ID] 自動タグプラグインには、imgcenter　置換文字列は、

<div class="uk-text-center"><!-- This is the anchor toggling the modal -->
<a href="&#35;#2" data-uk-modal><img src="#1" class="uk-border-roundeduk-animation-fade" style="-webkit-box-shadow: 5px 5px 15px 2px rgba(200,200,200,200); box-shadow: 5px 5px 15px 2px rgba(200,200,200,200);" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}"></a></div>

<!-- This is the modal -->
<div id="#2" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-frameless">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="#1" class="uk-border-rounded">
    </div>
</div>

これで、UIkit のmodalと、fade を活用できます。

※置換文字列内に#を記述するときは数値文字を代わりに使います。 #の数値文字：　#

つまり##2 のところは　##2 と記述します。

変換サイト：http://nelii.net/num.html

なおUIkitを活用するためには、http://getuikit.com/からダウンロードしたファイルをテーマ下に配置して、header.thtmlに、以下を追加。

<link rel="stylesheet" href="{layout_url}/uikit/css/uikit"{xhtml}>

footer.thtmlに以下を追加します。

<script type="text/javascript" src="{layout_url}/uikit/js/uikit.min.js"></script>