CDPの○○がいらないから消したい

up：

何故消したいのか考える

まず、レイアウトや時期などの理由から一時的に非表示にしたいだけか、それとも自分のサイトにとって完全に不要だと捉えたのかとはっきりとさせてください。

パンくずリストやページトップに戻るリンクや連絡先など、あなたが不要に思っても、それを便利で必要に感じている閲覧者がいるかもしれません。もしあなたがそれを完全にHTMLから削除するのではなくデザイン上CSSで非表示にするだけだったら、あとであなたの考えが変わったときにはCSSを編集するだけで表示することが出来ますし、CDPを理解している閲覧者は必要な要素については（貴方がCSSで消していても）表示して、自由にその情報を得ることでストレスなく貴方のサイトを見ることができるのかもしれません。

各サイトで配布されているCSSは基礎htmlを基準にして作られ完成されているため、非表示にしたり削除することでレイアウトが崩れる可能性もあります。作成者によってはサポートを受けられるかもしれませんが、改変したHTMLへの適応はサポート外かもしれません。カスタマイズができないのならば、非表示にしたり削除することを取りやめるか、そのCSSの使用を諦めてください。それを不服に感じたり、難しいと思うのなら、CDPはあなたのサイトにとって適当な雛形ではないようです。

サイト名（h1）を消す

完全に削除

小見出し（h2）がある以上、大見出しはあったほうがよいです。CDPの構造上消さないでください。<h1></h1>という状態も、先に記した「<tag></tag>」なのでダメです。サイト名なりそのページのタイトルなり適切な内容をあてがってください。

非表示

いずれかの指定が有効です。

  • h1{ display: none; }
  • h1{ visibility: hidden; }
  • h1{ height: 0px; overflow: hidden; }
  • h1{ overflow: hidden; text-align:left; text-indent: -3000px; }

パン屑リストを消す

完全に削除

<ul id="PAN">から次の</ul>まで全部消します。

完成例
<div id="HEADER">
  <h1>Your Site Title</h1>
</div>

非表示

いずれかの指定が有効です。

  • #PAN{ display: none; }
  • #PAN{ visibility: hidden; }
  • #PAN li{ display: none; }
  • #PAN li{ visibility: hidden; }
  • #PAN{ overflow: hidden; } ul#PAN li{ text-indent: -3000px; text-align:left; }

メニュー自体を消す

完全に削除

<div id="MENU">から次の</div>まで消す

完成例
<ul id="PAN">
  <li>index</li>
</ul>
</div>
<hr>

<!--================-->
<!--　　記事部分　　-->
<!--================-->
<div id="KIZI">

非表示

いずれかの指定が有効です。

  • #MENU{ display: none; }
  • #MENU{ visibility: hidden; }
  • #MENU *{ display:none; }
  • #MENU *{ visibility: hidden; }

メニューの一部項目を消す

完全に削除

<li id="MENUn"><a href="uri">項目名</a></li>

<li id="MENUn">から次の</li>までの一行を全部消します。

完成例
<ul>
  <li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
  <li id="MENU03"><a href="diary.html">日記</a></li>
  <li id="MENU04"><a href="link.html">リンクページ</a></li>
</ul>

（完全削除なら番号はつめたほうがいいかも）

非表示

いずれかの指定が有効です。(nには該当の番号）

  • #MENUn{ display: none; }
  • #MENUn{ visibility: hidden; }
  • #MENUn a{ display: none; }
  • #MENUn a{ visibility: hidden; }

トップ（ページ上部）に戻るリンクを消す

完全に削除

<ul class="modori">から次の</ul>まで全部消します。

完成例
<h2>sample</h2>
<div class="text">
  <p>【sample】の記事内容</p>
</div>

非表示

いずれかの指定が有効です。

  • ul.modori{ display: none; }
  • ul.modori{ visibility: hidden; }
  • ul.modori li{ display: none; }
  • ul.modori li{ visibility: hidden; }
  • ul.modori a{ display: none; }
  • ul.modori a{ visibility: hidden; }
  • ul.modori{ overflow: hidden; } ul.modori li{ text-indent: -3000px; text-align:left; }

フッター自体を消す

完全に削除

<div id="FOOTER">から次の</div>まで消す

完成例
<!--KIZIブロックを閉じます↓-->
</div>

<!--PAGETOPブロックを閉じます↓-->
</div>

非表示

いずれかの指定が有効です。

  • #FOOTER{ display: none; }
  • #FOOTER{ visibility: hidden; }
  • #FOOTER *{ display:none; }
  • #FOOTER *{ visibility: hidden; }

フッターリストの一部項目を消す

完全に削除

<li id="FOOTERn"><a href="uri">項目名</a></li>

<li id="MENUn">から次の</li>まで全部消します。

完成例
<ul>
  <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
  <li id="FOOTER03"><address><a href="http://css-designplate.info/">CSS Designplate</a></address></li>
</ul>

（完全削除なら番号はつめたほうがいいかも）

非表示

いずれかの指定が有効です。(nには該当の番号）

  • #FOOTERn{ display: none; }
  • #FOOTERn{ visibility: hidden; }
  • #FOOTERn a{ display: none; }
  • #FOOTERn a{ visibility: hidden; }