キーワード検索
FAQのカテゴリ一覧
よくある質問キーワード
最近よくあるFAQ一覧
下記記述で今いるURLのリンクにクラス付与することはできます。
{=(@link_url)==(@url:url)?' class="current"':' class="no"'=}
<div data-w-width="{=@width:limit=}">
</div>
この記述を入れると、ウィジェット設置時に
「コンテンツ幅を選んでの設置」をする選択肢が出るようになります。
全レイアウト共通CSS等で、下記記述を入れてみてください。
/*ウィンドウ幅での設置*/
[data-w-width] {
max-width: 100%;
}
/*コンテンツ幅での設置*/
[data-w-width="1"] {
width: 1200px;
margin: 0 auto;
}
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
各ページのSEO設定と連動する記述です。
ヘッダー内に埋め込みます。
FAQキーワード別一覧 | OWLetに関わるご質問にお答えするなんでもFAQのページと記述します。
カッコが違う理由として…
これは入力項目等の「変数」とはデータの引き出し場所が異なるため。
※OWLetでは、h1設置を推奨しています
◆記述例
<h1>FAQキーワード別一覧 | OWLetに関わるご質問にお答えするなんでもFAQのページ</h1>
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
複数条件の場合
{hoge:if(strlen(@hoge || @hoge2))}
<p>条件1 hogeかhoge2あり</p>
{/hoge:if}
{hoge:if(strlen(@hoge && @hoge2))}
<p>条件2 hogeもhoge2も両方あり</p>
{/hoge:if}
{hoge:if(!strlen(@hoge || @hoge2))}
<p>条件3 hogeもhoge2も両方なし</p>
{/hoge:if}
{hoge:if(!strlen(@hoge && @hoge2))}
<p>条件4 hogeかhoge2がない</p>
{/hoge:if}
識別子は半角英数字で設定。パーツ内でかぶらないようにする。
ifの中の変数は'..'に変更しなくてよい。
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
下記記述で「その他あり」が表示されます。
{=parse_checkbox(@fuku,',',@fuku_etc)=}
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
下記記述で「その他あり」が表示されます。
{=sel_text(@tan,@tan_etc)=}
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
altのファイル名出力はウィジェットのみ動作します。
alt="{=(strlen(@hoge_alt)?htmlspecialchars(@hoge_alt):preg_replace('/(.*)\..*$/','$1',@hoge))=}"
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
画像を別タブで開き、URLの後ろにある画像リサイズの記述を削除し、再度表示させてください。
その後、表示された画像の上で右クリックで保存可能です。
例)
https://owlet.guide/_img/ja/cms/12/image_roll_off/100_100_1_000000/
↓ 100_100_1_000000/ を削除
https://owlet.guide/_img/ja/cms/12/image_roll_off/
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
OWLet独自要素の「::self」を使う事で自要素の参照が可能です。
開始タグに設定したid、classを活用や
疑似要素指定をしたい場合は、下記の記述になります。
::self.hoge {
○○○
}
::self:before {
●●●
}
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
同じウィジェットで異なる画像を設定・設置する場合ですが、
「共通CSS」ではなく、
「設置先毎CSS」にCSSを記述いただくことで可能となっております。
下記記述を参考に、
「設置先毎CSS」に記述してください。
background:url(/_img/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/background/___/session/{=@parts:session_sequence_id=}) no-repeat center center / cover;
「設置先毎CSS」は、ページ内に設置した回数分出力がされるため、
入力項目からCSSへ反映をする場合には「共通CSS」に書いていただければ
画像や背景色等を変更可能です。
- カテゴリ:
- なんでもFAQ
- キーワード:
- ウィジェット
同じウィジェットで異なる画像を設定・設置する場合ですが、
「共通CSS」ではなく、
「設置先毎CSS」にCSSを記述いただくことで可能となっております。
下記記述を参考に、
「設置先毎CSS」に記述してください。
background:url(/_img/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/background/___/session/{=@parts:session_sequence_id=}) no-repeat center center / cover;
「設置先毎CSS」は、ページ内に設置した回数分出力がされるため、
入力項目からCSSへ反映をする場合には「共通CSS」に書いていただければ
画像や背景色等を変更可能です。
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
記事出力内に以下の記述を入れて頂くことで実装可能です。(HTML、CSSは適宜変更お願いします)
{d:datastore(
'datastore'=>'setting'
,'id'=>(int)@directory
)}{d:foreach(@d:recordset)}
<span class="-w-ctgr">
<a href="{=htmlspecialchars(@d:url)=}">{=htmlspecialchars(@d:name)=}</a>
</span>
{/d:foreach}{/d:datastore}
下記が使用禁止となっております。
使用すると表示崩れや、予期せぬ不具合が発生する可能性がございます。
id , key , class , code , type , public_begin_datetime , public_end_datetime , last_update , display , session_sequence_id , session , session_key , session_id , parent
文字数制限せずにタグを省き文字のみ出力する場合は
下記記述を使用して頂ければと思います。
{=strip_tags(@コード)=}
- カテゴリ:
- 制作FAQ
- キーワード:
- アーティクルウィジェットリッチテキストエディタ
挿入した画像にクラス設定等可能ですので、
例えばfloatimage等のクラスを設定しておき、ウィジェット内や全レイアウト共通CSS等で下記指定を行うことで、テキストの回り込み設定が可能です。
.floatimage {
float: left;
}
document.function
document.~~~~ となる箇所では、
document→elementに置き換えて頂くと
動作対象を「そのページ内」ではなく「そのウィジェット」に閉じ込めることが可能です。
また、jQueryや外部プラグインの読み込みを行いたい場合には、CDN等を「外部依存CSS/JS」に記載いただく必要がございます。
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
OWLetでは複数個所、CSS記載できる箇所がございますが、
①全レイアウト共通設定CSS
②ウィジェット内CSS
③各レイアウト記述のCSS(上階層から順番に)
④各ページごとのCSS
の順番で読み込まれます。
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
下記のような記述で、rgba変換も可能となっております。
{=rgba(resource('colors','base'),0.5)=}
◆フィールドセットでの背景画像の適用
①テンプレート内:
フィールドセット内、適用したい箇所を特定するため、
下記のクラスを設定します。
-w-img{=@id=}
②設置先毎CSS:
{fs624:fieldset_query(
@parts:id,@parts:datastore,'fieldset'
)}{fs624:foreach(@fs624:recordset)}
.-w-img{=@id=} {
background: url(/_img/{=current_lang()=}/{=@fs624:datastore=}/{=@fs624:id=}/image/___/session/{=@fs624:session_sequence_id=});
background-size: cover;
background-position: center center;
text-align: left;
}
{/fs624:foreach}{/fs624:fieldset_query}
③設置先毎CSS解説:
通常の「入力項目から背景画像に」の記述の「parts:」部分が
フィールドセットの開始記述部分の「fs624:」になります。
/_img/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/image/___/session/{=@parts:session_sequence_id=}
↓
/_img/{=current_lang()=}/{=@fs624:datastore=}/{=@fs624:id=}/image/___/session/{=@fs624:session_sequence_id=}
◆全体を囲っている要素への背景画像指定について
これについては、フィールドセット内ではなく、
通常の入力項目であれば指定可能です。
要素の指定無く、CSS記述欄に「background:~~」から
記述を始めていただければと思います。
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
リソースでのif文について
こちら、可能です。
{識別子:if(strlen(owlet_dsl::resource('リソースグループ','リソース項目')))}
入力があるときの内容
{/識別子:if}
{識別子:if(!strlen(owlet_dsl::resource('リソースグループ','リソース項目')))}
入力がないときの内容
{/識別子:if}
上記のように、
owlet_dsl::resource('リソースグループ','リソース項目'))
の形で入れ込みます。