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

SIRIUSのコメントアウトはソース上でも非表示

キャプチャ画像

『コメントアウト』というのは、Google Chromeなどのブラウザ上には表示されないけど、”ソース”には表示されちゃうテキストのことを言います。

 

”ソース”とは?

ソースというのは、ページの何もないところで右クリックして表示される「ページのソースを表示(※Chromeの場合)」をクリックすると開くテキストだけのページのことです。

 

このテキストは<h1><p class="xxx">といった”タグ”を使って書かれたHTMLと呼ばれる特殊なテキストで、Internet ExplorerやGoogle Chromeといったブラウザが、ソースの”タグ”を解釈しながら見出しや段落、画像などを決められたレイアウトで表示させています。

 

SIRIUSの【テンプレート】→【テンプレート編集】で見ることのできるコード類もソースの一種です。

 

その中に<!-- ★ヘッダー画像エリアここか★ -->といった記述があるかと思います。

 

他にも<!-- ★コンテンツここから★ -->というようなものもあるでしょう。

 

この<!-- ★★ -->ではさまれたテキストこそがコメントアウトと呼ばれる機能になります。


ちょっと特殊なコメントアウトがそこそこ便利

コメントアウトされた箇所はブラウザ上には表示されません

 

いわばサイト作成時のあなただけのメモ or 目印のようなものです。

 

たとえばヘッダー部分を少しカスタマイズしようと思ったとき、もしも『<!-- ★ヘッダー画像エリアここから★ -->』といったコメントアウトがなかったとしたら、まずはヘッダー部分を探すところから始めなきゃなりません。

 

しかしコメントアウトがあればすぐに該当する場所を探し出すことができます。

 

しかもSIRIUSのコメントアウト機能には、実は他にはないメリットがもう一つあります。

 

一般的にコメントアウトした部分はブラウザ上には表示されないもののソース上では表示されてしまうものです。

 

しかしSIRIUSのコメントアウトはソース上にも表示されることのない特殊なコメントアウトなんです。

 

そのため(ホームページに詳しい方も含めて)他人にいっさい見られることなく、いろんなことをテンプレート上に記述することができるというわけです。

 

自分だけにわかる文章でざっくり書きなぐってもソース上には一切表示されないんですからこれは便利以外の何物でもないでしょう。

 

こんなSIRIUSの特殊なコメントアウトを有効活用するには、コメントアウトアイコンをクリックするのが確実でラクです。

 

コメントアウトしたいテキストを範囲指定してコメントアウトアイコンをクリック

 

キャプチャ画像

 

そうやって変換されたコメントアウトは<!-- ★このコメントアウトはソース上でも非表示★ --><!-- ★★ -->で挟まれたものになります。

 

逆に言えばこの法則から外れれば(★がなくなれば)ソース上にわざとコメントアウトを表示させることもできます。

 

というかこっちの方が一般的なコメントアウトなんですけどね。

 

<!-- このコメントアウトはソース上に表示される -->

スタイルシートにもコメントアウト

スタイルシート上でもコメントアウトは有効です。

 

ただしこちらはSIRIUS専用のコメントアウトではなく一般的なコメントアウトになります。

 

やり方は一時的に無効化したい設定の前後を『/*』と『*/』で挟むだけ。

 

たとえばコチラ↓のような設定があったとします。

 

コード

p {
     font-size: 24px;
     font-weight:bold;
}

 

意味は1行目が「段落の文字サイズは24px」で、2行目が「太字にせよ」というものです。

 

これを文字サイズを標準に戻して太字設定もやめたい場合、設定そのものを削除してしまうのが一番カンタンです。

 

でももしかしたらあとでまた復活させる可能性もあるかもなんていうときは、コメントアウト機能を使って一時的に機能をOFFにしておいた方があとあとラクになります。

 

やり方は設定全体のアタマとオシリを『/*』と『*/』で挟むだけ。

 

それだけで各設定は無効化されます。

 

コード

/*p {
font-size: 24px;
font-weight:bold;
}*/

 

もしも太字設定だけをやめたい時は、太字部分だけをコメントアウトすればOK。

 

コード

p {
font-size: 24px;
/*font-weight:bold;*/
}

 

これ以外にもガイドとしてコメントアウトが使われることもあります。

 

たとえばこちら↓はSIRIUSの実際のスタイルシートの一部ですが、”基本スタイル”というガイドがコメントアウトされてます。

 

キャプチャ画像

 

このように設定とは直接関係ないけど、どんな設定なのかのガイドとしてコメントアウトが使われることはよくあることです。

※スタイルシートのコメントアウトはソース上にも表示されます。

 

あなたもこいうったコメントアウトの機能、うまく使ってみてください。

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

キャプチャ画像

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

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

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