SIRIUS(シリウス)の1カラムページで余計なものはCSSで全部消しちゃおう

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

1カラムページで余計なものはCSSで全部消しちゃおう

サンプル画像

 

シリウスにはサイドメニューのない1カラムページを作る機能があります。

 

ただしデフォルトで設定可能なのは
メインメニュー(サイドメニュー)の非表示までです。

 

コチラがそのサンプルページになります。

 

しかし場合によっては他の部分も非表示にして
よりインパクトの強いページにしたい時もあるでしょう。

 

そんな時はCSSを使って消しちゃいましょう。

 

以下のコードは「テンプレート」→「スタイルシート編集」の一番最後にでも
加筆しておいてください。

 

区切り画像

 

ヘッダー画像がいらないなら

コード

#header {
	display:none;
}

display:none; とは、文字通り「非表示にする(見えなくする)」という意味です。

 

パンくずリストがいらないなら

コード

#siteNavi {
	display:none;
}

 

グローバルメニューがいらないなら

コード

#topmenu {
	display:none;
}

 

検索ボックスがいらないなら

コード

#searchbox {
	display:none;
}

 

フッターリンクがいらないなら

コード

#footlink {
	display:none;
}

 

ここまでやればきれいさっぱり消えてなくなりますが、
場合によっては一番上の左端にテキストが残る場合があります。

 

そのテキストは<H1> タグという最重要見出しですので
ちょっとだけ設定を変えてみます。もちろん

 

h1 {

      display:none;

}

 

とやって消すこともできます。

 

ただ個人的には見出しタグに display:none; を指定するのは
スパムとみなされる”恐怖”もあるため
ここに限ってはあえて別の指定にしてあげようかと。

 

コード

h1 {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;
}

これは”幅も高さも0にすることで実質的に非表示になる”というものです。

 

結果としてはこれまでと同じく非表示になるので display:none; とどれほどの差があるのか微妙ですが、少なくともこちらの方が間接的な表現かなと勝手に思い込んでます。(-_-;)

ただし本来見えるはずのものを意図的に見えなくする行為はスパムと認定される危険性もあるので使用にはご注意ください。

たとえばテキストの色を背景色と同じ色にして、ソース上はテキストが存在するもののブラウザ上では実質的に”見えない”テキストに仕立てあげるCSS設定はGoogleではスパムとみなされると古くから言われています。

こういった心配が嫌なら、H1のテキストカラーを背景色に近いカラーにしてフォントサイズを少しだけ小さめにして、さらにはテキスト全体を右寄せにして”目立たなくする”という手もあります。

これならスパム認定はされないでしょう。

 

これまでのが全~部がいらないというなら、
まとめちゃいましょ。

 

コード

#topmenu,
#siteNavi,
#header,
#searchbox,
#entrylist,
#footlink {
	display:none;
}
h1 {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;
}

 

全部消したサンプルページがコチラになります。

 

1カラムページは何らかのカテゴリーの配下に置くのではなくドメイン直下に作成するようにした方がいろいろな面で無難です。

 

以上です。

購入ページへ


てっぺん