アーティクル機能を使いこなそう! vol.2 関数・変数 後編
今回は後編です。
アーティクルの変数・関数 後編
前回の続き、「使用可能な関数・変数」の「複数行テキストを改行したい場合」から説明していきます。
【前編】アーティクル機能を使いこなそう! vol.2 関数・変数 前編
https://owlet.guide/construction/use-article02/
複数行テキストを改行したい場合
複数行テキストを改行したい場合、下記記述で出力します。
[*nl2br(@text)*]
例: コードがhogeの場合 [*nl2br(@hoge)*]
◆複数行テキストでの[*@text*]と[*nl2br(@text)*]の違い
・[*@text*]は、複数行テキストの入力欄で改行されていても、改行されずに表示されます
・[*nl2br(@text)*]は、複数行テキストの入力欄の内容の通り表示されます
>や<が含まれるテキストによってデザインが崩れる場合
[*@text*]や[*nl2br(@text)*]では表示が崩れてしまう場合に使用します。
[*htmlspecialchars(@text)*]
例: コードがhogeの場合 [*htmlspecialchars(@hoge)*]
通常はnl2brとhtmlspecialcharsを組み合わせます
[*htmlspecialchars(@text)*]だけでは、改行されません。
[*nl2br(@text)*]と[*htmlspecialchars(@text)*]を組み合わせた記述を使用します。
[*nl2br(htmlspecialchars(@text))*]
複数行テキストの出力の違い
◆複数行テキストに下記のような記述をした場合の表示の違い
Google map の出力を例に解説していきます。
=====================================
<p>Google mapを表示します。</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12964.268847953152!2d139.770848!3d35.675347!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8da781f6eb3d7a66!2z5qCq5byP5Lya56S-44Ks44O844OH44Kj44Ki44Oz!5e0!3m2!1sja!2sjp!4v1492322073380" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
=====================================
・[*@text*]の場合
記述した内容がそのまま出力されています。
Google mapを表示します。
=====================================
・[*nl2br(@text)*]の場合
<p>Google mapを表示します。</p>の後ろで改行されているため、
テキストとGoogle mapの間に1行空白行ができています。
Google mapを表示します。
=====================================
・[*htmlspecialchars(@text)*]の場合
htmlタグがそのまま出力されます。
<p>Google mapを表示します。</p>の後ろで改行されません。
=====================================
<p>Google mapを表示します。</p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12964.268847953152!2d139.770848!3d35.675347!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8da781f6eb3d7a66!2z5qCq5byP5Lya56S-44Ks44O844OH44Kj44Ki44Oz!5e0!3m2!1sja!2sjp!4v1492322073380" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
=====================================
・[*nl2br(htmlspecialchars(@text))*]の場合
htmlタグがそのまま出力され、改行もされます。
=====================================
<p>Google mapを表示します。</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12964.268847953152!2d139.770848!3d35.675347!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8da781f6eb3d7a66!2z5qCq5byP5Lya56S-44Ks44O844OH44Kj44Ki44Oz!5e0!3m2!1sja!2sjp!4v1492322073380" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
=====================================
書式化した日付を出力したい
記事の公開開始日時が表示されます。
[*date(@public_begin_datetime,'Y年m月d日 H時i分')*]
◆使用例1
年月日のみ表示する
[*date(@public_begin_datetime,'Y年m月d日')*]
◆使用例2
記事の公開終了日時を表示する
[*date(@public_end_datetime,'Y年m月d日 H時i分')*]
画像を出力したい
[*image(@id,'コード',@コード,幅,高さ,縮小モード,縮小時塗りつぶし色)*]
例(入力項目が"image"の場合):
[*image(@id,'image',@image,100,100,3,'ffffff')*]
◆画像の出力の仕方 その2
htmlのimgタグで記述して、アーティクルで登録した画像を出力ことも可能です。
下記は同じ内容です。
[*image(@id,'image',@image,100,100,3,'ffffff')*]
<img src="/_img/ja/article/[*@id*]/image/100_100_3_ffffff/">
◆縮小モードの解説
・縮小モード1
画像のアスペクト比は変更されません、サイズが変更されます。
画像のアスペクト比を保ったまま、 指定したサイズに対して、画像の比率が大きい方を基準に、 画像の全ての部分が表示されるようにリサイズされます。
そのため、指定したサイズと画像のアスペクト比が異なった場合、指定したサイズの領域の縦横どちらか一方に余白が生まれます。
・縮小モード2
画像のアスペクト比は変更されません、サイズが変更されます。
指定したサイズに対して、画像の比率が小さい方を基準に、指定したサイズの領域全てが画像で埋まるようにリサイズされます。
そのため、指定したサイズと画像のアスペクト比が異なった場合、 画像の縦横どちらか一方がトリミングされます。
・縮小モード3
画像のアスペクト比とサイズともに変更しません。
指定したサイズより画像が大きかった場合、画像がトリミングされます。
指定したサイズより画像が小さかった場合、余白が生まれます。
ディレクトリ名を出力したい
アーティクルのディレクトリ名を出力することができます。
[*directory(@directory)['name']*]
例)
==========================
ディレクトリ名:BLOG
URL:/blog/
==========================
上記でディレクトリを登録した場合
BLOG
と、出力される。
◆その他ディレクトリの使い方
・使用例1 ディレクトリID
[*@directory*]
ディレクトリを登録した際に、ディレクトリごとにIDが自動で振られます。
[*@directory*]でディレクトリのIDを出力することができます。
記述例)
<p class="directory_[*@directory*]">[*directory(@directory)['name']*]</p>
・使用例2 ディレクトリURL
[*directory(@directory)['url']*]
ディレクトリのURLを出力することができます。
記述例)
<a href="[*directory(@directory)['url']*]">[*directory(@directory)['name']*]</a>
**********************************
アーティクルの変数・関数の基本的な使い方は以上になります。
是非活用してみてください。