みずー工房

- 3Z1K-Works -

【HTML】一括で消せるように仕込む

途中で内容を消したいと事前に考えているとき、後にひとつひとつ記事を編集するのは面倒です。
事前に設定をしておくことで、一括で表示を消すことができます!
例えばブログランキング用のリンクボタンなどは、必要のなくなった時に一括で消すことができます。



非表示タグを作ってみよう!

divタグとclass属性を用いることで、簡単に設定できます。


作り方

まずデザインCSSにこれを仕込みましょう。「hidden-tag」という名前でclassを定義します。
デザインCSSには末尾に追記する形で、コピペしてください。

CSS

.hidden-tag {
    display: static;
}


次に消したい内容を以下のdivタグで囲みます。class要素に先ほど定義した「hidden-tag」を指定します。
例えばこんな感じ。私はランキングサイトに加入していないので、代わりにそれっぽい画像を使ってます。

このタグの中に消したい内容を書きましょう!
以下をポチッと押してください。

HTML

<div class="hidden-tag">
このタグの中に消したい内容を書きましょう!<br>
以下をポチッと押してください。<br>
<img>
</div>


表示・非表示を調整する

divタグで囲んだ内容を一括で非表示にしてみましょう。
非常に簡単で、デザインCSSに追記したhidden-tagクラスの中のdisplayを以下に書き換えるだけです。

CSS

.hidden-tag {
    display: none;
}


反対に戻したい(再表示させたい)ときは、先ほどと同じように書けば表示されます。

CSS

.hidden-tag {
    display: static;
}


このタグの主な目的

このタグは、配置された全ての記事を一括で表示・非表示を行うことができるものです。
では、そもそも事前に消したい内容を予測できる場合があるのでしょうか?
例えばで考えられるのは、ブログランキングサイトのリンクです。


ブログのランキングサイトのリンクは、
ブログ開設当初は、多かれ少なかれ人が訪問してくれるので非常に役に立ちます。


しかし、しばらくしてアクセス数が増えると、ランキングサイトのリンクを解除したいと思うかもしれません。
なぜそう思うのかというと、 リンクをクリックするために訪問者がランキングサイトに流れて、
関連記事等の派生アクセスが見込めなくなる
からです。
詳しい話は、別途記事にしようと思います。


つまり「ポチッと押してください!」ってのが後々アクセス流出につながり、
数百の過去記事の全編集を行わなければならなくなった、という方もいるそうです。
仕込むことで作業を省略でき効果的にブログの運営ができると思います。


SEO対策には問題あり?

既にお気づきのとおり、この方法の肝はCSSで記述する「display: none;」にあります。
では「display: none;」を利用することでデメリットが発生することはないのでしょうか?
NOとは言えないって感じです。


主に問題が発生しそうなのはSEO対策(検索でトップに表示されるための工夫) です。
「display: none;」は、検索エンジン(GoogleYahoo!など)を欺くことができるそうです。
具体的な仕組みまではわかりませんでしたが、検索エンジン側が取得する情報と実際の内容が大きく異なるなど、
検索順位に大きく影響を与えてしまう場合は、スパム扱いになってしまう場合があるそう。


一概に「display: none;」が悪とは言えませんし、便利なので使っても良いと思いますが、
ほどほどにということは頭に入れておいた方がいいかもしれません。


おわりに

divタグで指定したclass名は、好きな名前を指定することができます(一部を除いて)。
複数のclass名を用意しておけば、それぞれ非表示にすることができることもできますよ!
あと、ランキングサイトの規約もよく確認してくださいね。


おすすめ記事