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

 

以上です。

購入ページへ


TOPへ戻る