ホームページへの設置、カスタマイズ

ホームページへの設置

設置方法（ホームページ）

head記述 head部分にダウンロードしたjavascript、cssを読み込ませます。
rss.phpはrss.jsと同じフォルダに格納してください。


……
……
<link href="css/btnews.css" rel="styleSheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/rss.js" type="text/javascript"></script>
</head>

※jQueryが設置済みの場合は4行目の記述は不要になります。

javascript記述 js/rss.phpのままではニュースボードが表示されないことがあります。
ニュースボードが表示されない時は、相対パスのURLを変更してください。

【記述例】Wordpressのテーマ内にあるrss.phpを利用する場合。

※Wordpressの格納場所がドメイン直下のルートディレクトリの場合

$(function() {
  $.ajax({
    url: '/wp-content/themes/テーマ名/js/rss.php',  //変更箇所
    xmlType: 'xml',
    cache: false,
    }).done(function(xml) {
      var row = 0;
      var data = [];
      var nodeName;
      var output = $('#feed');
……
……

HTML <body>内の表示したい場所に下記の内容を記述します。

【表示場所が700px以上の場合】

<body>
……
……
<div id="bts-news" class="m-b30">
<div class="posi-rlt clearfix">
<strong>ボート業界NEWSボード</strong><a href="https://boaters.jp/" target="_blank">もっと見る</a><p class="posi-abs">ボート業界の広報部</p>
</div>

<div class="dis-tbl_tab">
<div id="feed" class="dis-tblcl01 vat"></div>

<div id="bt-link" class="dis-tblcl02 vat">
<div class="dis-tbl">
<p class="dis-tblcl01"><img src="https://boaters.jp/wp-content/themes/boaters-ne/images/bn_site-link.png" alt="BOAT MARINE RELATED SITE" width="33" height="110"></p>
		
<ul class="dis-tblcl02">
<li class="bt posi-rlt"><a href="https://boaters.jp/" target="_blank">ボート業界の便利を創る ボーターズ</a></li>
<li class="ne posi-rlt"><a href="https://boaters.jp/" target="_blank">ボート業界の広報部 ボーターズNE</a></li>
<li class="bs posi-rlt"><a href="https://www.boatsensor.com/" target="_blank">中古艇情報 ボートセンサー</a></li>
<li class="bm posi-rlt"><a href="https://www.boat-museum.com/" target="_blank">WEB博物館 ボートミュージアム</a></li>
</ul>
</div>
</div>

</div>

</div>

……
……
</body>

【表示場所が699px以下の場合】

<body>
……
……
<div id="bts-news" class="m-b30">
<div class="posi-rlt clearfix">
<strong>ボート業界NEWSボード</strong><a href="https://boaters.jp/" target="_blank">もっと見る</a><p class="posi-abs">ボート業界の広報部</p>
</div>


<div id="feed" class="m-t20"></div>

<div id="bt-link" class="m-t30">
<div class="dis-tbl">
<p class="dis-tblcl01"><img src="https://boaters.jp/wp-content/themes/boaters-ne/images/bn_site-link.png" alt="BOAT MARINE RELATED SITE" width="33" height="110"></p>
		
<ul class="dis-tblcl02">
<li class="bt posi-rlt"><a href="https://boaters.jp/" target="_blank">ボート業界の便利を創る ボーターズ</a></li>
<li class="ne posi-rlt"><a href="https://boaters.jp/" target="_blank">ボート業界の広報部 ボーターズNE</a></li>
<li class="bs posi-rlt"><a href="https://www.boatsensor.com/" target="_blank">中古艇情報 ボートセンサー</a></li>
<li class="bm posi-rlt"><a href="https://www.boat-museum.com/" target="_blank">WEB博物館 ボートミュージアム</a></li>
</ul>
</div>
</div>

</div>
……
……
</body>