※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSのデザインモード

キャプチャ画像

SIRIUSの最大の特長とも言えるのがデザインモードの搭載でしょう。

 

これがあるおかげでHTMLを知らない方でも簡単にホームページを作れるようになったんですから。


デザインモードとは

デザインモードとはブラウザでの表示に近いレイアウト状態のまま編集できるモードのことです。

 

これに対してHTMLタグが主体の編集モードテキストモードと呼ばれます。

 

区切り画像

 

ある時期までSIRIUSにはデザインモードは搭載されてませんでした。

 

もちろん今と同じように、太字や囲み枠などの装飾機能はアイコンから一発入力が可能だったものの、編集画面上では自動入力されたHTMLタグのオンパレードといった具合で、HTMLに詳しくない人にとってはちょっと見づらい感があったことは事実です。

 

そこに搭載されたのが太字の設定をしたら実際に太字になった状態の画面を見ながら編集ができる「デザインモード」でした。

 

これは画期的なバージョンアップですよ。

 

だってHTMLタグなど目にすることなく各種装飾が1~2クリックで完了してしまうんですから。

デザインモードの働き

最初に通常の編集(テキストモード)画面とデザインモード時の比較を見ていきます。

 

通常編集(テキストモード)は、たとえ画像があったとしても、あるいは装飾機能が施されていたとしても、すべてはテキストレベルで表示されます。

 

これに対しデザインモードでは画像も装飾機能も”思った通りの”イメージで表示されます。

 

ここが大きな違いです。

 

キャプチャ画像

 

デザインモードでの編集のやり方は基本的にはテキストモードでの編集と同じやり方で大丈夫です。

 

一例としてデザインモード状態で、(下の画像の赤文字の)『サンプルテキスト』という文のフォントサイズを大きくしてみます。

 

キャプチャ画像

 

範囲選択してフォントサイズを選びます。

 

キャプチャ画像

 

ブラウザを起動しなくても実際に大きくなったのが確認できます。

 

キャプチャ画像

 

テキストモードに切り替えれば通常の編集画面に戻すこともできます。

 

キャプチャ画像

 

ただしこの段階ではまだ元の編集画面には反映されてないので、必ず「OK」ボタンをクリックして変更を確定させます。
キャプチャ画像

 

ブラウザ上での表示を完全再現できるわけではないので、プレビューでの最終確認は必要です。

 

またデザインモードが便利だからといってデザインモードのみで編集&修正作業を繰り返していると、場合によっては無駄なHTMLコードが増えすぎて結果的にサイトが重くなってしまうこともありえます。

 

デザインモードに頼りきるのではなく、時々はHTML編集画面にも目も通してコードを確認するクセをつけておくといいですよ。

 

HTMLの勉強にもなるし、テキストモードでしか使えない機能も中にはあったりしますから。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像