テンプレートのデザインを変えたい！設定を削除する方法

BiNDupで新しくサイトを作る時、テンプレートを元にデザインを編集されていく方がほとんどかと思います。
デザインがあらかじめ用意されているテンプレートはとても便利ですが、逆にデザイン性が高いゆえにコンテンツによってはデザインが邪魔になる場合もあるようなので、
今回は「IMAGAWA Bridal」をサンプルにデザインをリセットする方法をまとめます。

設定箇所が分からないと思ったらここをチェック

BiNDupでは基本的にブロックエディタを使って編集して行きますが、高度なデザイン表現をする場合にはそれに限らなくなってきます。基本デザインではなかなか実現できないおもしろい表現を追求するために、テンプレートのデザイナーが機能を駆使しているからです。

だからこそ、そのまま使う分には良いのですが、アレンジしたい時、消したい時にユーザーさんはどこで設定しているのか分からないという状況に陥ってしまうのですね。

設定場所が分からない場合、ほとんどがDress側で設定されていることが多いのですが、ウィジェット機能を使ったデザインもあります。他のテンプレートでもヒントになると思いますのでぜひ参考にしてみてください。

ウィジェット機能を使ったデザイン

コピーライト

通常、ウィジェット機能はページの上に重ねてポップアップ表示したい場合などに活用しますが、（詳しくは下記参照）「IMAGAWA Bridal」のテンプレートはイレギュラーな使い方をしています。

実は、ページの左サイドに縦列しているコピーライトはウィジェット機能を利用してデザインされています。ちょっと想像が付きにくいのと、ウィジェット機能は編集モードを切り替える必要があるため、気が付きにくいかもしれませんね。

ウィジェット機能を利用した追従するコピーライト

ウィジェット機能を編集する場合には、編集モードを切り替える必要があります。編集画面の上部の切り替えボタンからモードを変更します。
編集モードを切り替えた後は、通常のブロック編集と作業は同じです。ウィジェットのブロックを削除したり非表示にすると良いと思います。

編集モードの切り替え

ウィジェット機能について詳しく知りたい方は、下記をご覧ください。

Dressのオプションを使ったデザイン【上級者向け】

設定場所がわからないよくある例として、「before要素」と「after要素」というものがあります。
これらはDressで簡単なコンテンツを追加できる特徴があるため、テンプレートでも部分的な装飾に使われることが多いです。
しかしDress側でしか設定の存在がわからないため、見つけにくくなってしまっています。

ブラウザの開発モードによる、after要素の確認

Dressでは「詳細設定」での「オプション」から設定できます。

Dressでのbefore、after要素の設定画面

テンプレート上での使用例

「IMAGAWA Bridal」ではこのようなところで「before要素」、「after要素」が使われています。

scroll下部の●部分

見出しの下線

見出しの下線の一部

ご覧のように、装飾の一部分であることが多いです。

要素の消し方

「before要素」、「after要素」は上記でお伝えした通り、ブロックエディタ上では存在せずDressで作られた要素です。
そのため編集・削除もDressからのみとなります。

手順としては、Dress設定画面で要素をクリックして、最後に「before要素」または「after要素」の付いた項目を探す方法がスムーズです。

目次ブロックの大見出しのafter要素

あとは、「高度な設定を表示」にチェックを入れ、「表示形式」を「表示しない」に変更するだけです。

高度な設定にチェックを入れ「表示形式」を編集

表示形式を「表示しない」に変更

Dress設定そのものを削除しても良いですが、あとで「やっぱり戻したい！」ということがあった場合、表示形式を戻せはすぐに復活させることができるので、上記の方法をおすすめします。

このような感じで、存在自体がわかりにくい設定もありますが根気よく探してみてください。
最後に今回設定したサイトデータを配布しますので、設定を確認するのに参考にしてください。