OWLetに関わるご質問にお答えするなんでもFAQのページ

<div data-w-width="{=@width:limit=}">

</div>

この記述を入れると、ウィジェット設置時に
「コンテンツ幅を選んでの設置」をする選択肢が出るようになります。
全レイアウト共通CSS等で、下記記述を入れてみてください。
/*ウィンドウ幅での設置*/
[data-w-width] {
    max-width: 100%;
}

/*コンテンツ幅での設置*/
[data-w-width="1"] {
    width: 1200px;
    margin: 0 auto;
}

各ページのSEO設定と連動する記述です。
ヘッダー内に埋め込みます。
OWLetに関わるご質問にお答えするなんでもFAQのページと記述します。

カッコが違う理由として…
これは入力項目等の「変数」とはデータの引き出し場所が異なるため。

※OWLetでは、h1設置を推奨しています

◆記述例
<h1>OWLetに関わるご質問にお答えするなんでもFAQのページ</h1>

複数条件の場合

{hoge:if(strlen(@hoge || @hoge2))}
<p>条件１ hogeかhoge2あり</p>
{/hoge:if}

{hoge:if(strlen(@hoge && @hoge2))}
<p>条件２ hogeもhoge2も両方あり</p>
{/hoge:if}

{hoge:if(!strlen(@hoge ||  @hoge2))}
<p>条件３ hogeもhoge2も両方なし</p>
{/hoge:if}

{hoge:if(!strlen(@hoge &&  @hoge2))}
<p>条件４ hogeかhoge2がない</p>
{/hoge:if}

識別子は半角英数字で設定。パーツ内でかぶらないようにする。
ifの中の変数は'..'に変更しなくてよい。

下記記述で「その他あり」が表示されます。

{=parse_checkbox(@fuku,',',@fuku_etc)=}

下記記述で「その他あり」が表示されます。

{=sel_text(@tan,@tan_etc)=}

altのファイル名出力はウィジェットのみ動作します。

alt="{=(strlen(@hoge_alt)?htmlspecialchars(@hoge_alt):preg_replace('/(.*)\..*$/','$1',@hoge))=}"

画像を別タブで開き、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/

OWLet独自要素の「::self」を使う事で自要素の参照が可能です。
開始タグに設定したid、classを活用や
疑似要素指定をしたい場合は、下記の記述になります。

::self.hoge {
    ○○○
}
::self:before {
    ●●●
}

開始記述と閉じの記述で囲んで表現することが可能です。

<!--画像の入稿がある時-->
{img:if(strlen(@image1))}
<img class="img1" src="/_img/{=current_lang()=}/{=@article123:datastore=}/{=@article123:id=}/image1/__/" alt="{=(strlen(@article123:image1_alt)?htmlspecialchars(@article123:image1_alt):preg_replace('/(.*)\..*$/','$1',@article123:image1))=}" />
{/img:if}

<!--画像の入稿が無い時 !が付きます-->
{bunki2:if(!strlen(@image1))}
<img src="/assets/img/logo.png" alt="noimage">
{/bunki2:if}

同じウィジェットで異なる画像を設定・設置する場合ですが、
「共通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」に書いていただければ
画像や背景色等を変更可能です。

同じウィジェットで異なる画像を設定・設置する場合ですが、
「共通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」に書いていただければ
画像や背景色等を変更可能です。

当該箇所のリッチテキストの出力記述が
下記になっておりませんでしょうか。

{=htmlspecialchars(@text)=}

上記ですと、入稿いただいた内容を
HTMLエンティティに変換する記述となっており、
リッチテキストのように標準で<p>タグ等が入る入力タイプでは
思った通りの表示になりません。

（複数行テキスト、一行テキストでの記述となります。）

リッチテキストでは、下記記述にしていただくことで、
エディタ内「ソース」表示でのHTMLタグの使用が可能です。

{=@text=}

また、HTMLタグをがっつり使うタイミングでは、
「複数行テキスト」の項目にして、自動生成コードの
{=htmlspecialchars(@●●●)=} を⇒ {=@●●●=}
にしていただくことでその他のタグ等もご使用いただけます。
（マップや動画の埋め込み時に使用している内容です！）

当該箇所のリッチテキストの出力記述が
下記になっておりませんでしょうか。

{=htmlspecialchars(@text)=}

上記ですと、入稿いただいた内容を
HTMLエンティティに変換する記述となっており、
リッチテキストのように標準で<p>タグ等が入る入力タイプでは
思った通りの表示になりません。

（複数行テキスト、一行テキストでの記述となります。）

リッチテキストでは、下記記述にしていただくことで、
エディタ内「ソース」表示でのHTMLタグの使用が可能です。

{=@text=}

また、HTMLタグをがっつり使うタイミングでは、
「複数行テキスト」の項目にして、自動生成コードの
{=htmlspecialchars(@●●●)=} を⇒ {=@●●●=}
にしていただくことでその他のタグ等もご使用いただけます。
（マップや動画の埋め込み時に使用している内容です！）

記事出力内に以下の記述を入れて頂くことで実装可能です。（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}

記事出力内に以下の記述を入れて頂くことで実装可能です。（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}

「fieldset_query」と「foreach」の間に
{識別子:if(count(@recordset))}
{/識別子:if}
の記述を入れることで、その内部はフィールドセットの入力が
１つ以上あった場合のみ出力されます。

{fs123:fieldset_query(
@article:id,@article:datastore,'hoge'
)}
{fs123:if(count(@recordset))}
【この部分に<section>タグ等】
{fs123:foreach(@fs123:recordset)}

～～フィールドセット内部～～

{/fs123:foreach}
【この部分に</section>タグ等】
{/fs123:if}{/fs123:fieldset_query}

下記が使用禁止となっております。
使用すると表示崩れや、予期せぬ不具合が発生する可能性がございます。

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(@コード)=}

リッチテキストでの文字数制限の記述は下記のようになります。
途中のリンクタグや画像タグを省き表示されます。

60バイト以上の文字を...
と省略する場合
{=ret(richtext_strimwidth(@コード名,0,60,'...'))=}

ちなみに、文字数制限せずにタグを省き文字のみ出力する場合は
下記記述を使用して頂ければと思います。
{=strip_tags(@text)=}

方法としては、2種類ございます。

あくまで「このページコンテンツを再現する」で良い場合には、
ウィジェット内に同HTML、CSSを入れ込んでいただくことで再現可能かと存じます。
その場合は、ご希望のレイアウト内にコンテンツ表示ができます。

HTML、CSSファイルのアップロード、の場合は、ページ編集モード内「ファイル」メニューより、
「ファイルアップロード」ボタンを押して必要ファイルのアップロードが可能です。
「ディレクトリ」の作成をして階層を分けてアップすることも可能です。
https://ドメイン/アップしたファイル名.html
でページ表示がされるようになりますが、OWLet上でのページ編集は不可（ファイル再アップで更新可能）となります。