ウェブ制作のクラウドビジネスをはじめよう！

bingo!CMSニュースレター

配信：2022年1月12日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像（ニュースレタートップ用）
こんにちは！ bingo!CMS 広報担当の鈴木です。
 
bingo!CMSの「連載記事」にデフォルトで設定されているNEWアイコンを、任意の画像（jpg、pngなど）に変える方法をご紹介します。

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

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

変更前
bingo!CMSの連載記事一覧のデフォルトのgifアイコン。赤背景に白抜きの文字で「NEW」 変更前（デフォルトは赤背景に白抜き文字のgifアイコン）

変更後
Tips実施後の任意に設定されたpngアイコン。青い旗に白抜きの文字で「NEW」 変更後（別途用意したpngアイコンに置き換わっている）

bingo!CMSの「連載記事一覧用ユニット」には、デフォルトで赤背景に白抜き文字の「NEW」gifアイコンが設定されています。
 
本Tipsを適用すると、デフォルトのアイコンを任意の画像（jpg、png等）へ置き換えることが可能です。
 
「連載記事一覧用ユニット」がサイトに複数ある場合、ページごとに設定が必要となります。

素材管理に任意のアイコンをアップロードする
bingo!CMS管理画面「素材管理」のサンプル画像
  1. デフォルトの「NEW」アイコンの代わりに使用したい画像を用意し、bingo!CMS管理画面の「素材管理」からアップロードします。
    アップロードの具体的な手順は以下マニュアルをご参照ください。

    素材ファイルを追加する
     
  2. アップロードした画像の保存先URLをコピーします。
    後ほど使用するので、URLを適宜メモ帳などにペーストしておいてください。

「CSS/JS」を開く
bingo!CMS管理画面「ページ編集画面 - CSS/JS」のサンプル画像
  1. 「NEW」アイコンを変更したい「連載記事一覧用ユニット」のあるページ編集画面を開きます。
     
  2. 画面右上あたりにある「CSS/JS（このページ用のcssとjavascriptの設定）」をクリックしてください。

JavaScriptを記述する
bingo!CMS管理画面「 CSS/JS」のサンプル画像
  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」アイコンが任意のアイコンに置き換わります。
     
  2. 以上で操作は完了です。適宜ページを公開/更新してください。
なお、素材管理から画像を削除すると、リンク切れとなりアイコンが表示されなくなりますのでご注意ください。
 

補足：その他の置き換え方法
「連載記事一覧用ユニット」の「NEW」アイコンは、各スキンの「common-img」に格納された「ico_new.gif」を使用しています。
 
同じファイル名をつけた任意のgifへ差し替えの上、bingo!CMSにスキンをインストールすると、そのスキンの使用中は同じサイト内の全ての「連載記事一覧用ユニット」の「NEW」アイコンが置き換わります。
 
ただし、この方法で「NEW」アイコンを置き換えた場合、スキンのバージョンアップごとに「ico_new.gif」の差し替えが必要です。
 
状況に合わせ、適切な方法をご検討ください。
 
本Tipsは、ニュースレターの配信と同時に、bingo!CMSマニュアルサイトにも掲載いたしました。
他にも便利な情報を掲載していますので、ぜひ覗いてみてください。
 
Tips - bingo!CMSマニュアルサイト
 
以上、お役に立てば幸いです。
 
 
それでは！
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ