今日のおすすめ記事 【クリックして読む】

【Cocconカスタマイズ】CSSでモバイルヘッダーを非表示にする方法

スポンサーリンク
ブログ

 

わたし
わたし

モバイルで記事のヘッダーを消しちゃいます!

 

まいどおおきに!おおもと(@so88qa)です

わいひら氏が作成した『最高の無料テーマCocoon(コクーン)』はシンプルデザインで、ユーザーにもブロガーにも大人気ですね!

 

唐突ですが、スマホで記事を読むとき

ヘッダー邪魔じゃね?

 

ごめんね

マジ個人的な意見だけど、

ヘッダー邪魔じゃね?

 

Cocoon(コクーン)なら、そんな些細(ささい)な不満もCSSで解消できちゃうんです!!!!

 

今回記事は、スマホで記事を読むときに、ヘッダーを非表示にするCSSを教えちゃいます!
(トップページではちゃんとヘッダーは表示されます)

 

 

オススメの本でCSSを勉強する

 

スポンサーリンク

Coccon(コクーン)のヘッダー非表示のCSS

 

わたし
わたし

バルス!!!

 

 

この赤で囲った部分を

このように消しちゃいます!

 

CSSサンプルコード(通知エリアありVer)

 

@media screen and (max-width: 768px) {
	.single #header-container {
		display: none;
	}
}

これで、画像のように通知エリアを残してヘッダーを非表示にできます。

 

CSSサンプルコード(通知エリアなしVer)

 

@media screen and (max-width: 768px) {
	.single #header-container,
	.single #notice-area {
		display: none;
	}
}

これで、画像の黄色の通知エリアごとヘッダーを非表示にできます。

 

スポンサーリンク

Coccon(コクーン)のヘッダー非表示の必要性

 

わたし
わたし

ブログはコンテンツが命!少しでも邪魔なものは排除するべし!

 

ぼくの持論ですが、ブログはコンテンツが命です。

 

すこしでも、気持ちよく文章を読んでもらうために邪魔だと思うものは、表示させない方が絶対にいいです。

 

ぼくの意見ですが、スマホで記事を読むときに「ヘッダー」はいらない

むしろ邪魔

 

ぼくと、同意見の方はヘッダー非表示のCSSをコピペして下さいね!

 

スポンサーリンク

Coccon(コクーン)のヘッダー非表示のまとめ

 

わたし
わたし

ヘッダーをなくして、さらにシンプルに!

 

わいひら氏が作成した『最高の無料テーマCocoon(コクーン)』はシンプルデザインでユーザーにも、ブロガーにも大人気!

 

文章が主役のブログで、ぶっちゃけ文章(コンテンツ)以外のものは必要でないです。

 

ぼくは、

  • シンプルに
  • わかりやすい
  • モバイルファースト

この3点を意識して、Cocoon(コクーン)のデザイン作成をしていくので

 

これからも、よろしくお願いします。

 

 

 

オススメの本でCSSを勉強する

 

 

わたし
わたし

質問があればコメント覧にコメントをしてくださいね!

コメント

タイトルとURLをコピーしました