ベーステンプレートを元に根本から変えたい!

テンプレートベースにカスタマイズ

 

CSSのclassやidをつかってブロックエリアごとカラーやレイアウトの定義を変えたり、HTMLタグに直接styleを追記したり、jqeryやスクリプトを挿入して動きのあるサイトにしたい!といった悩みにもしっかりと対応できる優れた機能をご紹介します

テンプレート内のファイルを一括置換

一括置換

 

単純なテキスト置換とは違い、複数行にまたがるHTML構文などをまとめて同一条件を探して置換えが可能。また内容が同一ではなくても開始タグ〜終了タグを指定した範囲で条件を満たすブロックを全てのファイル内で一致する部分をまとめて入れ替えができます。この機能を利用すれば、共通ブロックである、ヘッダー・サイドバー・フッター等もベースとなるページを編集した後、まとめて全ページに適用できるため、大幅に効率アップ!

内部リンクの相対パスを自動調整

内部リンクの相対パス再設定

 

テンプレートをベースに新しいページを作成していく場合、新たにディレクトリを作成して元となるページを作成した場合、CSSやjsファイル、サンプル画像のなどの読み込み階層がずれてしまうことがある。これを手作業で直すのは非常に大変ですが、プレデストの内部リンク再設定機能を使えば、相対パスを自動的に振りなおして修正してくれます。再構築が必要な項目として一覧が表示されため、目視チェックで問題がなければ一瞬で修正してくれます。

古いテンプレートも最新のHTML5環境へ変換

HTML5変換

 

最初からHTML5であれば必要ありませんが、デザインが気に入っているけど旧式(HTML4.01・XHTML)等を利用している場合、HTML5変換機能でHTML5宣言と認識されるテンプレートに変換されます。HTML5でしか利用できないHTMLタグや記述方法もあるため、それらを利用したいという場合に有効な機能です。

どこにでもフリースペースを!スクリプト挿入機能

スクリプト挿入

 

スクリプト挿入機能は指定した場所に、プレデスト内で作成したコンテンツを挿入表示させることができる機能です。構成としては定型文を貼り付けるのと同じ感覚で挿入しますが、挿入後に、スクリプト挿入側でコンテンツに修正を加えると、エディタ上に設置したコンテンツにも反映されるため、後から修正の手間が省けます。スクリプト挿入機能で作成できるフリースペースは無制限。設置場所は任意の場所とbodyの上下(アクセス解析用)で指定可能です

修正に最適!HTMLタグ構造の把握と一括削除機能

HTMLタグ構造

 

サンプルをベースにするケースであっても、カスタマイズする過程で不要と感じるHTMLタグやCSSなどの指定などもあります。これらを探して部位的に削除・・ではなくカーソル位置から直近のHTMLとCSSの構造を一覧表示して、選択部位をまとめて削除といった細かい条件で削除ができるので、修正に役立つ便利機能です

関連CSS+スタイルタブとリアルタイムプレビュー

CSS編集機能

 

編集中のページで利用されているCSSを確認できる関連CSS機能を開いた状態で、スタイルタブに切り替えれば、エディタのCSSとスタイルタブのCSS一覧の選択表示が連動します。ダブルクリックで数値などを修正すると、それがプレビュー画面にリアルタイムに反映されるので、レイアウトの幅や空白の微調整などに非常に役立ちます

 


プレデスト,HTML編集 上級者