連載記事のNEWアイコンを任意の画像に変える方法

bingo!CMSの「連載記事一覧用ユニット」にデフォルトで設定されている「NEW」アイコン（gif）を、任意の画像（jpg、png等）へ置き換えるTipsをご紹介します。

前提として、ページにすでに連載記事一覧用ユニットを設置済みとします。
連載記事については以下マニュアルをご参照ください。

連載記事でお知らせをつくろう

また、「連載記事一覧用ユニット」がサイトに複数ある場合、ページごとに設定が必要です。

素材管理に任意のアイコンをアップロードする

bingo!CMS素材管理画面のサンプル画像。任意のpngアイコンをアップロードした状態を示している。
  1. 「NEW」アイコンの代わりに使用したい画像を用意し、bingo!CMS管理画面の「素材管理」からアップロードします。
    アップロードの具体的な手順は以下マニュアルをご参照ください。
    素材ファイルを追加する
  2. アップロードした画像の保存先URLをコピーします。
    後ほど使用するので、URLを適宜メモ帳などにペーストしておいてください。

CSS/JSにJavaScriptを記述する

bingo!CMSページ編集画面のサンプル画像。ページに個別のコードを実行させる「CSS/JS」の設定ボタンを示している。
  1. 「NEW」アイコンを変更したい「連載記事一覧用ユニット」のあるページ編集画面を開きます。
    画面右上あたりにある「CSS/JS（このページ用のcssとjavascriptの設定）」をクリックしてください。
bingo!CMS「CSS/JS」の設定画面サンプル画像。アイコン画像を置き換えるJavaScriptの入力方法を示している。
  1. 後述のJavaScript 記述例を全てコピーし「javaScript」の入力欄にペーストします。
  2. 記述例の「/global-data/xxxxx.png」の部分を、先ほどコピーしておいた保存先URLの「/global-data...」以下と置き換えます。
  3. スマートフォンでも「NEW」アイコンを置き換える場合は「スマートフォンにコピー」をクリックします。（※bingo!CMS1.7.2以降のみ）
  4. 「保存」をクリックし、右上の × で画面を閉じます。

JavaScript 記述例

<script> 
document.querySelectorAll("img[src*='ico_new.gif']").forEach(function(img){ 
    img.src="/global-data/xxxxx.png"; 
}); 
</script>
bingo!CMS「ページ編集画面」のサンプル画像。ページを再読み込みする操作方法を示している。
  1. ブラウザのリロードボタンまたは「Ctrl」+「R」や「command」＋「R」等でページ編集画面を再読み込みすると、「NEW」アイコンが任意のアイコンに置き換わります。

以上で操作は完了です。適宜ページを公開/更新してください。

なお、素材管理から画像を削除すると、リンク切れとなりアイコンが表示されなくなりますのでご注意ください。

その他の置き換え方法

「連載記事一覧用ユニット」の「NEW」アイコンは、各スキンの「common-img」に格納された「ico_new.gif」を使用しています。
同じファイル名をつけた任意のgifへ差し替えの上、bingo!CMSにスキンをインストールすると、そのスキンの使用中は同じサイト内の全ての「連載記事一覧用ユニット」の「NEW」アイコンが置き換わります。
ただし、この方法で「NEW」アイコンを置き換えた場合、スキンのバージョンアップごとに「ico_new.gif」の差し替えが必要です。
状況に合わせ、適切な方法をご検討ください。

その他のTips

ページトップ