にほんブログ村の提供しているバナーをちょっと改造してみた

WordPressブログ

にほんブログ村使用する際に公開しているブログに、にほんブログ村から提供されているバナーを使用することになったので、提供バナーをブログに張り付ける前に記載されているHTMLコードを見てみると、バナーを押したときのリンク先と、バナー下に表示されるリンク先が同じだったことに気づき・・・。

バナーを複数貼ると「にほんブログ村」が複数表示されるのが、個人的に嫌だったのでバナーだけ表示するようにして「にほんブログ村」のリンクは削除してしまおうかと。

「にほんブログ村」の文字リンクを削除する方法

以下がバナーのHTMLコードとなりますが、赤太字で記載したコードが「にほんブログ村」を構成しているコードとなるので、赤太字を全部削除してしまえばバナーだけ表示されるようになります。

<a href="https://stock.blogmura.com/salarymantrader/ranking/in?p_cid=11173176" target="_blank"><img src="https://b.blogmura.com/stock/salarymantrader/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 株ブログ サラリーマン投資家へ" /></a><br /><a href="https://stock.blogmura.com/salarymantrader/ranking/in?p_cid=11173176" target="_blank">にほんブログ村</a>
<a href="https://stock.blogmura.com/salarymantrader/ranking/in?p_cid=11173176" target="_blank"><img src="https://b.blogmura.com/stock/salarymantrader/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 株ブログ サラリーマン投資家へ" /></a><br />

実際にコードを削除すると以下のような感じで「にほんブログ村」が削除されすっきりとしました!!

yooshoo
yooshoo

バナーが3つありますが個人的にはいい感じになったと思っています。

バナーのtarget属性も気になったのでついでに修正

お仕事の関係上提供されたバナーの設定「target属性」がセキュリティ上あまりよろしくない設定となっていることに気づいてしまったので、これも直してしまおうかと。

<a href="https://stock.blogmura.com/salarymantrader/ranking/in?p_cid=11173176" target="_blank"><img src="https://b.blogmura.com/stock/salarymantrader/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 株ブログ サラリーマン投資家へ" /></a><br />

target属性が「_blank」に設定されている場合、新規で開かれたページで「windows.openner」を使用していることで、当ブログに悪影響を及ぼす問題点があるので以下のようにHTMLコードを修正します。

<a href="https://stock.blogmura.com/salarymantrader/ranking/in?p_cid=11173176" target="_blank" rel="noopener noreferrer"><img src="https://b.blogmura.com/stock/salarymantrader/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 株ブログ サラリーマン投資家へ" /></a><br />

まとめ

HTMLコードをいじって、にほんブログ村から提供されたバナーの文字リンク「にほんブログ村」の削除、バナーを安全に使用するために「rel=”noopener noreferrer”」の追加をしました。

HTMLコードに苦手意識を持っている人は、難しく感じますがどちらも記載された通りにコードを削除、追加すればできますので、私と同じように感じたらHTMLコード修正に利用してもらえるととてもうれしいです。

コメント

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