画像再表示エリアにブログランキング用画像などを再表示しないカスタム

概要

1. 特定の画像だけ枠線を表示させず、画像一覧で再表示させない方法の具体例です。

2. サイドバーの追尾ボックス(tbox)にある、画像再表示エリアで画像を再表示しないようにできます。各画像にクラス no-aimg を付加するだけです。下図は、本文エリア内のブログランキング用画像が再表示されている例です。

   

メリット

1. 再表示したい画像だけを選別できます。

2. 補足的な画像を再表示させないので、再表示エリアがすっきりします。

ブログランキング用画像のHTMLを編集

1. 次のようなコードを探します。ランキングによって追加したコードが異なりますので、ご自身で追加したランキング用コードを確認ねがいます。

   <img src="http://blogranking.fc2.com/ranking_banner/a_01.gif" />

2. たとえば、次のコードに変更します。下図で反転している部分が変更後です。クラスを追加しただけです。

   <img src="http://blogranking.fc2.com/ranking_banner/a_01.gif" class="no-aimg" />

3.  設定 をクリックすれば完了です。

JavaScriptを編集

1. この項目で述べるカスタム方法は必須ではありません。上記クラスを追加する方法だけで、再表示を制御できます。こんな方法もあるよ、程度の参考事例です。

2. HTML編集で、次のコメントアウトを探します。

   //▼▼ 定義追加用スペース3 開始 ▼▼

3. 上記コメントアウトの下に、次のコードを追加します。下図で反転している部分が追加後です。

   var no_aimg_h=35;

   

4. 上記コードを追加することで、記事本文エリア内にある高さが35px以下の画像はすべて再表示されなくなります。ただし、デフォルト設定では横幅が130pxを超える画像は再表示されます。詳細は、再表示するかどうかを元画像サイズで分岐で確認できます。

このページに関して

1. 予告なく変更する場合があります。

2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

4. 作者覚書：記事作成～公開まで１時間。

以上です。

関連記事

• valid-seoシリーズでjQueryを読み込む設定、5文字削除するだけ (2013/07/28)
• アイキャッチとサムネイルは別々にアップロードした方が自然な表示になる (2013/05/04)
• 画像再表示エリアにブログランキング用画像などを再表示しないカスタム (2013/05/03)
• 記事ごとやカテゴリごとのサムネイルはあるがアイキャッチがない場合 (2013/05/03)
• カルーセル内サムネイル画像ホバー時にタイトル背景を変更しない設定 (2013/05/03)
• カルーセル自体の横幅を増減させるカスタム、bodyにクラス付加するだけ (2013/04/02)
• カルーセル両端の矢印クリックでスクロールする記事数や秒数をカスタム (2013/04/02)