広報室でなにしたの?そんな疑問にお答えします!
そろそろ広報室でのインターンが終わりに近づいてきました。
そこで今回は、私が実際に関わった業務のひとつにスポットを当て、詳しくお話します!
はじめに
今回お話しするのは、ずばり、
私たちインターン生が企画し、制作・更新まで携わるコンテンツ、
「学生必見!インターン生にきいてみた‼」
についてです!
実際にインターンとしてガーディアンで働いているからこそ発信できる情報を伝えたい!
をモットーに、どういったページにするかを考えるところから、
OWLetを使って実際にページを作るところまで、
どんなことをしたのかをご紹介していきます!
工程その1:案を出す
初めに取り掛かったのは、「案を出すこと」。
不要紙の裏を使い、真っ白な紙にシャーペンで案をかいていきました。
学生さんに見てもらえるページにするにはどうすればいいんだろうか・・・と悩みながら、やっとこさ出来上がった案がこちら。
意識したのは、とにかく「親しみやすい」ページであること。
気軽に知りたい情報が得られるページになるように、気を付けました。
募集資格や給与などについてはすでに説明されているページがあったので、
このページでは私たちインターンの生の声を伝えたい!
と思いながら、案を作成しました。
工程その2:社員さんからのフィードバック
工程その1で作成した案を提出したところ、
広報の清水さんとデザイナーの邱さんのお二人から
「私が作成した案に対するフィードバック」をいただくことになりました。
お二人から意見をいただいたところ、たくさんの修正すべき点が明らかに!
例えば、手段について。
皆さんはこのページを、なんの機器を使って見ていらっしゃいますか?
私は案を作成していた際、自然とパソコンで見ることを前提としていました。
(案をかく時にパソコンで開いたページを参考にしていたので・・・)
しかしながら、「何を使ってこのページを見る?」と質問され、ハッとしました。
多くの学生さんは、ちょっと調べ物をしたいとき、わざわざパソコンを立ち上げませんよね。
それに気づき、スマートフォンを使ってページを見ていることを前提にした案を作成しなおすことに。
手段のことは、自分一人ではちっとも思いつかなかったことのひとつでした。
工程その3:意見のすりあわせ
同様の工程を同じインターン生の萩下さんも同時期に行っていたので、
次に取り掛かったのは私たちの意見の「すりあわせ」。
萩下さんの案とフィードバックされた内容、私の案とフィードバックされた内容をお互いに共有し、ひとつの案を作り上げます。
二人で話してみると、内容が全く違うことに驚き!
例えばメンバー紹介について、
私はただ写真や学校名をかくだけでよいかな~と思っていたのですが、
萩下さんはポケモン図鑑風の自己紹介を入れることを提案。
そんなこと全く思いつきませんでした!いただき!
社員さんからのフィードバックを踏まえたうえで、二人の案を合わせ、
最終的な案が決定しました!
事前にAJAXフォームを作成して頂き、
①管理画面>設定>フォーム の各フォーム基本設定にて、
「AJAXフォームを使用する」にチェックを入れます。
フォームコードや入力項目、通知メール設定は通常通り行います。
②フォーム送信完了の際に表示するページを別途作成します。
(コンバージョンタグの埋め込み等に使うサンクスページ)
これは、通常の下層ページです。
②作成したパーツを好きな位置に設置します。
設置後、鉛筆ボタンから、
①で基本設定に入れた「フォームコード」
②で作成した「完了画面用のページURL」
を入力し、登録します。
/_sys/環境にてログインして頂き、
ページ編集モード>レイアウト>新規レイアウト作成>レイアウトにアーティクル対応ウィジェットを設置
下記ページにて、サイトマップで選択するための「ページ種別」をセットすることが可能です。
/_sys/setting/page_type/
これをして頂くことで/director/環境にてページ種別にて追加したアーティクルが選択できるようになります。
※/_sys/環境の管理画面より記事を事前に投稿しておくことが可能です。
OWLet化時には記事登録日が以降日になってしますので注意が必要です。
アーティクルの入力項目をdescriptionとして出力する方法は以下になります。
(白い管理画面でdescription設定まで完了させる方法)
①設定>アーティクル>入力項目と出力テンプレート
アーティクルの入力項目にdescription入力欄を追加
例)
項目名:description
コード:description
入力タイプ:複数行テキスト
②設定>アーティクル>入力項目と出力テンプレート
入力項目設定の下部にある、「出力テンプレート」の+ボタンをクリック
③出力先「headタグ内」のまま、
入力欄に下記を記述して登録(コードは適宜変更。description等)
<meta name="description" content=“{=@contents:コード=}">
jsに入力項目を使用する際、いくつかのパターンがございます。
1)テンプレート 及び 共通JavaScript欄の併用
①入力項目「hoge」を作成します
②テンプレートの開始タグ部分に
data-hoge="{=@hoge=}"
を記述します
例)<div data-hoge="{=@hoge=}">となる形
③共通テンプレート内に
let hoge=element.getAttribute('data-hoge');
を記述することで、変数hogeに値が入ります
2)テンプレート内にscript記述の実施
3)AJAXテンプレート内で記述
→こちらは記述が複雑となるため、推奨しておりません。。
{a:datastore(
'ds'=>'article'
,'class'=>['article'=>'%']
~……
}
の中に入れ込むのですが、
入れ込めるオプションの形式がいくつかあります。
★これで「testnumber」という項目の値が「1000」の記事のみが出ます。
決め打ちする場合です。
,'search'=>['testnumber'=>['match'=>1000]]
★「testnumber」の項目をタグのように、URLで絞り込み表示できます。
/blog/?hoge=1000 など。hogeは好きな文言に変更してください。
,'search'=>['testnumber'=>['match'=>$_GET['hoge']]]
★「testnumber」の項目を順番並び替えに使う場合です。
先に定義しておき、並び替えに使っています。
,'kv'=>['testnumber'=>'testnumber']
,'order'=>'testnumber.value ASC,ds.id ASC'
1行目で〇月〇日までの記述となっており、
2行目で曜日配列を行い、
3行目で曜日(変数w)を出力し、
2~3行目を()で囲むことにより(曜日)となっております。
「ALL」のような出力ですが、こちら、
ディレクトリ一覧パーツ内に一覧ページ(/blog/)へのリンクを
追加で入れる形となります。
■入力項目を追加
・リンクURLの入力欄を一行テキストで追加(href など)
・リンクテキストの入力欄を一行テキストで追加(link_text など)
■デフォルト値に一覧ページURL、リンクテキストの入稿
■テンプレート内に「単純出力」のコードで入れ込み
<a href="{=@href=}>{=@link_text=}</a>
<!--ディレクトリ出力-->
{d:~~~~以下、今入っている記述
①サイト内全ページへ設置する場合(添付画像をご参照ください)
1)レイアウトメニューから、最上階層のレイアウト編集画面を開きます。
2)画面左側、パーツエリアの基本パーツ「テキスト」を
画面右側、ツリーエリアの最下部に設置します。
出てきたダイアログ内に、スクリプトを記述します。
※最上階層のレイアウトが複数ある場合は、それぞれのレイアウトで設置が必要です。
※基本パーツ「テキスト」で設置せず
スクリプト埋め込み用のウィジェットを作ってもかまいません。
「入力タイプ:複数行テキスト」で項目を作り、テンプレート内に{=@コード=}を記述するだけです。
---
②単独ページのみ設置する場合
ページにも①同様に、最下部に設置を行いたいですが、
</body>直上に設置するための継承エリアがありません。
まずこちらを作る必要があります。
1)レイアウトメニューから、最上階層のレイアウト編集画面を開き、
設置領域の最下部に継承エリアを設置します。
「body閉じタグ直上」など、分かりやすい名前にします。
2)1つ下層のレイアウトに移動すると、画面右側のツリー下部に
「body閉じタグ直上」という設置領域ができています。
ここに、同じように「body閉じタグ直上」という名前で継承エリアを置きます。
ページで使用するレイアウトにたどり着くまで、これを繰り返します。
3)スクリプトの埋め込みをしたいページを開き、
「body閉じタグ直上」のエリア内に、
基本パーツ内「テキスト」またはスクリプト埋め込み用に作成したウィジェットを設置し、記述します。
①ウィジェット内に、入力タイプが「ファイル」の項目を1つ作ります。
②画面を一度更新し、「デフォルト値」に動画ファイルを入れます。
ファイルサイズが上限を超えていないか、ご注意ください。
③テンプレートに下記を貼り付け、「入力項目コード」を①の項目のコードに合わせます。
<video src="/_file/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/入力項目コード/" loop autoplay muted playsinline></video>
④動画がうまく出ない場合は、データ読み込みのため、一度「編集内容の公開」を行ってください。
※ウィジェットを作成する際、「基本設定」の「タグ」で
REVOLUTIONで探しやすいタグをつけ、その後「編集内容の公開」をします。
付けるタグは「動画パーツ」等で良いかと思います。
REVOLUTIONで設置する際、「全てのパーツ」の中にこのタグが出ます。
※見た目は調整頂く必要があります。
YouTubeで動画設置をしているウィジェットを参考にしていただくと良いかもしれません。
(iframe {~~~} の指定をvideo {~~~} にしていただくなど
headタグへのmeta refresh指定にて、実施いただければと思います。
例えばトップページや、レイアウトなどのheadタグ記述欄へ下記を入れ込みます。
<meta http-equiv="refresh" content="3;URL=https://www.sample.com">
3秒後にhttps://www.sample.com へ遷移するように設定可能です。
「一行テキスト」等で設定した内容を入れ込む場合には、
コード生成時に「ピース編集」ではなく
「単純出力」で生成したコードを入れ込んでいただくことで実装可能です。
(margin: {=htmlspecialchars(@コード)=}; のような形です)
「一行テキスト」等で設定した内容を入れ込む場合には、
コード生成時に「ピース編集」ではなく
「単純出力」で生成したコードを入れ込んでいただくことで実装可能です。
HTMLタグパーツ:<img src="/_img/ja/setting/{=@directory=}/コード/100_100_1_000000/session/0/">
テキストパーツ:<img src="/_img/ja/setting/[*@directory*]/コード/100_100_1_000000/session/0/">
「コード」の部分を置き換えてください。
@directoryの部分でディレクトリidが出力されます。
articleブロックに ,'tag'=>unserialize(@tag_●) 追加
下記記述で、日付の月を英語表記にすることができます。
◆表示例
2015年7月31日の場合
july/31/2015
下記記述で、月日の先頭の0を表示させないことが可能です。
下記記述で、日付の年を西暦下二桁で表示することが可能です。
下記記述で、日付を西暦で年月日表示することが可能です。
記事詳細ページのURLが出力されます。
詳細ページでの記事タイトルの表示の記述です。
記事詳細ページのURLが出力されます。
記事詳細有無に関わらず、記事タイトルのみ表示されます。
記事詳細がある場合、記事タイトルにリンクが付与されます。
入力内容にタグが含まれていた場合、それを除去します
「あああ<BR>あああ」と入力された場合、「ああああああ」と出力されます。
入力内容にタグを除去しつつ
複数行テキスト内の改行を反映する書き方です。
◆設定画面
管理画面>設定>アーティクル>当該アーティクル にて、
「入力項目と出力テンプレート」へと進み、
ページ中ほどの「出力テンプレート」にて
headタグ内にアーティクル投稿画像がog:imageに設定されるよう記述をします。
(headタグ内などに入力項目の内容を反映させるための機能です)
◆記述内容
出力先を「headタグ内」に設定し、og:image設定のための下記記述を入れます。
<meta name="og:image" content="画像パス">
「画像パス」部分には、アーティクル記事の画像を出力するため下記を入れています。
https://{=$_SERVER['SERVER_NAME']=}/_img/{=current_lang()=}/{=@contents:datastore=}/{=@contents:id=}/■■■/500_500_1_ffffff/
「■■■」部分を該当アーティクルの画像項目のコードに変更し、完了です。
既にFacebookにシェアをしたことのある投稿での表示画像に関しては、
Facebookの下記サービスページにて再度記事URLを読み込み直す必要がございます。
https://developers.facebook.com/tools/debug/
下記手順で行います。
①カスタマイズするフォーム用の個別レイアウトを作成
管理画面では、そのレイアウトでフォーム作成されるよう指定
②カスタマイズするフォーム用のウィジェットを作成
添付のウィジェットをカスタマイズします。
「入力画面」「確認画面」の出力内容をそれぞれ設定する必要があります。
サンプルパーツをインポートし、以下の記述を編集してください
articleブロックに記述を追加します。
◆◆部分にはタググループコード、
●部分には、管理画面>設定>タグ一覧 で絞り込むタグの入力欄まわりを
検証ツールで確認し、該当タググループのidを特定して入れ込みます。
「複数行テキスト」にし、自動コード生成の{=htmlspecialchars(@入力項目のコード=}の形から、htmlspecialchars()を抜いた{=@入力項目のコード=}の形で出力が可能です。
管理画面内のアーティクル設定にて入力項目を追加し「ファイル」
詳細ページ用のコードを生成し、詳細用ページに記載。
入力タイプ「ファイル」を使用することで、PDFファイルのアップが可能です。
リンクパス内の「2」は、「1」に変更していただくことで
ダウンロードする形にも変更できます。
アーティクル詳細出力用のウィジェット内、
「article:datastore」ブロックの中に、
,'term'=>in_cms_mode()?'all':'public'
という一行を追加していただくことで、
未来日の記事も表示確認が可能です。
下記の記述で可能です。
可能です。
下記、記述例になります。
入力項目:単一選択
項目:
そのまま開く:off
別タブで開く:on
コード:target
下記のように記述することで可能です。
コード:aaa
入力値:あああ
下記記述で三項演算子を使用することができます。
下記記述でif文を使用することができます。
変数を定義し、条件分岐することができます。
フィールドセットの中にフィールドセットの項目がある場合の記述です。
◆記述例
グローバルナビをフィールドセットで作り、そのサブメニューをフィールドセットにする場合の例になります。
※ネストの開始には@識別子①が入る。
下記のように記述してください
下記のように記述することで、CSSプロパティを含め出力することができ、未入力時は出力されません。
下記のように記述することで出力できます。
{=rgba(resource('リソースグループコード','コード'),0.5)=}
下記のように記述することで出力できます。
{=resource('リソースグループコード','コード')=}
入力項目でページネーションを表示させるかどうかの単一選択項目を作成します。
コード:pager_onoff
日本語名前:ページャー表示
入力タイプ:単一選択
ーーー
選択肢設定
①value:off 日本語:表示しない
②value:on 日本語:表示する
記事詳細レイアウトに、「他の記事を見る」のようなコンテンツを出したい場合に、「今開いている記事は表示しない」ようにする記述方法です。
ディレクトリごとに入力項目を設定したい場合に使用します。
hoge の部分は任意の文字列で統一
コードは入力項目のコード
{hoge:datastore(
'datastore'=>'setting'
,'class'=>array('directory'=>'%')
,'parent'=>array('164.setting')
)}
{hoge:foreach(@hoge:recordset)}
{=hoge:コード=}
{/hoge:foreach}
{/hoge:datastore}
入力項目「アーティクル」を設定を設定することで、アーティクル間連動が可能です。
アーティクル記事の中に他のアーティクルの情報を引っ張ってくることができます。
◆記述例
{a:datastore(
'datastore'=>'article'
,'class'=>array('article'=>'%')
,'id'=>(int)$param['article:member']
)}{a:foreach(@a:recordset)}<div class="-w-column-prf">
<div class="-w-image">
<img src="/_img/ja/article/{=@a:id=}/pic_roll_off/_/" alt="{=htmlspecialchars(@a:title)=}" />
</div>
<div class="-w-contents">
<p class="-w-position">{=nl2br(@a:post)=}</p>
<p class="-w-name">{=htmlspecialchars(@a:title)=}</p>
<div class="-w-profile">
{=nl2br(@a:works)=}
</div>
</div>
</div>{/a:foreach}{/a:datastore}
ウィジェットで特定の記事詳細データを出すことが可能です。(設置時にどの記事か選択する)
リソース機能ではなくアーティクルで「店舗情報」を作成したときなどに便利です。
{識別子:datastore(
'ds'=>'article'
,'id'=>(int)$param['parts:入力項目がアーティクルの入力項目のコード']
)}{識別子:foreach(@識別子:recordset)}
<!--表示されるのここから-->
タイトル:{=htmlspecialchars(@識別子:title)=}
その他の入力項目の値:{=htmlspecialchars(@識別子:入力項目のコード)=}
<!--ここまで-->
{/識別子:foreach}{/識別子:datastore}
カテゴリ絞り込みをした結果記事が0件だった、という場合など、CSSへの記載で「記事は0件です」等の表示ができます。
※OWLet独自の機能ではありません。
◆記述例
ul.-w-article_list:empty::before {
content: "記事はありません";
width: 100%;
text-align: center;
margin-left: 5rem;
}
===============
articleブロックに ,'tag'=>unserialize(@tag_●) 追加
===============
<ul>
{same_tag:article(
'code'=>'columnTest'
'tag'=>['special'=>unserialize(@tag_●)]
)}
<li><a href="{=@detail_page:url=}">{=htmlspecialchars(@name)=}</a></li>{/same_tag:article}
</ul>
下記記述で、日付の月を英語表記にすることができます。
[*date(@public_begin_datetime,'M/d/Y')*]
◆表示例
2015年7月31日の場合
july/31/2015
下記記述で、月日の先頭の0を表示させないことが可能です。
[*date(@public_begin_datetime,'n/j')*]
下記記述で、日付の年を西暦下二桁で表示することが可能です。
[*date(@public_begin_datetime,'y/m/d')*]
下記記述で、日付を西暦で年月日表示することが可能です。
[*date(@public_begin_datetime,'Y/m/d')*]
記事詳細ページのURLが出力されます。
[*@contents:detail_page:url*]
詳細ページでの記事タイトルの表示の記述です。
[*@contents:title*]
下記記述でファイルを開くことが可能です。(PDFファイルのみ)
/_file/ja/article/[*@id*]/コード/2/
◆記述例
<a href="/_file/ja/article/[*@id*]/コード/2/">ファイルを開く</a>
コードの前に@不要
下記記述でファイルダウンロード可能です。
/_file/ja/article/[*@id*]/コード/1/
◆記述例
<a href="/_file/ja/article/[*@id*]/コード/1/">ファイルをダウンロード</a>
コードの前に@不要
記事詳細ページのURLが出力されます。
[*@detail_page:url*]
記事詳細有無に関わらず、記事タイトルのみ表示されます。
[*@title_without_link*]
記事詳細がある場合、記事タイトルにリンクが付与されます。
[*@title*]
入力内容にタグを除去しつつ
複数行テキスト内の改行を反映する書き方です。
{=nl2br(htmlspecialchars(@hoge))=
下記のように記述することで可能です。
コード:aaa
入力値:あああ
◆記述例
{d:def(
'aaa'=>1
)}
{=@aaa=}
{/d:def}
{=@aaa=}
◆出力例
1 あああ
アーティクル開始タグにページャー出力用の記述を追加します。
,'pagination_placeholder'=>'article_pagination'
アーティクル開始部分に左記の記述を入れることで、ページャーの出力制限が可能です。制限数は自由に設定できます。
,'pager_scope_limit'=>2
◆例
{article(
'code'=>"アーティクルコード"
,'display_count'=>"表示件数半角数字"
,'order'=>"アーティクル並び順の変数"
,'pagination_placeholder'=>'article_pagination'
,'pager_scope_limit'=>2
)}
{/article}
[*article_pagination*]
下記記述がアーティクル表示順の各設定方法になります。
コード: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_select:「表示記事」を「一行テキスト」で入力項目作成
→アーティクルコード指定ができる
@count:「記事件数」を「一行テキスト」で入力項目作成
→記事件数が表示できる
@order:「表示順」を「単一選択」で作成し、
↓下記項目の「アーティクル並び順」からvalueに「ds.id DESC」日本語名に「id降順」を入れる、という感じです
{article(
'code'=>@article_select
,'display_count'=>@count
,'order'=>@order
)}
{article:fieldset(@article:id,'article','menu')}
<tr>
<th>{=@title=}</th>
<td>{=nl2br(htmlspecialchars(@price))=}</td>
</tr>
{/article:fieldset}
{/article}
下記記述をウィジェットパーツ内に記述することで、パンくずの出力が可能です。
HTML部分の変更は行って問題ありません。
◆例
{d:def(
'pos'=>function(){
static $s_pos=0;
return ++$s_pos;
}
)}<nav id="breadcrumb"><ol itemscope itemtype="http://schema.org/BreadcrumbList">
{i:if(@page:id)}
{r:recursive(
'var'=>array(
'id'=>@page:id
,'url'=>@url:url
)
)}{page:datastore(
'ds'=>'page'
,'class'=>array('page'=>'%')
,'fields'=>array(
"CONCAT(ifnull(GROUP_CONCAT(purl.value ORDER BY ppath.akey+0 ASC SEPARATOR ''),''),url.value,'%')"=>'url_like'
,"CONCAT(ifnull(GROUP_CONCAT(purl.value ORDER BY ppath.akey+0 ASC SEPARATOR ''),''),url.value)"=>'url'
,'name.value'=>'name'
)
,'kv'=>array(
'url'=>'url','is_dummy'=>'is_dummy','name'=>'name'
)
,'join'=>
"LEFT JOIN page_kv_array AS ppath ON ppath.id=ds.id AND ppath.key='parent_path'
LEFT JOIN page_kv AS purl ON purl.key='url' AND ppath.avalue=purl.id"
,'where'=>"ds.id<>".((int)@r:var['id'])." AND (is_dummy.value IS NULL OR is_dummy.value<>1)"
,'group by'=>'ds.id'
,'having'=>"LENGTH(url)<".strlen(@r:var['url'])." AND '".GDB::escape(@r:var['url'])."' LIKE url_like"
,'order'=>'url DESC'
,'display_count'=>1
,'term'=>'all'
)}{page:foreach(@page:recordset)}{=@r:recursive(array(
'id'=>@page:id
,'url'=>@page:url
))=}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{=@page:url=}"><span itemprop="name">{=htmlspecialchars(@page:name)=}</span></a>
<meta itemprop="position" content="{=@d:pos()=}">
</li>{/page:foreach}{/page:datastore}{/r:recursive}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">{=htmlspecialchars(@page:name)=}</span>
<meta itemprop="position" content="{=@d:pos()=}">
</li>
{/i:if}{i2:if(!@page:id)}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{=@page:url=}"><span itemprop="name">TOP</span></a>
<meta itemprop="position" content="{=@d:pos()=}">
</li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{=@page:url=}"><span itemprop="name">parents</span></a>
<meta itemprop="position" content="{=@d:pos()=}">
</li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">current</span>
<meta itemprop="position" content="{=@d:pos()=}">
</li>
{/i2:if}
</ol></nav>{/d:def}
設置先で、入力項目に入れた画像を背景画像として使う場合の記述例
(CSSで入力項目画像を使う場合)
コード:●●●
日本語名前:背景画像
入力タイプ:画像
という画像入力項目を作ります。
background:url(/_img/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/●●●/___/session/{=@parts:session_sequence_id=}) no-repeat center center / cover;
識別子は同じパーツ内で被らないものを半角英数字で指定してください。
{識別子:fieldset(@parts:id,@parts:datastore,'フィールドセットコード名')}
~
{/識別子:fieldset}
◆例
<ul>
{contents:fieldset(
@parts:id,@parts:datastore,'フィールドセットコード名'
)}
<li>
<p>{=@◆◆◆=}</p>
<div><img src="/_img/{=current_lang()=}/{=@parts:datastore=}/{=@id=}/●●●/_/{=@sess=}/" alt="{=@●●●_alt=}></div>
</li>
{/contents:fieldset}
</ul>
●●●には画像のコードが入ります。
<img src="/_img/{=current_lang()=}/{=@parts:datastore=}/{=@id=}/●●●/_/{=@sess=}/" alt="{=@●●●_alt=}">
ウィジェット内の固定画像で設定可能です。
お問い合わせコンテンツの電話番号画像など、パーツ内で変更しない画像はここで設定します。
◆例
赤い部分は画像出力時のサイズ、リサイズ方法、余白背景色を設定しています。
使用例:
<img src="{=lib_image_src(@lib:id,'fb073b18-ce14-4249-abc3-d76356bae1fb','100_100_1_000000')=}">
background: url('{=lib_image_src(@lib:id,'fb073b18-ce14-4249-abc3-d76356bae1fb','100_100_1_000000')=}');
設置したページのページ名を出力します。
ページタイトルデータを持たない箇所(レイアウトやウィジェット/_cms/preview/1/Lw==/)でも、代替テキストを出力できます。
{=strlen(@page:name)?htmlspecialchars(@page:name):'ページタイトルが入ります'=}
何回フィールドセットの入力がされているか(いくつ内包されているか)を出力することができます。
{=@record_count=}
ループの前にも使用できます。中身が1つの場合のclassと2つの場合のclassで分けることができます。
◆例
{fs2207:fieldset_query(
@parts:id,@parts:datastore,'contents'
)}<div class="-w-contents -w-contents{=@record_count=}">{fs2207:foreach(@fs2207:recordset)}
中身
{/fs2207:foreach}</div>{/fs2207:fieldset_query}
フィールドセットのループ内で、1つずつカウントしていく変数です。
{=@local_index=}
下記のように記載をすると、
1:~~~
2:~~~
3:~~~ の数字部分のような出力ができます。
◆例
{fs2244:fieldset_query(
@fs2207:id,@fs2207:datastore,'table'
)}<table>{fs2244:foreach(@fs2244:recordset)}
<tr>
<th>{=@local_index=}:</th>
<td>{=@td=}</td>
</tr>
{/fs2244:foreach}</table>{/fs2244:fieldset_query}
下記記述で可能です。
{d:def(
'aaa'=>1
)}
{=@aaa=}
{/d:def}
単一選択valueだった時のみ出力
OWLet2.0までのバージョン
{識別子:if(owlet_dsl::sel_text(@単一選択コード名) == '単一選択value')}
{/識別子:if}
単一選択valueだった時のみ出力
{識別子:if((@単一選択コード名) == '単一選択value')}
{/識別子:if}
内部の見出しレベルが下がらない場合の記述
パーツ内に2回以上領域を作る場合にはcont、cont2、…等、名前を変える
◆例
<div class="-x-cont">{[cont]}</div>
内部の見出しレベルが下がる場合の記述
パーツ内に2回以上領域を作る場合にはcont、cont2、…等、名前を変える
◆例
<div class="-x-cont">{[cont]1}</div>
下記記述で今いる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;
}
各ページのSEO設定と連動する記述です。
ヘッダー内に埋め込みます。
広報室でなにしたの?そんな疑問にお答えします! | BLOG | 次世代の世界標準プラットフォームへ "賢者のホームページ"OWLet(アウレット)と記述します。
カッコが違う理由として…
これは入力項目等の「変数」とはデータの引き出し場所が異なるため。
※OWLetでは、h1設置を推奨しています
◆記述例
<h1>広報室でなにしたの?そんな疑問にお答えします! | BLOG | 次世代の世界標準プラットフォームへ "賢者のホームページ"OWLet(アウレット)</h1>
複数条件の場合
{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の中の変数は'..'に変更しなくてよい。
下記記述で「その他あり」が表示されます。
{=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}
の記述を入れることで、その内部はフィールドセットの入力が
1つ以上あった場合のみ出力されます。
{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上でのページ編集は不可(ファイル再アップで更新可能)となります。
挿入した画像にクラス設定等可能ですので、
例えばfloatimage等のクラスを設定しておき、ウィジェット内や全レイアウト共通CSS等で下記指定を行うことで、テキストの回り込み設定が可能です。
.floatimage {
float: left;
}
編集中に関しては、プレビューウィンドウで各ページごとの確認、となります。
編集内容を公開した後については、「シークレットウィンドウ」や、別ブラウザ(Chromeで作業している場合はFirefox等)でご確認いただけます。
可能です。
しかし、「同じページの同じウィジェットの入力内容」、「同じウィジェットのウィジェット編集画面」等を編集していた場合は、後から公開した人の作業内容のみが残る形になります。
そのため、作業時はお互いに別の箇所を編集するなど注意していただければと思います。
セッション削除をしてしまった場合の未公開作業の復元はできません。
document.function
document.~~~~ となる箇所では、
document→elementに置き換えて頂くと
動作対象を「そのページ内」ではなく「そのウィジェット」に閉じ込めることが可能です。
また、jQueryや外部プラグインの読み込みを行いたい場合には、CDN等を「外部依存CSS/JS」に記載いただく必要がございます。
最上階層のレイアウト(baseやroot 等の名前になっているかと思います)の編集画面にて、
「外部CSS/JS」タブから読み込みをします。
その上で、「CSS/JS/画像」欄にて、body等へfont-family指定を行うことが可能です。
OWLetでは複数個所、CSS記載できる箇所がございますが、
①全レイアウト共通設定CSS
②ウィジェット内CSS
③各レイアウト記述のCSS(上階層から順番に)
④各ページごとのCSS
の順番で読み込まれます。
下記のような記述で、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:~~」から
記述を始めていただければと思います。
リソースでの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
アーティクルの開始タグに下記を追加することで、特定のディレクトリの記事のみ表示させることが可能です。
,'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">で呼び出しできます。
ウィジェットやアーティクル等で登録する画像に関しては
サーバーから削除され、新しい画像が登録されます。
ウィジェットやアーティクル等で登録する画像に関しては
サーバーから削除され、新しい画像が登録されます。
◆共通CSS
ウィジェットパーツごとのCSS設定
(通常は共通CSSに記述します)
◆設置先毎CSS
設置したパーツ単位での設定
(背景画像を入力項目で指定する場合などに使用します)
管理画面のファイル管理から、
指定のディレクトリを作成し、サイトのファイルをアップロードしていただくことで可能となります。
※PHPファイルはアップロードできません。
①ファイル名を出力したい場合
[*@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>
リソース設定で作成した項目は、ウィジェット内に記述することで出力可能です。
{=resource('リソースコード','入力項目単位のコード')=}
◆例
リソースコード:test
入力項目単位のコード:hoge
============================
{=resource('test','hoge')=}
============================
if文で条件分岐することが可能です
◆例
======================
{識別子:if(strlen(@hoge))}
{=@hoge=}
{/識別子:if}
======================
※識別子は半角英数字で設定し、パーツ内でかぶらないように設定。
googleのサイト内検索を設置する方法が早くて簡単です。
下記ページ等を参考に設置をしてみてください。
Googleカスタム検索エンジン
標準の機能では対応していないのですが、ご依頼いただければ
追加開発(有償)で実装が可能です。
もし、ご希望の場合はお見積りいたしますので、お問合せフォームよりご依頼ください。
カスタムパーツには「参照用」と「コピー用」の2種類があります。
「参照用」
設置先ページでのパーツを個別に編集する事は出来ませんが、元のカスタムパーツを編集すると設置先の
全てのカスタムパーツに編集内容が反映されます。
「コピー用」
元のカスタムパーツを編集しても設置先のページには反映されませんが、設置先のページにて通常パーツと
同様にパーツの編集が可能です。
ページで編集できないカスタムパーツは「参照用」です。
設置した参照用カスタムパーツは、通常のパーツとは編集の仕方が異なります。
ページ上部の「カスタムパーツ」ページから、各カスタムパーツを編集する事が出来ます。
sectionタグの階層によって、見出しレベルを変更することが可能です。
◆例
===============================
<section>
<h{=@cms_sectioning_inherit_count+1=}>
見出しテキスト
</h{=@cms_sectioning_inherit_count+1=}>
</section>
===============================
この場合「h2」となります
ウィジェットで入力項目「単一選択」でコード「test」を作成した場合の記述
{=sel_text(@test)=}
※「その他」を有効にしたい場合
{=sel_text(@test,@test_etc)=}
アーティクル、ウィジェットで設定した入力項目は、下記のように記述することで文字数制限することが可能です。
◆「text」というコードの場合
=================================
{=richtext_strimwidth(@コード, 0, 100, "...")=}
=================================
100バイト以降の文字は、出力されず...となります
詳細ページを持つアーティクル記事に関してもSEO解析の対象になっております。
・管理画面>report>SEOページ、
・ページ編集画面>ページ管理
に表示されるツリー一覧はアーティクル詳細までは出ないようになっています。
そのため、一覧に出る件数と、SEOチェック結果の件数には差異があります。
現状OWLetの標準仕様となります。
サーバスペックに関する情報は、下記の通りです。
[共用サーバ - 共通]
CPU:Xeon プロセッサ
コア数:2
メモリ:8GB
HDD:150GB
OS:Linux centOS
ネットワーク:100Mbps(ベストエフォート)
1サイトあたりPV目安:10万PV/月間
1サイトあたり目安分量:500MB(上限1.0GB)
自動返信メールに入力内容を表示するための変数は、入力項目の種類によって必要な記述が異なります。
(例)一行/複数行テキストの場合
[*@◯◯*]
(例)氏名の場合
[*@◯◯_sei*] [*@◯◯_mei*]
(例)電話番号の場合
[*@◯◯1*]-[*@◯◯2*]-[*@◯◯3*]
各フォームの入力項目を編集した場合は、自動返信メール側の変数表記も、変更後の入力タイプに対応した記述に訂正してください。
「アーティクルリスト」の「ループタグ」内に下記の通り記述してください。
<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*]">
↓リサイズモードの設定例です。
ショップ設定の商品情報登録項目設定と
商品種別設定の登録項目設定の使い分けとしては、
ショップ設定の商品情報登録項目設定は、
サイトの全ての商品の共通項目になります。
例えば、どのような商品であっても「商品管理コード」の登録は必要。
といった場合に利用します。
商品種別設定の登録項目設定は、
例えば「衣服」という商品種別と「サプリ」という商品種別があった場合、
「衣服」には「寸法」という入力欄が必要だがそれは「サプリ」には不要で、
「サプリ」には「成分」が必要という場合に使用します。
>#商品種別設定の登録項目設定だけでも十分でしょうか?
という点につきましては、
ショップ設定の商品情報登録項目設定と
商品種別設定の登録項目設定の使い分けを踏まえた上でご判断いただけますと幸いです。
エラーメッセージの内容的には、
「送信先メールサーバに何らかの理由で拒否されました。」というものです。
※「Recipient address rejected」等のエラーメッセージの部分で
検索してみると、一覧で表示されるサイトなどが出てきます。
★リンク「一覧で表示されるサイト」⇒ http://www.safetylink24.jp/support/mailcase/
メールアドレスに誤りがある可能性もございますが、
受信側のセキュリティによりメールが戻ってきてしまっていることも考えられます。
以前は送信できていたアドレスでも、
・内容(本文にURLが多数含まれる、スパムでよく使われる文言が含まれている、等)
・添付ファイル
等々により、はじかれるという事もございます。
受信側のメーラーのセキュリティ設定は変更になる場合もございますので、同じ受信者で発生する場合は、先方に設定をご確認ください。
エラーメッセージの内容的には、
「送信先メールサーバに何らかの理由で拒否されました。」というものです。
※「Recipient address rejected」等のエラーメッセージの部分で
検索してみると、一覧で表示されるサイトなどが出てきます。
★リンク「一覧で表示されるサイト」⇒ http://www.safetylink24.jp/support/mailcase/
メールアドレスに誤りがある可能性もございますが、
受信側のセキュリティによりメールが戻ってきてしまっていることも考えられます。
以前は送信できていたアドレスでも、
・内容(本文にURLが多数含まれる、スパムでよく使われる文言が含まれている、等)
・添付ファイル
等々により、はじかれるという事もございます。
受信側のメーラーのセキュリティ設定は変更になる場合もございますので、同じ受信者で発生する場合は、先方に設定をご確認ください。
本番環境を貴社専用のサーバとして立ち上げれば、
そのサーバのFTPを開示できるので貴社にて本番反映をしていただけます。
弊社共用サーバの場合、複数のクライアントが利用する特性上セキュリティー面・サーバ保守のために
FTP等のサーバへのアクセスは、弊社のサーバ保守を行う一部スタッフに限定しております。
そのため、ファイル反映は都度ご依頼頂く必要がございます。
貴社のWEBサイトは無償SSLのプランにご加入いただいております。
無償SSLをご利用いただくにあたり、
弊社で使用しているSSLのサブドメインとして扱う必要がございます。
「ssl.owlet.work」でSSLを取得しておりますため、
ページにSSLを設定すると、ご覧のようなURLになります。
本番ドメインに対して設定しており、
「owlet.work」がついたテスト環境ではございませんのでご安心ください。
弊社OWLetサービスはSaas型として、原則、弊社指定サーバでの稼働となります。
ご指定のサーバでの導入が必要な場合、インストール型での料金・サービスになります。
インストール型対応手数料として、下記追加費用が発生いたします。
(1)インストール型対応手数料 ※要お見積り
指定サーバでのOWLet稼働を保証するため、ミドルウェアや各種設定を含め、サーバへのインストール作業を代行致します。
(2)暗号化費用 500,000円(税別)~
弊社テクノロジーの機密保持のため、一部暗号化を施し、納品させていただきます。
そのため、インストール作業以降のOWLetバージョンアップ等の標準対応の保守サービスも対象外となりますので予めご了承ください。
また、インストールを行うにあたり、ご用意されるサーバにはいくつかの条件に当てはまる必要があります。
チェックPOINT1:レンタルサーバ契約の場合、安価な共有サーバプランではなく専用サーバ契約であること
チェックPOINT2:Linux系OSにて、root権限を持つSSH接続アカウントの提供がなされていること
チェックPOINT3:特殊なファイアウォール等、ネットワークセキュリティ設定により内外への通信が遮断もしくは制限されていないこと
上記ご確認の上、詳細については別途ご相談ください。
基本的にはJPG/PNGを推奨させていただいております。
SVG,GIFなどもアップは可能でございます。 ただし、OWLetには、画像パーツをリサイズできる機能がありまして、 サイズを変換した際に、内容が全て変換されなかった場合に 正常に表示されない可能性がございます。
リサイズ機能を使わない場合は SVG,GIFなどでも、正常に作動する割合が高いです。 恐れ入りますが、一部相性が悪く正常に作動しない可能性がございますことを、ご了承いただけますと幸いです。
画像パーツリサイズ機能とは? OWLetの中で画像の大きさを変換できる機能です。 例えば、300×250のサイズを200×100のサイズに比率を変更できる機能です。
はい、可能です。「ページ編集>ファイル管理」で可能となっております。サーバには容量制限がありますのでご注意ください。容量が多い動画はyoutubeにアップし、サイトにタグ埋め込みで表示させる方法を推奨しております。
タグ埋め込み方法に関しては別途お問い合わせ下さい。
弊社より提供しているサービスはCMS、HP運用となります。
サーバーに関するコントロールパネルはご用意しておりませんが、FTPのようにドメイン内にファイルをアップロード頂ける機能や、メールアカウント発行機能は有しておりますのでご安心ください。
もし、それ以外でなにか実現されたい事がございましたら、ご相談ください。対応可否は検討し回答させていただきます。
HTMLが現行のものをそのまま移行する形でしたら、対応は可能でございます。
もし、現行が何らかのCMSで稼働されており、プログラムも移さなければ動作しない類いのものでしたら、弊社OWLetとの相性の問題など、動作保証できずお受けできない場合がございます。
弊社にご依頼頂く形になります。費用は別途お問い合わせ下さい。
可能でございます。
99.9%です。
テスト(開発)環境は、主に下記3つの理由から動作が本番環境よりも重たくなっております。
①あえてサーバスペックを本番環境よりも落としている(本番での動作を確実にするため)
②画像をデータベース経由で表示させている(本番では、ファイルをそのまま表示)
③OWLetの記述をPHPに焼き直して動作させている(本番では、焼き直されたPHPがそのまま動作)
本番環境移行後は、速度は改善されることとなります。
セキュリティーのためにFTP情報の開示は行っておりません。
共用サーバプランでは、複数のクライアントが利用するため、安全性を考慮させていただいております。
OWLet標準機能で構築することが可能です。
会員登録をしたユーザーにメルマガを配信することができます。
なお、メルマガ配信のための会員登録については、ユーザーが個別に行うことも当然可能ですが、サイト管理者も行えます。
はい。初回のみ、弊社へご依頼いただく必要がありますが、OWLet管理画面よりメールアカウントの新規追加、削除が可能です。
※弊社メールサーバーをご利用の場合に限ります。
「アクセス解析のタグ」がGoogle Analyticsのタグを指す場合は、管理画面(Google Analytics設定)にてトラッキングIDを設定いただいているので、別途のタグ設定は不要です。
別の解析タグ等を設置されたい場合は、レイアウトから「通常通りヘッダー<body>あたりのHTML内に設置」で問題ございません。
設定手順のマニュアルをご用意しています。
カスタムパーツには「参照用」と「コピー用」の2種類があります。
「参照用」
設置先ページでのパーツを個別に編集する事は出来ませんが、元のカスタムパーツを編集すると設置先の
全てのカスタムパーツに編集内容が反映されます。
「コピー用」
元のカスタムパーツを編集しても設置先のページには反映されませんが、設置先のページにて通常パーツと
同様にパーツの編集が可能です。
ページで編集できないカスタムパーツは「参照用」です。
設置した参照用カスタムパーツは、通常のパーツとは編集の仕方が異なります。
ページ上部の「カスタムパーツ」ページから、各カスタムパーツを編集する事が出来ます。
標準の機能では対応していないのですが、ご依頼いただければ
追加開発(有償)で実装が可能です。
もし、ご希望の場合はお見積りいたしますので、お問合せフォームよりご依頼ください。
まず、お伝え頂いたマッチングシステムの仕様は
<< OWLetで実現可能 >> です。
複雑な検索を設けたり
企業ごとへの問い合わせフォームを設けたりする場合は、
OWLetPro(アウレットプロ)という上位版サービスでの対応が可能です。
このOWLetProでは、OWLet独自言語のOWL(アウル)でシステムを組むことになります。
OWLetを用いて御社で構築していただくことも可能ですし、
株式会社ガーディアンへの構築依頼も承っております。
また
「OWLetではどんなことができるの?」
「どこまでできるの?」
「管理画面やCMSはどうなってるの?」といったことは
実際にOWLetで構築されたデモサイトを操作してみて頂くことが
1番のオススメです!
無料ライセンス登録にお申し込みいただきますと、
ご利用者様専用のデモサイトをご提供しております。
無料登録ですので、お気軽にお申し込みください。
公開した後は戻すことができません。公開前に十分なご確認をお願い致します。
編集ログを残すことができます。
編集者が公開前にサイト編集内容を記載することで、いつどんなことをしてサイトの変化が起こったのかを理解していくことができます。ただし、現状では、自動的に誰が何をしたかは記憶されません。
データベース容量が、いっぱいの状態になっても、
WEBサイトの更新やコンテンツ追加が突然できなくなるわけでは
ございませんので、まずはご安心ください。
管理画面上のグラフ表示については、ご依頼いただきますと
250MB単位で追加させていただきます。
また、250MB単位で1,000円/月となりますので、
ご利用の容量に応じて、月額保守費のご請求となります。
詳しくは、「OWLet・OWLet Proのライセンス契約について」をご参照くださいませ。
sitemap.xmlについては、OWLetの場合自動生成されるためファイル管理からのアップロードは不要です。
管理画面のサイトマップ送信(赤いサイトマップXMLボタン)をご利用になる場合、
・SearchConsoleを使うアカウント
・GoogleAnalyticsを使うアカウント
・GoogleAnalyticsのAPIを使うアカウント
が統一されている場合に送信テストできる仕組みとなっております。
アカウントが統一されていない場合には、エラー表示となりますので、その場合はGoogle Search Consoleからご登録いただければ、問題ございません。
ページごとにIDとPWを設定することで基本認証の設定が可能です。
簡易なクローズドページの作成が可能です。
弊社にご依頼をいただく事で、設置可能です。
将来的には、管理画面から設定していただけるような形にOWLetを改修することを検討しております。
各ページの上部で「meta」設定が記述することができます。
こちらに記述していただき「追加」ボタンをクリックして設定完了です。
Let's Encryptを活用しております。
オンラインショップですと「OWLet EC」というプランにお申し込みいただく形となります。
通常の「OWLet」の標準機能に、ショッピングカート機能が搭載されたもので、 基本的な機能は、下記をご参照いただければと存じます。
コストに関しましては、下記となります。
+++++++++++++++++++
①初期費用/OWLet ECご利用(開発環境使用料):62,500円(税別)
②月額費用:10,000円(税別)/本番環境移行(WEBサイトの完成・公開)後に発生いたします。
[内訳]
※「OWLet」ライセンス料(月額費用):1サイト当たり3,000円/月(税別)
※「OWLet」の本番環境サーバへのアップロードの代行作業、本番環境サーバ及びシステムの保守料金:1サイト当たり7,000円/月(税別)
+++++++++++++++++++
※価格は2017/6/1時点のものです。
マニュアルをご用意しております。
下記よりご確認ください。
◆FacebookAPI設定マニュアル
https://owlet.guide/pdf/【SNS連携マニュアル】FacebookAPI設定_20160923.pdf
◆TwitterAPI設定マニュアル
https://owlet.guide/pdf/【SNS連携マニュアル】TwitterAPI設定_20151111.pdf
CMS時のみ追加される「.ui-droppable」というclassがあるのでこれを活用することで実現可能です。
IE(インターネットエクスプローラー)でログインしていませんか?
IE(インターネットエクスプローラー)はOWLetでは非推奨ブラウザとなっております。
FirefoxかChromeで再度管理画面へログインしてください。
管理画面・ページ編集モードではHTML5を使用しており、IEでは一部のHTML5のタグに対応していないため、IEでページ編集モードや管理画面に入ると、機能が正常に動かなくなります。
Googleのサイト内検索を設置する方法が早くて簡単です。
下記ページ等を参考に設置をしてみてください。
Googleカスタム検索エンジン
http://seolaboratory.jp/internal/2016081941705.php
設定可能です。
ファイル管理より「/」直下に「favicon.ico」を設置していただければ設定されます。
工程その4:画像作成
完成した案をもとに、必要な画像を作成していきます。
この作業が正直一番大変でした・・・!
フリー素材や図形を駆使して画像を作成していきます。
ページ公開をお楽しみに!!
事前にAJAXフォームを作成して頂き、
①管理画面>設定>フォーム の各フォーム基本設定にて、
「AJAXフォームを使用する」にチェックを入れます。
フォームコードや入力項目、通知メール設定は通常通り行います。
②フォーム送信完了の際に表示するページを別途作成します。
(コンバージョンタグの埋め込み等に使うサンクスページ)
これは、通常の下層ページです。
②作成したパーツを好きな位置に設置します。
設置後、鉛筆ボタンから、
①で基本設定に入れた「フォームコード」
②で作成した「完了画面用のページURL」
を入力し、登録します。
/_sys/環境にてログインして頂き、
ページ編集モード>レイアウト>新規レイアウト作成>レイアウトにアーティクル対応ウィジェットを設置
下記ページにて、サイトマップで選択するための「ページ種別」をセットすることが可能です。
/_sys/setting/page_type/
これをして頂くことで/director/環境にてページ種別にて追加したアーティクルが選択できるようになります。
※/_sys/環境の管理画面より記事を事前に投稿しておくことが可能です。
OWLet化時には記事登録日が以降日になってしますので注意が必要です。
アーティクルの入力項目をdescriptionとして出力する方法は以下になります。
(白い管理画面でdescription設定まで完了させる方法)
①設定>アーティクル>入力項目と出力テンプレート
アーティクルの入力項目にdescription入力欄を追加
例)
項目名:description
コード:description
入力タイプ:複数行テキスト
②設定>アーティクル>入力項目と出力テンプレート
入力項目設定の下部にある、「出力テンプレート」の+ボタンをクリック
③出力先「headタグ内」のまま、
入力欄に下記を記述して登録(コードは適宜変更。description等)
<meta name="description" content=“{=@contents:コード=}">
jsに入力項目を使用する際、いくつかのパターンがございます。
1)テンプレート 及び 共通JavaScript欄の併用
①入力項目「hoge」を作成します
②テンプレートの開始タグ部分に
data-hoge="{=@hoge=}"
を記述します
例)<div data-hoge="{=@hoge=}">となる形
③共通テンプレート内に
let hoge=element.getAttribute('data-hoge');
を記述することで、変数hogeに値が入ります
2)テンプレート内にscript記述の実施
3)AJAXテンプレート内で記述
→こちらは記述が複雑となるため、推奨しておりません。。
{a:datastore(
'ds'=>'article'
,'class'=>['article'=>'%']
~……
}
の中に入れ込むのですが、
入れ込めるオプションの形式がいくつかあります。
★これで「testnumber」という項目の値が「1000」の記事のみが出ます。
決め打ちする場合です。
,'search'=>['testnumber'=>['match'=>1000]]
★「testnumber」の項目をタグのように、URLで絞り込み表示できます。
/blog/?hoge=1000 など。hogeは好きな文言に変更してください。
,'search'=>['testnumber'=>['match'=>$_GET['hoge']]]
★「testnumber」の項目を順番並び替えに使う場合です。
先に定義しておき、並び替えに使っています。
,'kv'=>['testnumber'=>'testnumber']
,'order'=>'testnumber.value ASC,ds.id ASC'
1行目で〇月〇日までの記述となっており、
2行目で曜日配列を行い、
3行目で曜日(変数w)を出力し、
2~3行目を()で囲むことにより(曜日)となっております。
「ALL」のような出力ですが、こちら、
ディレクトリ一覧パーツ内に一覧ページ(/blog/)へのリンクを
追加で入れる形となります。
■入力項目を追加
・リンクURLの入力欄を一行テキストで追加(href など)
・リンクテキストの入力欄を一行テキストで追加(link_text など)
■デフォルト値に一覧ページURL、リンクテキストの入稿
■テンプレート内に「単純出力」のコードで入れ込み
<a href="{=@href=}>{=@link_text=}</a>
<!--ディレクトリ出力-->
{d:~~~~以下、今入っている記述
①サイト内全ページへ設置する場合(添付画像をご参照ください)
1)レイアウトメニューから、最上階層のレイアウト編集画面を開きます。
2)画面左側、パーツエリアの基本パーツ「テキスト」を
画面右側、ツリーエリアの最下部に設置します。
出てきたダイアログ内に、スクリプトを記述します。
※最上階層のレイアウトが複数ある場合は、それぞれのレイアウトで設置が必要です。
※基本パーツ「テキスト」で設置せず
スクリプト埋め込み用のウィジェットを作ってもかまいません。
「入力タイプ:複数行テキスト」で項目を作り、テンプレート内に{=@コード=}を記述するだけです。
---
②単独ページのみ設置する場合
ページにも①同様に、最下部に設置を行いたいですが、
</body>直上に設置するための継承エリアがありません。
まずこちらを作る必要があります。
1)レイアウトメニューから、最上階層のレイアウト編集画面を開き、
設置領域の最下部に継承エリアを設置します。
「body閉じタグ直上」など、分かりやすい名前にします。
2)1つ下層のレイアウトに移動すると、画面右側のツリー下部に
「body閉じタグ直上」という設置領域ができています。
ここに、同じように「body閉じタグ直上」という名前で継承エリアを置きます。
ページで使用するレイアウトにたどり着くまで、これを繰り返します。
3)スクリプトの埋め込みをしたいページを開き、
「body閉じタグ直上」のエリア内に、
基本パーツ内「テキスト」またはスクリプト埋め込み用に作成したウィジェットを設置し、記述します。
①ウィジェット内に、入力タイプが「ファイル」の項目を1つ作ります。
②画面を一度更新し、「デフォルト値」に動画ファイルを入れます。
ファイルサイズが上限を超えていないか、ご注意ください。
③テンプレートに下記を貼り付け、「入力項目コード」を①の項目のコードに合わせます。
<video src="/_file/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/入力項目コード/" loop autoplay muted playsinline></video>
④動画がうまく出ない場合は、データ読み込みのため、一度「編集内容の公開」を行ってください。
※ウィジェットを作成する際、「基本設定」の「タグ」で
REVOLUTIONで探しやすいタグをつけ、その後「編集内容の公開」をします。
付けるタグは「動画パーツ」等で良いかと思います。
REVOLUTIONで設置する際、「全てのパーツ」の中にこのタグが出ます。
※見た目は調整頂く必要があります。
YouTubeで動画設置をしているウィジェットを参考にしていただくと良いかもしれません。
(iframe {~~~} の指定をvideo {~~~} にしていただくなど
headタグへのmeta refresh指定にて、実施いただければと思います。
例えばトップページや、レイアウトなどのheadタグ記述欄へ下記を入れ込みます。
<meta http-equiv="refresh" content="3;URL=https://www.sample.com">
3秒後にhttps://www.sample.com へ遷移するように設定可能です。
「一行テキスト」等で設定した内容を入れ込む場合には、
コード生成時に「ピース編集」ではなく
「単純出力」で生成したコードを入れ込んでいただくことで実装可能です。
(margin: {=htmlspecialchars(@コード)=}; のような形です)
「一行テキスト」等で設定した内容を入れ込む場合には、
コード生成時に「ピース編集」ではなく
「単純出力」で生成したコードを入れ込んでいただくことで実装可能です。
HTMLタグパーツ:<img src="/_img/ja/setting/{=@directory=}/コード/100_100_1_000000/session/0/">
テキストパーツ:<img src="/_img/ja/setting/[*@directory*]/コード/100_100_1_000000/session/0/">
「コード」の部分を置き換えてください。
@directoryの部分でディレクトリidが出力されます。
articleブロックに ,'tag'=>unserialize(@tag_●) 追加
下記記述で、日付の月を英語表記にすることができます。
◆表示例
2015年7月31日の場合
july/31/2015
下記記述で、月日の先頭の0を表示させないことが可能です。
下記記述で、日付の年を西暦下二桁で表示することが可能です。
下記記述で、日付を西暦で年月日表示することが可能です。
記事詳細ページのURLが出力されます。
詳細ページでの記事タイトルの表示の記述です。
記事詳細ページのURLが出力されます。
記事詳細有無に関わらず、記事タイトルのみ表示されます。
記事詳細がある場合、記事タイトルにリンクが付与されます。
入力内容にタグが含まれていた場合、それを除去します
「あああ<BR>あああ」と入力された場合、「ああああああ」と出力されます。
入力内容にタグを除去しつつ
複数行テキスト内の改行を反映する書き方です。
◆設定画面
管理画面>設定>アーティクル>当該アーティクル にて、
「入力項目と出力テンプレート」へと進み、
ページ中ほどの「出力テンプレート」にて
headタグ内にアーティクル投稿画像がog:imageに設定されるよう記述をします。
(headタグ内などに入力項目の内容を反映させるための機能です)
◆記述内容
出力先を「headタグ内」に設定し、og:image設定のための下記記述を入れます。
<meta name="og:image" content="画像パス">
「画像パス」部分には、アーティクル記事の画像を出力するため下記を入れています。
https://{=$_SERVER['SERVER_NAME']=}/_img/{=current_lang()=}/{=@contents:datastore=}/{=@contents:id=}/■■■/500_500_1_ffffff/
「■■■」部分を該当アーティクルの画像項目のコードに変更し、完了です。
既にFacebookにシェアをしたことのある投稿での表示画像に関しては、
Facebookの下記サービスページにて再度記事URLを読み込み直す必要がございます。
https://developers.facebook.com/tools/debug/
下記手順で行います。
①カスタマイズするフォーム用の個別レイアウトを作成
管理画面では、そのレイアウトでフォーム作成されるよう指定
②カスタマイズするフォーム用のウィジェットを作成
添付のウィジェットをカスタマイズします。
「入力画面」「確認画面」の出力内容をそれぞれ設定する必要があります。
サンプルパーツをインポートし、以下の記述を編集してください
articleブロックに記述を追加します。
◆◆部分にはタググループコード、
●部分には、管理画面>設定>タグ一覧 で絞り込むタグの入力欄まわりを
検証ツールで確認し、該当タググループのidを特定して入れ込みます。
「複数行テキスト」にし、自動コード生成の{=htmlspecialchars(@入力項目のコード=}の形から、htmlspecialchars()を抜いた{=@入力項目のコード=}の形で出力が可能です。
管理画面内のアーティクル設定にて入力項目を追加し「ファイル」
詳細ページ用のコードを生成し、詳細用ページに記載。
入力タイプ「ファイル」を使用することで、PDFファイルのアップが可能です。
リンクパス内の「2」は、「1」に変更していただくことで
ダウンロードする形にも変更できます。
アーティクル詳細出力用のウィジェット内、
「article:datastore」ブロックの中に、
,'term'=>in_cms_mode()?'all':'public'
という一行を追加していただくことで、
未来日の記事も表示確認が可能です。
下記の記述で可能です。
可能です。
下記、記述例になります。
入力項目:単一選択
項目:
そのまま開く:off
別タブで開く:on
コード:target
下記のように記述することで可能です。
コード:aaa
入力値:あああ
下記記述で三項演算子を使用することができます。
下記記述でif文を使用することができます。
変数を定義し、条件分岐することができます。
フィールドセットの中にフィールドセットの項目がある場合の記述です。
◆記述例
グローバルナビをフィールドセットで作り、そのサブメニューをフィールドセットにする場合の例になります。
※ネストの開始には@識別子①が入る。
下記のように記述してください
下記のように記述することで、CSSプロパティを含め出力することができ、未入力時は出力されません。
下記のように記述することで出力できます。
{=rgba(resource('リソースグループコード','コード'),0.5)=}
下記のように記述することで出力できます。
{=resource('リソースグループコード','コード')=}
入力項目でページネーションを表示させるかどうかの単一選択項目を作成します。
コード:pager_onoff
日本語名前:ページャー表示
入力タイプ:単一選択
ーーー
選択肢設定
①value:off 日本語:表示しない
②value:on 日本語:表示する
記事詳細レイアウトに、「他の記事を見る」のようなコンテンツを出したい場合に、「今開いている記事は表示しない」ようにする記述方法です。
ディレクトリごとに入力項目を設定したい場合に使用します。
hoge の部分は任意の文字列で統一
コードは入力項目のコード
{hoge:datastore(
'datastore'=>'setting'
,'class'=>array('directory'=>'%')
,'parent'=>array('164.setting')
)}
{hoge:foreach(@hoge:recordset)}
{=hoge:コード=}
{/hoge:foreach}
{/hoge:datastore}
入力項目「アーティクル」を設定を設定することで、アーティクル間連動が可能です。
アーティクル記事の中に他のアーティクルの情報を引っ張ってくることができます。
◆記述例
{a:datastore(
'datastore'=>'article'
,'class'=>array('article'=>'%')
,'id'=>(int)$param['article:member']
)}{a:foreach(@a:recordset)}<div class="-w-column-prf">
<div class="-w-image">
<img src="/_img/ja/article/{=@a:id=}/pic_roll_off/_/" alt="{=htmlspecialchars(@a:title)=}" />
</div>
<div class="-w-contents">
<p class="-w-position">{=nl2br(@a:post)=}</p>
<p class="-w-name">{=htmlspecialchars(@a:title)=}</p>
<div class="-w-profile">
{=nl2br(@a:works)=}
</div>
</div>
</div>{/a:foreach}{/a:datastore}
ウィジェットで特定の記事詳細データを出すことが可能です。(設置時にどの記事か選択する)
リソース機能ではなくアーティクルで「店舗情報」を作成したときなどに便利です。
{識別子:datastore(
'ds'=>'article'
,'id'=>(int)$param['parts:入力項目がアーティクルの入力項目のコード']
)}{識別子:foreach(@識別子:recordset)}
<!--表示されるのここから-->
タイトル:{=htmlspecialchars(@識別子:title)=}
その他の入力項目の値:{=htmlspecialchars(@識別子:入力項目のコード)=}
<!--ここまで-->
{/識別子:foreach}{/識別子:datastore}
カテゴリ絞り込みをした結果記事が0件だった、という場合など、CSSへの記載で「記事は0件です」等の表示ができます。
※OWLet独自の機能ではありません。
◆記述例
ul.-w-article_list:empty::before {
content: "記事はありません";
width: 100%;
text-align: center;
margin-left: 5rem;
}
===============
articleブロックに ,'tag'=>unserialize(@tag_●) 追加
===============
<ul>
{same_tag:article(
'code'=>'columnTest'
'tag'=>['special'=>unserialize(@tag_●)]
)}
<li><a href="{=@detail_page:url=}">{=htmlspecialchars(@name)=}</a></li>{/same_tag:article}
</ul>
下記記述で、日付の月を英語表記にすることができます。
[*date(@public_begin_datetime,'M/d/Y')*]
◆表示例
2015年7月31日の場合
july/31/2015
下記記述で、月日の先頭の0を表示させないことが可能です。
[*date(@public_begin_datetime,'n/j')*]
下記記述で、日付の年を西暦下二桁で表示することが可能です。
[*date(@public_begin_datetime,'y/m/d')*]
下記記述で、日付を西暦で年月日表示することが可能です。
[*date(@public_begin_datetime,'Y/m/d')*]
記事詳細ページのURLが出力されます。
[*@contents:detail_page:url*]
詳細ページでの記事タイトルの表示の記述です。
[*@contents:title*]
下記記述でファイルを開くことが可能です。(PDFファイルのみ)
/_file/ja/article/[*@id*]/コード/2/
◆記述例
<a href="/_file/ja/article/[*@id*]/コード/2/">ファイルを開く</a>
コードの前に@不要
下記記述でファイルダウンロード可能です。
/_file/ja/article/[*@id*]/コード/1/
◆記述例
<a href="/_file/ja/article/[*@id*]/コード/1/">ファイルをダウンロード</a>
コードの前に@不要
記事詳細ページのURLが出力されます。
[*@detail_page:url*]
記事詳細有無に関わらず、記事タイトルのみ表示されます。
[*@title_without_link*]
記事詳細がある場合、記事タイトルにリンクが付与されます。
[*@title*]
入力内容にタグを除去しつつ
複数行テキスト内の改行を反映する書き方です。
{=nl2br(htmlspecialchars(@hoge))=
下記のように記述することで可能です。
コード:aaa
入力値:あああ
◆記述例
{d:def(
'aaa'=>1
)}
{=@aaa=}
{/d:def}
{=@aaa=}
◆出力例
1 あああ
アーティクル開始タグにページャー出力用の記述を追加します。
,'pagination_placeholder'=>'article_pagination'
アーティクル開始部分に左記の記述を入れることで、ページャーの出力制限が可能です。制限数は自由に設定できます。
,'pager_scope_limit'=>2
◆例
{article(
'code'=>"アーティクルコード"
,'display_count'=>"表示件数半角数字"
,'order'=>"アーティクル並び順の変数"
,'pagination_placeholder'=>'article_pagination'
,'pager_scope_limit'=>2
)}
{/article}
[*article_pagination*]
下記記述がアーティクル表示順の各設定方法になります。
コード: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_select:「表示記事」を「一行テキスト」で入力項目作成
→アーティクルコード指定ができる
@count:「記事件数」を「一行テキスト」で入力項目作成
→記事件数が表示できる
@order:「表示順」を「単一選択」で作成し、
↓下記項目の「アーティクル並び順」からvalueに「ds.id DESC」日本語名に「id降順」を入れる、という感じです
{article(
'code'=>@article_select
,'display_count'=>@count
,'order'=>@order
)}
{article:fieldset(@article:id,'article','menu')}
<tr>
<th>{=@title=}</th>
<td>{=nl2br(htmlspecialchars(@price))=}</td>
</tr>
{/article:fieldset}
{/article}
下記記述をウィジェットパーツ内に記述することで、パンくずの出力が可能です。
HTML部分の変更は行って問題ありません。
◆例
{d:def(
'pos'=>function(){
static $s_pos=0;
return ++$s_pos;
}
)}<nav id="breadcrumb"><ol itemscope itemtype="http://schema.org/BreadcrumbList">
{i:if(@page:id)}
{r:recursive(
'var'=>array(
'id'=>@page:id
,'url'=>@url:url
)
)}{page:datastore(
'ds'=>'page'
,'class'=>array('page'=>'%')
,'fields'=>array(
"CONCAT(ifnull(GROUP_CONCAT(purl.value ORDER BY ppath.akey+0 ASC SEPARATOR ''),''),url.value,'%')"=>'url_like'
,"CONCAT(ifnull(GROUP_CONCAT(purl.value ORDER BY ppath.akey+0 ASC SEPARATOR ''),''),url.value)"=>'url'
,'name.value'=>'name'
)
,'kv'=>array(
'url'=>'url','is_dummy'=>'is_dummy','name'=>'name'
)
,'join'=>
"LEFT JOIN page_kv_array AS ppath ON ppath.id=ds.id AND ppath.key='parent_path'
LEFT JOIN page_kv AS purl ON purl.key='url' AND ppath.avalue=purl.id"
,'where'=>"ds.id<>".((int)@r:var['id'])." AND (is_dummy.value IS NULL OR is_dummy.value<>1)"
,'group by'=>'ds.id'
,'having'=>"LENGTH(url)<".strlen(@r:var['url'])." AND '".GDB::escape(@r:var['url'])."' LIKE url_like"
,'order'=>'url DESC'
,'display_count'=>1
,'term'=>'all'
)}{page:foreach(@page:recordset)}{=@r:recursive(array(
'id'=>@page:id
,'url'=>@page:url
))=}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{=@page:url=}"><span itemprop="name">{=htmlspecialchars(@page:name)=}</span></a>
<meta itemprop="position" content="{=@d:pos()=}">
</li>{/page:foreach}{/page:datastore}{/r:recursive}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">{=htmlspecialchars(@page:name)=}</span>
<meta itemprop="position" content="{=@d:pos()=}">
</li>
{/i:if}{i2:if(!@page:id)}
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{=@page:url=}"><span itemprop="name">TOP</span></a>
<meta itemprop="position" content="{=@d:pos()=}">
</li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{=@page:url=}"><span itemprop="name">parents</span></a>
<meta itemprop="position" content="{=@d:pos()=}">
</li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">current</span>
<meta itemprop="position" content="{=@d:pos()=}">
</li>
{/i2:if}
</ol></nav>{/d:def}
設置先で、入力項目に入れた画像を背景画像として使う場合の記述例
(CSSで入力項目画像を使う場合)
コード:●●●
日本語名前:背景画像
入力タイプ:画像
という画像入力項目を作ります。
background:url(/_img/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/●●●/___/session/{=@parts:session_sequence_id=}) no-repeat center center / cover;
識別子は同じパーツ内で被らないものを半角英数字で指定してください。
{識別子:fieldset(@parts:id,@parts:datastore,'フィールドセットコード名')}
~
{/識別子:fieldset}
◆例
<ul>
{contents:fieldset(
@parts:id,@parts:datastore,'フィールドセットコード名'
)}
<li>
<p>{=@◆◆◆=}</p>
<div><img src="/_img/{=current_lang()=}/{=@parts:datastore=}/{=@id=}/●●●/_/{=@sess=}/" alt="{=@●●●_alt=}></div>
</li>
{/contents:fieldset}
</ul>
●●●には画像のコードが入ります。
<img src="/_img/{=current_lang()=}/{=@parts:datastore=}/{=@id=}/●●●/_/{=@sess=}/" alt="{=@●●●_alt=}">
ウィジェット内の固定画像で設定可能です。
お問い合わせコンテンツの電話番号画像など、パーツ内で変更しない画像はここで設定します。
◆例
赤い部分は画像出力時のサイズ、リサイズ方法、余白背景色を設定しています。
使用例:
<img src="{=lib_image_src(@lib:id,'fb073b18-ce14-4249-abc3-d76356bae1fb','100_100_1_000000')=}">
background: url('{=lib_image_src(@lib:id,'fb073b18-ce14-4249-abc3-d76356bae1fb','100_100_1_000000')=}');
設置したページのページ名を出力します。
ページタイトルデータを持たない箇所(レイアウトやウィジェット/_cms/preview/1/Lw==/)でも、代替テキストを出力できます。
{=strlen(@page:name)?htmlspecialchars(@page:name):'ページタイトルが入ります'=}
何回フィールドセットの入力がされているか(いくつ内包されているか)を出力することができます。
{=@record_count=}
ループの前にも使用できます。中身が1つの場合のclassと2つの場合のclassで分けることができます。
◆例
{fs2207:fieldset_query(
@parts:id,@parts:datastore,'contents'
)}<div class="-w-contents -w-contents{=@record_count=}">{fs2207:foreach(@fs2207:recordset)}
中身
{/fs2207:foreach}</div>{/fs2207:fieldset_query}
フィールドセットのループ内で、1つずつカウントしていく変数です。
{=@local_index=}
下記のように記載をすると、
1:~~~
2:~~~
3:~~~ の数字部分のような出力ができます。
◆例
{fs2244:fieldset_query(
@fs2207:id,@fs2207:datastore,'table'
)}<table>{fs2244:foreach(@fs2244:recordset)}
<tr>
<th>{=@local_index=}:</th>
<td>{=@td=}</td>
</tr>
{/fs2244:foreach}</table>{/fs2244:fieldset_query}
下記記述で可能です。
{d:def(
'aaa'=>1
)}
{=@aaa=}
{/d:def}
単一選択valueだった時のみ出力
OWLet2.0までのバージョン
{識別子:if(owlet_dsl::sel_text(@単一選択コード名) == '単一選択value')}
{/識別子:if}
単一選択valueだった時のみ出力
{識別子:if((@単一選択コード名) == '単一選択value')}
{/識別子:if}
内部の見出しレベルが下がらない場合の記述
パーツ内に2回以上領域を作る場合にはcont、cont2、…等、名前を変える
◆例
<div class="-x-cont">{[cont]}</div>
内部の見出しレベルが下がる場合の記述
パーツ内に2回以上領域を作る場合にはcont、cont2、…等、名前を変える
◆例
<div class="-x-cont">{[cont]1}</div>
下記記述で今いる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;
}
各ページのSEO設定と連動する記述です。
ヘッダー内に埋め込みます。
広報室でなにしたの?そんな疑問にお答えします! | BLOG | 次世代の世界標準プラットフォームへ "賢者のホームページ"OWLet(アウレット)と記述します。
カッコが違う理由として…
これは入力項目等の「変数」とはデータの引き出し場所が異なるため。
※OWLetでは、h1設置を推奨しています
◆記述例
<h1>広報室でなにしたの?そんな疑問にお答えします! | BLOG | 次世代の世界標準プラットフォームへ "賢者のホームページ"OWLet(アウレット)</h1>
複数条件の場合
{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の中の変数は'..'に変更しなくてよい。
下記記述で「その他あり」が表示されます。
{=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}
の記述を入れることで、その内部はフィールドセットの入力が
1つ以上あった場合のみ出力されます。
{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上でのページ編集は不可(ファイル再アップで更新可能)となります。
挿入した画像にクラス設定等可能ですので、
例えばfloatimage等のクラスを設定しておき、ウィジェット内や全レイアウト共通CSS等で下記指定を行うことで、テキストの回り込み設定が可能です。
.floatimage {
float: left;
}
編集中に関しては、プレビューウィンドウで各ページごとの確認、となります。
編集内容を公開した後については、「シークレットウィンドウ」や、別ブラウザ(Chromeで作業している場合はFirefox等)でご確認いただけます。
可能です。
しかし、「同じページの同じウィジェットの入力内容」、「同じウィジェットのウィジェット編集画面」等を編集していた場合は、後から公開した人の作業内容のみが残る形になります。
そのため、作業時はお互いに別の箇所を編集するなど注意していただければと思います。
セッション削除をしてしまった場合の未公開作業の復元はできません。
document.function
document.~~~~ となる箇所では、
document→elementに置き換えて頂くと
動作対象を「そのページ内」ではなく「そのウィジェット」に閉じ込めることが可能です。
また、jQueryや外部プラグインの読み込みを行いたい場合には、CDN等を「外部依存CSS/JS」に記載いただく必要がございます。
最上階層のレイアウト(baseやroot 等の名前になっているかと思います)の編集画面にて、
「外部CSS/JS」タブから読み込みをします。
その上で、「CSS/JS/画像」欄にて、body等へfont-family指定を行うことが可能です。
OWLetでは複数個所、CSS記載できる箇所がございますが、
①全レイアウト共通設定CSS
②ウィジェット内CSS
③各レイアウト記述のCSS(上階層から順番に)
④各ページごとのCSS
の順番で読み込まれます。
下記のような記述で、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:~~」から
記述を始めていただければと思います。
リソースでの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
アーティクルの開始タグに下記を追加することで、特定のディレクトリの記事のみ表示させることが可能です。
,'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">で呼び出しできます。
ウィジェットやアーティクル等で登録する画像に関しては
サーバーから削除され、新しい画像が登録されます。
ウィジェットやアーティクル等で登録する画像に関しては
サーバーから削除され、新しい画像が登録されます。
◆共通CSS
ウィジェットパーツごとのCSS設定
(通常は共通CSSに記述します)
◆設置先毎CSS
設置したパーツ単位での設定
(背景画像を入力項目で指定する場合などに使用します)
管理画面のファイル管理から、
指定のディレクトリを作成し、サイトのファイルをアップロードしていただくことで可能となります。
※PHPファイルはアップロードできません。
①ファイル名を出力したい場合
[*@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>
リソース設定で作成した項目は、ウィジェット内に記述することで出力可能です。
{=resource('リソースコード','入力項目単位のコード')=}
◆例
リソースコード:test
入力項目単位のコード:hoge
============================
{=resource('test','hoge')=}
============================
if文で条件分岐することが可能です
◆例
======================
{識別子:if(strlen(@hoge))}
{=@hoge=}
{/識別子:if}
======================
※識別子は半角英数字で設定し、パーツ内でかぶらないように設定。
googleのサイト内検索を設置する方法が早くて簡単です。
下記ページ等を参考に設置をしてみてください。
Googleカスタム検索エンジン
標準の機能では対応していないのですが、ご依頼いただければ
追加開発(有償)で実装が可能です。
もし、ご希望の場合はお見積りいたしますので、お問合せフォームよりご依頼ください。
カスタムパーツには「参照用」と「コピー用」の2種類があります。
「参照用」
設置先ページでのパーツを個別に編集する事は出来ませんが、元のカスタムパーツを編集すると設置先の
全てのカスタムパーツに編集内容が反映されます。
「コピー用」
元のカスタムパーツを編集しても設置先のページには反映されませんが、設置先のページにて通常パーツと
同様にパーツの編集が可能です。
ページで編集できないカスタムパーツは「参照用」です。
設置した参照用カスタムパーツは、通常のパーツとは編集の仕方が異なります。
ページ上部の「カスタムパーツ」ページから、各カスタムパーツを編集する事が出来ます。
sectionタグの階層によって、見出しレベルを変更することが可能です。
◆例
===============================
<section>
<h{=@cms_sectioning_inherit_count+1=}>
見出しテキスト
</h{=@cms_sectioning_inherit_count+1=}>
</section>
===============================
この場合「h2」となります
ウィジェットで入力項目「単一選択」でコード「test」を作成した場合の記述
{=sel_text(@test)=}
※「その他」を有効にしたい場合
{=sel_text(@test,@test_etc)=}
アーティクル、ウィジェットで設定した入力項目は、下記のように記述することで文字数制限することが可能です。
◆「text」というコードの場合
=================================
{=richtext_strimwidth(@コード, 0, 100, "...")=}
=================================
100バイト以降の文字は、出力されず...となります
詳細ページを持つアーティクル記事に関してもSEO解析の対象になっております。
・管理画面>report>SEOページ、
・ページ編集画面>ページ管理
に表示されるツリー一覧はアーティクル詳細までは出ないようになっています。
そのため、一覧に出る件数と、SEOチェック結果の件数には差異があります。
現状OWLetの標準仕様となります。
サーバスペックに関する情報は、下記の通りです。
[共用サーバ - 共通]
CPU:Xeon プロセッサ
コア数:2
メモリ:8GB
HDD:150GB
OS:Linux centOS
ネットワーク:100Mbps(ベストエフォート)
1サイトあたりPV目安:10万PV/月間
1サイトあたり目安分量:500MB(上限1.0GB)
自動返信メールに入力内容を表示するための変数は、入力項目の種類によって必要な記述が異なります。
(例)一行/複数行テキストの場合
[*@◯◯*]
(例)氏名の場合
[*@◯◯_sei*] [*@◯◯_mei*]
(例)電話番号の場合
[*@◯◯1*]-[*@◯◯2*]-[*@◯◯3*]
各フォームの入力項目を編集した場合は、自動返信メール側の変数表記も、変更後の入力タイプに対応した記述に訂正してください。
「アーティクルリスト」の「ループタグ」内に下記の通り記述してください。
<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*]">
↓リサイズモードの設定例です。
ショップ設定の商品情報登録項目設定と
商品種別設定の登録項目設定の使い分けとしては、
ショップ設定の商品情報登録項目設定は、
サイトの全ての商品の共通項目になります。
例えば、どのような商品であっても「商品管理コード」の登録は必要。
といった場合に利用します。
商品種別設定の登録項目設定は、
例えば「衣服」という商品種別と「サプリ」という商品種別があった場合、
「衣服」には「寸法」という入力欄が必要だがそれは「サプリ」には不要で、
「サプリ」には「成分」が必要という場合に使用します。
>#商品種別設定の登録項目設定だけでも十分でしょうか?
という点につきましては、
ショップ設定の商品情報登録項目設定と
商品種別設定の登録項目設定の使い分けを踏まえた上でご判断いただけますと幸いです。
エラーメッセージの内容的には、
「送信先メールサーバに何らかの理由で拒否されました。」というものです。
※「Recipient address rejected」等のエラーメッセージの部分で
検索してみると、一覧で表示されるサイトなどが出てきます。
★リンク「一覧で表示されるサイト」⇒ http://www.safetylink24.jp/support/mailcase/
メールアドレスに誤りがある可能性もございますが、
受信側のセキュリティによりメールが戻ってきてしまっていることも考えられます。
以前は送信できていたアドレスでも、
・内容(本文にURLが多数含まれる、スパムでよく使われる文言が含まれている、等)
・添付ファイル
等々により、はじかれるという事もございます。
受信側のメーラーのセキュリティ設定は変更になる場合もございますので、同じ受信者で発生する場合は、先方に設定をご確認ください。
エラーメッセージの内容的には、
「送信先メールサーバに何らかの理由で拒否されました。」というものです。
※「Recipient address rejected」等のエラーメッセージの部分で
検索してみると、一覧で表示されるサイトなどが出てきます。
★リンク「一覧で表示されるサイト」⇒ http://www.safetylink24.jp/support/mailcase/
メールアドレスに誤りがある可能性もございますが、
受信側のセキュリティによりメールが戻ってきてしまっていることも考えられます。
以前は送信できていたアドレスでも、
・内容(本文にURLが多数含まれる、スパムでよく使われる文言が含まれている、等)
・添付ファイル
等々により、はじかれるという事もございます。
受信側のメーラーのセキュリティ設定は変更になる場合もございますので、同じ受信者で発生する場合は、先方に設定をご確認ください。
本番環境を貴社専用のサーバとして立ち上げれば、
そのサーバのFTPを開示できるので貴社にて本番反映をしていただけます。
弊社共用サーバの場合、複数のクライアントが利用する特性上セキュリティー面・サーバ保守のために
FTP等のサーバへのアクセスは、弊社のサーバ保守を行う一部スタッフに限定しております。
そのため、ファイル反映は都度ご依頼頂く必要がございます。
貴社のWEBサイトは無償SSLのプランにご加入いただいております。
無償SSLをご利用いただくにあたり、
弊社で使用しているSSLのサブドメインとして扱う必要がございます。
「ssl.owlet.work」でSSLを取得しておりますため、
ページにSSLを設定すると、ご覧のようなURLになります。
本番ドメインに対して設定しており、
「owlet.work」がついたテスト環境ではございませんのでご安心ください。
弊社OWLetサービスはSaas型として、原則、弊社指定サーバでの稼働となります。
ご指定のサーバでの導入が必要な場合、インストール型での料金・サービスになります。
インストール型対応手数料として、下記追加費用が発生いたします。
(1)インストール型対応手数料 ※要お見積り
指定サーバでのOWLet稼働を保証するため、ミドルウェアや各種設定を含め、サーバへのインストール作業を代行致します。
(2)暗号化費用 500,000円(税別)~
弊社テクノロジーの機密保持のため、一部暗号化を施し、納品させていただきます。
そのため、インストール作業以降のOWLetバージョンアップ等の標準対応の保守サービスも対象外となりますので予めご了承ください。
また、インストールを行うにあたり、ご用意されるサーバにはいくつかの条件に当てはまる必要があります。
チェックPOINT1:レンタルサーバ契約の場合、安価な共有サーバプランではなく専用サーバ契約であること
チェックPOINT2:Linux系OSにて、root権限を持つSSH接続アカウントの提供がなされていること
チェックPOINT3:特殊なファイアウォール等、ネットワークセキュリティ設定により内外への通信が遮断もしくは制限されていないこと
上記ご確認の上、詳細については別途ご相談ください。
基本的にはJPG/PNGを推奨させていただいております。
SVG,GIFなどもアップは可能でございます。 ただし、OWLetには、画像パーツをリサイズできる機能がありまして、 サイズを変換した際に、内容が全て変換されなかった場合に 正常に表示されない可能性がございます。
リサイズ機能を使わない場合は SVG,GIFなどでも、正常に作動する割合が高いです。 恐れ入りますが、一部相性が悪く正常に作動しない可能性がございますことを、ご了承いただけますと幸いです。
画像パーツリサイズ機能とは? OWLetの中で画像の大きさを変換できる機能です。 例えば、300×250のサイズを200×100のサイズに比率を変更できる機能です。
はい、可能です。「ページ編集>ファイル管理」で可能となっております。サーバには容量制限がありますのでご注意ください。容量が多い動画はyoutubeにアップし、サイトにタグ埋め込みで表示させる方法を推奨しております。
タグ埋め込み方法に関しては別途お問い合わせ下さい。
弊社より提供しているサービスはCMS、HP運用となります。
サーバーに関するコントロールパネルはご用意しておりませんが、FTPのようにドメイン内にファイルをアップロード頂ける機能や、メールアカウント発行機能は有しておりますのでご安心ください。
もし、それ以外でなにか実現されたい事がございましたら、ご相談ください。対応可否は検討し回答させていただきます。
HTMLが現行のものをそのまま移行する形でしたら、対応は可能でございます。
もし、現行が何らかのCMSで稼働されており、プログラムも移さなければ動作しない類いのものでしたら、弊社OWLetとの相性の問題など、動作保証できずお受けできない場合がございます。
弊社にご依頼頂く形になります。費用は別途お問い合わせ下さい。
可能でございます。
99.9%です。
テスト(開発)環境は、主に下記3つの理由から動作が本番環境よりも重たくなっております。
①あえてサーバスペックを本番環境よりも落としている(本番での動作を確実にするため)
②画像をデータベース経由で表示させている(本番では、ファイルをそのまま表示)
③OWLetの記述をPHPに焼き直して動作させている(本番では、焼き直されたPHPがそのまま動作)
本番環境移行後は、速度は改善されることとなります。
セキュリティーのためにFTP情報の開示は行っておりません。
共用サーバプランでは、複数のクライアントが利用するため、安全性を考慮させていただいております。
OWLet標準機能で構築することが可能です。
会員登録をしたユーザーにメルマガを配信することができます。
なお、メルマガ配信のための会員登録については、ユーザーが個別に行うことも当然可能ですが、サイト管理者も行えます。
はい。初回のみ、弊社へご依頼いただく必要がありますが、OWLet管理画面よりメールアカウントの新規追加、削除が可能です。
※弊社メールサーバーをご利用の場合に限ります。
「アクセス解析のタグ」がGoogle Analyticsのタグを指す場合は、管理画面(Google Analytics設定)にてトラッキングIDを設定いただいているので、別途のタグ設定は不要です。
別の解析タグ等を設置されたい場合は、レイアウトから「通常通りヘッダー<body>あたりのHTML内に設置」で問題ございません。
設定手順のマニュアルをご用意しています。
カスタムパーツには「参照用」と「コピー用」の2種類があります。
「参照用」
設置先ページでのパーツを個別に編集する事は出来ませんが、元のカスタムパーツを編集すると設置先の
全てのカスタムパーツに編集内容が反映されます。
「コピー用」
元のカスタムパーツを編集しても設置先のページには反映されませんが、設置先のページにて通常パーツと
同様にパーツの編集が可能です。
ページで編集できないカスタムパーツは「参照用」です。
設置した参照用カスタムパーツは、通常のパーツとは編集の仕方が異なります。
ページ上部の「カスタムパーツ」ページから、各カスタムパーツを編集する事が出来ます。
標準の機能では対応していないのですが、ご依頼いただければ
追加開発(有償)で実装が可能です。
もし、ご希望の場合はお見積りいたしますので、お問合せフォームよりご依頼ください。
まず、お伝え頂いたマッチングシステムの仕様は
<< OWLetで実現可能 >> です。
複雑な検索を設けたり
企業ごとへの問い合わせフォームを設けたりする場合は、
OWLetPro(アウレットプロ)という上位版サービスでの対応が可能です。
このOWLetProでは、OWLet独自言語のOWL(アウル)でシステムを組むことになります。
OWLetを用いて御社で構築していただくことも可能ですし、
株式会社ガーディアンへの構築依頼も承っております。
また
「OWLetではどんなことができるの?」
「どこまでできるの?」
「管理画面やCMSはどうなってるの?」といったことは
実際にOWLetで構築されたデモサイトを操作してみて頂くことが
1番のオススメです!
無料ライセンス登録にお申し込みいただきますと、
ご利用者様専用のデモサイトをご提供しております。
無料登録ですので、お気軽にお申し込みください。
公開した後は戻すことができません。公開前に十分なご確認をお願い致します。
編集ログを残すことができます。
編集者が公開前にサイト編集内容を記載することで、いつどんなことをしてサイトの変化が起こったのかを理解していくことができます。ただし、現状では、自動的に誰が何をしたかは記憶されません。
データベース容量が、いっぱいの状態になっても、
WEBサイトの更新やコンテンツ追加が突然できなくなるわけでは
ございませんので、まずはご安心ください。
管理画面上のグラフ表示については、ご依頼いただきますと
250MB単位で追加させていただきます。
また、250MB単位で1,000円/月となりますので、
ご利用の容量に応じて、月額保守費のご請求となります。
詳しくは、「OWLet・OWLet Proのライセンス契約について」をご参照くださいませ。
sitemap.xmlについては、OWLetの場合自動生成されるためファイル管理からのアップロードは不要です。
管理画面のサイトマップ送信(赤いサイトマップXMLボタン)をご利用になる場合、
・SearchConsoleを使うアカウント
・GoogleAnalyticsを使うアカウント
・GoogleAnalyticsのAPIを使うアカウント
が統一されている場合に送信テストできる仕組みとなっております。
アカウントが統一されていない場合には、エラー表示となりますので、その場合はGoogle Search Consoleからご登録いただければ、問題ございません。
ページごとにIDとPWを設定することで基本認証の設定が可能です。
簡易なクローズドページの作成が可能です。
弊社にご依頼をいただく事で、設置可能です。
将来的には、管理画面から設定していただけるような形にOWLetを改修することを検討しております。
各ページの上部で「meta」設定が記述することができます。
こちらに記述していただき「追加」ボタンをクリックして設定完了です。
Let's Encryptを活用しております。
オンラインショップですと「OWLet EC」というプランにお申し込みいただく形となります。
通常の「OWLet」の標準機能に、ショッピングカート機能が搭載されたもので、 基本的な機能は、下記をご参照いただければと存じます。
コストに関しましては、下記となります。
+++++++++++++++++++
①初期費用/OWLet ECご利用(開発環境使用料):62,500円(税別)
②月額費用:10,000円(税別)/本番環境移行(WEBサイトの完成・公開)後に発生いたします。
[内訳]
※「OWLet」ライセンス料(月額費用):1サイト当たり3,000円/月(税別)
※「OWLet」の本番環境サーバへのアップロードの代行作業、本番環境サーバ及びシステムの保守料金:1サイト当たり7,000円/月(税別)
+++++++++++++++++++
※価格は2017/6/1時点のものです。
マニュアルをご用意しております。
下記よりご確認ください。
◆FacebookAPI設定マニュアル
https://owlet.guide/pdf/【SNS連携マニュアル】FacebookAPI設定_20160923.pdf
◆TwitterAPI設定マニュアル
https://owlet.guide/pdf/【SNS連携マニュアル】TwitterAPI設定_20151111.pdf
CMS時のみ追加される「.ui-droppable」というclassがあるのでこれを活用することで実現可能です。
IE(インターネットエクスプローラー)でログインしていませんか?
IE(インターネットエクスプローラー)はOWLetでは非推奨ブラウザとなっております。
FirefoxかChromeで再度管理画面へログインしてください。
管理画面・ページ編集モードではHTML5を使用しており、IEでは一部のHTML5のタグに対応していないため、IEでページ編集モードや管理画面に入ると、機能が正常に動かなくなります。
Googleのサイト内検索を設置する方法が早くて簡単です。
下記ページ等を参考に設置をしてみてください。
Googleカスタム検索エンジン
http://seolaboratory.jp/internal/2016081941705.php
設定可能です。
ファイル管理より「/」直下に「favicon.ico」を設置していただければ設定されます。
おわりに
案を出すところからWEBページとして完成させるまで、ひとつのものを作り上げたという達成感はすさまじいものでした。
また、一番ありがたいことは、社員さんからのフィードバックが手厚いこと。
しっかりとした指導や、ちゃんと時間をとってご意見をいただけたから気づけたことがたくさんありました。
こんな経験、なかなかできるものではありませんよね!