特定の画像だけ枠線を表示させず、画像一覧で再表示させない方法

更新
2012年10月14日(日)

記事内の画像にアウトラインを表示している場合、特定の画像だけアウトラインを非表示にする方法です。また、tbox内の画像一覧に再表示させない方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 記事内の画像表示について、表示の仕方を選択する方法です。

メリット

  1. 次の画像はアウトラインを非表示にしたほうが自然に見えます。

    • amazonアソシエイトのインプレッションカウント用画像(1x1)
    • 縦・横のサイズが小さな画像(16x16以下など)
    • 絵文字
  2. 必要な画像だけをtbox内の画像一覧で再表示できます。

テンプレートのHTMLを編集

  1. 外部JavaScriptファイルのファイル名を変更します。赤文字の部分が変更箇所です。ver1.3.0ではこの変更は不要です。

    • 変更前:120729-script-min.js
    • 変更後:120920-script-min.js
  2. テンプレートのHTMLに関しては以上です。

テンプレートのCSSを編集

  1. 次のコードを探します。ver1.3.0ではコードが若干異なりますが、その付近にあるコメントアウトで説明しています。

    /*.entry-content img{outline:3px dotted #ddd;}*/
    customtemplate-120-no-outline-img-1.png
  2. 次のコードに書き換えます。

    .entry-content img{outline:3px dotted #ddd;}
    .entry-content .no-outline{outline:0;}
    
    customtemplate-120-no-outline-img-2.png
  3. テンプレートのCSSに関しては以上です。

記事内の画像ごとに class を設定

画像のアウトラインを非表示

  1. 記事内の img タグに次のクラスを設定します。

    no-outline
  2. 下図がサンプルです。アウトラインが表示されていません。

    customtemplate-120-no-outline-img-3.png

tbox内の画像一覧で非表示

  1. 記事内の img タグに次のクラスを設定します。

    no-aimg
  2. 下図がサンプルです。tbox内の画像一覧で再表示されていません。

    customtemplate-120-no-outline-img-4.png
  3. no-aimg は、NO Automatic IMaGe display の短縮形です。英語が文法的におかしければご指摘願います。

  4. ver1.3.0では、 img の祖先要素に no-aimg を付与すれば、その要素内にあるすべての img が画像一覧で再表示されない機能を追加しました。

アウトラインおよび画像一覧で非表示

  1. 記事内の img タグに上記2つのクラスを設定します。

  2. 下図がサンプルです。アウトラインおよびtbox内の画像一覧で再表示されていません。

    customtemplate-120-no-outline-img-5.png

今後のテンプレート改訂時には

  1. テンプレートの改訂時にこのページで述べた内容を盛り込み、デフォルト状態からよりカスタムしやすいように改良する予定です。customtemplateはver1.2.1以降なら上記コードやキャプチャー画像とHTML編集やCSS編集内の記載事項に多少の相違があると思います。

  2. ver1.3.0への改訂で上記のとおりになりました。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)