カスタムパーツで超速構築

  • このエントリーをはてなブックマークに追加
カスタムパーツとは、パーツのかたまりを1セットにして登録しておく機能のことです。
同ページ内、または複数ページにわたって、同じデザインのコンテンツが存在する場合は、カスタムパーツを使用することで、1つずつパーツを設置するより、格段に構築速度を向上させることができます。

カスタムパーツ作成のポイント

頻繁に更新するコンテンツにはカスタムパーツが有効

OWLetでサイトを構築する場合、パターン化できるもの、複数ページにわたって設置されるものは、積極的にカスタムパーツで作成するようにします。 特に、運用時にサイトオーナーが頻繁に更新するコンテンツに関しては、更新に必要となるカスタムパーツは登録しておくようにすることで、納品後の手離れが格段に良くなります。

作成のポイント1

カスタムパーツは、「コピー」と「参照」の2種類があります。

コピー:

カスタムパーツが内包するパーツのセット一式がコピー設置され、設置後に個別の編集が可能です。例えば、パターン化された「見出し」「画像」「テキスト」等の組み合わせが複数個表示されるページ等で使用します。

参照:

設置先での個別の編集が出来ませんが、参照元となるカスタムパーツの方を修正する事で、設置先の方に自動で反映されます。バナーや問い合わせフォームへのリンク等の、複数ページで共通化したい要素で使用します。

作成のポイント2

参照用のカスタムパーツは「枠」が必ず付与され、枠内にコンテンツを配置します。

最初に付与される枠には必ずclassの指定を行いましょう。不要なタグを減らすための工夫です。

カスタムパーツの作成方法

カスタムパーツの作成方法について

カスタムパーツ

カスタムパーツを作成するためには、ページCMS左上の[カスタムパーツ]をクリックします。

カスタムパーツのページに遷移するとレイアウト毎にコピー用と参照用のカスタムパーツを追加するための[追加]ボタンがあります。

 

作成したカスタムパーツは、カスタムパーツを作成したレイアウトを設定したページで使用できます。また、親のレイアウトで作成したカスタムパーツは、それを継承している子供のレイアウトを指定したページでも使用することができます。

見出しサンプル見出しサンプル見出しサンプル

sample

[追加]ボタンをクリックすると、上記画像のような入力欄が表示されます。

パーツ名は下記のようにパーツの中身がどのようなコンテンツかわかるように登録します。

例)

・【共通】h2+枠

・【共通】画像(右)+テキスト

・【コピー】画像+キャプション

・【参照】お問い合わせ予約バナー

カスタムパーツのコピーを作成

sample

構築済みのコンテンツを後からカスタムパーツ化することができます。

図のようにカスタムパーツができるパーツ(枠)に 作成用アイコンがありますので、これをクリックします。

続いて、生成方法、種別パーツ名を入力して、[登録]ボタンをクリックして完了です。

まとめ

sample

カスタムパーツの作成方法の説明は以上です。

 

カスタムパーツを活用することで、HTMLタグを1つ1つ記述するのと比べて格段に速い速度で構築ができます。

その上、カスタムパーツは運用フェーズでもその威力を発揮します。

リテラシーの高くないサイトオーナーさんでもカスタムパーツを置くだけなら、サイトを更新したり、ページを作成したりできるので、制作側の手離れも非常に良くなります。

 

OWLetのカスタムパーツで構築も運用も簡単にしてしまいましょう!

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

那覇よくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>