キーワード検索
FAQのカテゴリ一覧
よくある質問キーワード
最近よくあるFAQ一覧
下記が使用禁止となっております。
使用すると表示崩れや、予期せぬ不具合が発生する可能性がございます。
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
- キーワード:
- アーティクルウィジェットリッチテキストエディタ
リッチテキストでの文字数制限の記述は下記のようになります。
途中のリンクタグや画像タグを省き表示されます。
60バイト以上の文字を...
と省略する場合
{=ret(richtext_strimwidth(@コード名,0,60,'...'))=}
ちなみに、文字数制限せずにタグを省き文字のみ出力する場合は
下記記述を使用して頂ければと思います。
{=strip_tags(@text)=}
- カテゴリ:
- 制作FAQ
- キーワード:
- リッチテキストエディタ
方法としては、2種類ございます。
あくまで「このページコンテンツを再現する」で良い場合には、
ウィジェット内に同HTML、CSSを入れ込んでいただくことで再現可能かと存じます。
その場合は、ご希望のレイアウト内にコンテンツ表示ができます。
HTML、CSSファイルのアップロード、の場合は、ページ編集モード内「ファイル」メニューより、
「ファイルアップロード」ボタンを押して必要ファイルのアップロードが可能です。
「ディレクトリ」の作成をして階層を分けてアップすることも可能です。
https://ドメイン/アップしたファイル名.html
でページ表示がされるようになりますが、OWLet上でのページ編集は不可(ファイル再アップで更新可能)となります。
- カテゴリ:
- 制作FAQ
- キーワード:
- ファイルアップロード
挿入した画像にクラス設定等可能ですので、
例えばfloatimage等のクラスを設定しておき、ウィジェット内や全レイアウト共通CSS等で下記指定を行うことで、テキストの回り込み設定が可能です。
.floatimage {
float: left;
}
編集中に関しては、プレビューウィンドウで各ページごとの確認、となります。
編集内容を公開した後については、「シークレットウィンドウ」や、別ブラウザ(Chromeで作業している場合はFirefox等)でご確認いただけます。
- カテゴリ:
- 制作FAQ
- キーワード:
- ページ編集
可能です。
しかし、「同じページの同じウィジェットの入力内容」、「同じウィジェットのウィジェット編集画面」等を編集していた場合は、後から公開した人の作業内容のみが残る形になります。
そのため、作業時はお互いに別の箇所を編集するなど注意していただければと思います。
- カテゴリ:
- 制作FAQ
- キーワード:
- ページ編集
document.function
document.~~~~ となる箇所では、
document→elementに置き換えて頂くと
動作対象を「そのページ内」ではなく「そのウィジェット」に閉じ込めることが可能です。
また、jQueryや外部プラグインの読み込みを行いたい場合には、CDN等を「外部依存CSS/JS」に記載いただく必要がございます。
- カテゴリ:
- 制作FAQ
- キーワード:
- ウィジェット
最上階層のレイアウト(baseやroot 等の名前になっているかと思います)の編集画面にて、
「外部CSS/JS」タブから読み込みをします。
その上で、「CSS/JS/画像」欄にて、body等へfont-family指定を行うことが可能です。
- カテゴリ:
- 制作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('リソースグループ','リソース項目'))
の形で入れ込みます。
原因として想定できることが2点ございます。
①jQuery本体は読み込まれているでしょうか。
以前のバージョンですと、OWLet標準でjQueryの2.1.4が読み込まれておりましたが、現バージョンでは、好きなバージョンを読み込めるようになり初期状態では読み込まれていません。
②レイアウトの外部JSでjQueryを読み込み、
各ウィジェットの編集画面の「外部JS」でライブラリを読み込んだ場合、最終的な出力として、jQueryが後から読み込まれます。
そのため、ライブラリの挙動が動作しないことが考えられます。
対処法ですが、
ウィジェットの編集画面にて、
jQueryとライブラリ どちらも読み込みをお願い致します。
同じパスのファイルを読み込んだパーツが同じページに複数置かれても、一度しか出力されません。
異なるバージョンのjQueryを使用したパーツを作ることがある場合は設置時にご注意ください。
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'=>@contents:_code
- カテゴリ:
- 制作FAQ
- キーワード:
- ディレクトリ
アーティクルの開始タグに下記を追加することで、特定のディレクトリの記事のみ表示させることが可能です。
,'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」にしております。