FAQキーワード別一覧 | OWLetに関わるご質問にお答えするなんでもFAQのページ

CSSの指定にて、交互配置にしていただけます。

<div class="box">
<div class="left">～～</div>
<div class="right">～～</div>
</div>
<div class="box">
<div class="left">～～</div>
<div class="right">～～</div>
</div>

このような出力の場合に、
通常の横並びのCSS指定の他に、
偶数の場合、や、3n+3の場合、等の指定を入れます。

※フレックスボックスを利用した簡易例です。
実際はベンダープレフィックスを入れる必要があります
.box: {
display:flex;
}
.box:nth-of-type(even) {
flex-direction: row-reverse;
}

アーティクルの開始タグに下記を追加することで、特定のディレクトリの記事のみ表示させることが可能です。

,'directory'=>"ディレクトリのコード"

下記を追加することで、ウィジェットパーツに表示順の選択肢を追加することが可能です。
※公開日時、優先度、idの設定は各アーティクル記事ごとに設定してください。

ウィジェットのテンプレート欄のアーティクルの開始タグに、
「,'order'=>@order」と記述し、
ウィジェットの入力項目に下記を追加。
入力項目名：「表示順」
コード：「order」
入力タイプ：「単一選択」

◆単一選択の項目
---------------------------------------
公開日時降順：ds.public_begin_datetime DESC,ds.id DESC
公開日時昇順：ds.public_begin_datetime ASC,ds.id ASC
優先度降順：ds.priority DESC,ds.id DESC
優先度昇順：ds.priority ASC,ds.id ASC
id降順：ds.id DESC
id昇順：ds.id ASC
---------------------------------------

◆テンプレート欄の記述例
---------------------------------------
{article(
'code'=>blog
,'display_count'=>5
,'order'=>@order
                    )}
                            {article:fieldset(@article:id,'article','menu')}
                            <tr>
                                <th>{=@title=}</th>
                                <td>{=nl2br(htmlspecialchars(@price))=}</td>
                            </tr>
                        {/article:fieldset}
{/article}
---------------------------------------

記述例）
絞り込み用のタグ一覧ボタンを出す記述を下記のように入れ、
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
{a:datastore(
    'datastore'=>'setting'
    ,'class'=>array('tag/group'=>'%')
    ,'search'=>array('code'=>array('match'=>'special'))
)}
<ul>
{a:foreach(@a:recordset)}{t:datastore(
    'datastore'=>'setting'
    ,'class'=>array('◆◆◆'=>'%')
    ,'parent'=>array(@id.'.setting')
)}{t:foreach(@t:recordset)}
    <li>
    <a href="/news/?tag[special][]={=htmlspecialchars(@t:name)=}">{=htmlspecialchars(@t:name)=}</a>
    </li>
{/t:foreach}{/t:datastore}{/a:foreach}
</ul>
{/a:datastore}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

記事一覧の表示設定（{article()}内の、件数設定などしている部分）に、
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
,'tag'=>$_GET['◆◆◆']
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
を記載します。
◆◆◆は「タグGET関数」と呼んでいます。
任意の文字列で良いのですが、私はいつも「tag」にしております。

アーティクル投稿画面が崩れる際の原因ですが、
「アーティクル基本設定」で「対象ディレクトリグループ」の紐づけができていないためです。
アーティクルコンテンツを作成する際には、上記が必須となっております。

動的コンテンツの一覧ページを作る際は
管理画面の「ディレクトリ」から設定をお願い致します。

もし 一覧ページが不要なアーティクルコンテンツを作成する場合には、
管理画面＞設定＞ディレクトリ から、ディレクトリグループの作成のみ行います。

変数ではなく固定パスで出力することになり、
ウィジェットの利便性が下がってしまいますが、
どうしても必要な案件等では、
ページ編集モード内「ファイル」メニューにて、
個別ファイルのアップロードが可能です。

/image/ディレクトリを作成しhoge.pngをアップした場合、
<img src="/image/hoge.png" alt="hoge">で呼び出しできます。

ウィジェットやアーティクル等で登録する画像に関しては
サーバーから削除され、新しい画像が登録されます。

①ファイル名を出力したい場合

[*@hoge*]

②ファイルダウンロードの場合

/_file/ja/article/[*@id*]/hoge/1/

◆例

<a href="/_file/ja/article/[*@id*]/hoge/1/">ファイルをダウンロード</a>

③ブラウザでファイルを開く（PDFのみ）

/_file/ja/article/[*@id*]/hoge/2/

◆例

<a href="/_file/ja/article/[*@id*]/hoge/2/">ファイルを開く</a>

アーティクル、ウィジェットで設定した入力項目は、下記のように記述することで文字数制限することが可能です。

◆「text」というコードの場合

=================================

{=richtext_strimwidth(@コード, 0, 100, "...")=}

=================================

100バイト以降の文字は、出力されず...となります

「アーティクルリスト」の「ループタグ」内に下記の通り記述してください。
<img src="/_img/ja/article/[*@id*]/◯◯/△△_□□_☆_xxyyzz/">

・◯◯
管理画面から登録した、画像項目のコードが入ります。

・△△
画像の横幅を指定します。ピクセル単位での設定になります。

・□□
画像の高さを指定します。ピクセル単位での設定になります。

・☆
1～4の数値を半角で入れる事で、画像のリサイズモードを設定します。
1：アスペクト比固定＆余白塗りつぶし
2：アスペクト比固定＆トリミング
3：中央トリミング
4：単純リサイズ
xxyyzz
横幅及び高さを指定した際に、余白部分の色をのHTMLカラーコードを設定します。何も設定しない場合は黒になります。
「xx」が赤、「yy」が緑、「zz」が青に対応しています。
カラーコードについて詳しくはこちら。

画像にaltを設定したい場合は、alt用の文言を登録するための「一行テキスト」項目を作成しておく方法があります。

【記述例】
・入力項目1(画像登録用)　入力タイプ：画像 コード：main_img
・入力項目2(alt文言登録用)　入力タイプ：一行テキスト コード：main_img_alt
・横幅：400px
・高さ：300px
・リサイズモード：1
・背景色：白

この場合の記述は下記の通りになります。
<img src="/_img/ja/article/[*@id*]/main_img/400_300_1_ffffff/" alt="[*@main_img_alt*]">

↓リサイズモードの設定例です。

基本的にはJPG/PNGを推奨させていただいております。

SVG,GIFなどもアップは可能でございます。 ただし、OWLetには、画像パーツをリサイズできる機能がありまして、 サイズを変換した際に、内容が全て変換されなかった場合に 正常に表示されない可能性がございます。

リサイズ機能を使わない場合は SVG,GIFなどでも、正常に作動する割合が高いです。 恐れ入りますが、一部相性が悪く正常に作動しない可能性がございますことを、ご了承いただけますと幸いです。

画像パーツリサイズ機能とは？ OWLetの中で画像の大きさを変換できる機能です。 例えば、300×250のサイズを200×100のサイズに比率を変更できる機能です。