TOP > ビジネスデスク> NEWSボード > ホームページへの設置、カスタマイズ

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

チーム Boaters
設置方法(ホームページ)
head記述 head部分に<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js” type=”text/javascript”></script>とダウンロードしたjavascript、cssを読み込ませます。
【記述例】 5件表示の場合
<head>
……
……



</head>
HTML <body>内の表示したい場所に下記の内容を記述します。
【記述例】
<body>
……
……


    Events & News  Event & Newsボーターズ
    …… …… </body>
    表示件数 head内に記述するjsファイルによって表示件が変更できます。
    • btnews-ss1.js … 表示件数 1件
    • btnews-ss2.js … 表示件数 2件
    • btnews-ss3.js … 表示件数 3件
    • btnews-ss4.js … 表示件数 4件
    • btnews-ss5.js … 表示件数 5件
    カスタマイズ(画像サイズやフォントサイズの変更方法)
    画像のサイズ btnews.cssの#feed .td-img {width:120px;}を変更して下さい。
    /* 画像サイズを変更する場合 */
    #feed .td-img {width:120px;}
    
    フォントサイズ、行間 フォントサイズを変更する場合、btnews.cssのfont-size:○○;を変更して下さい。
    行間を変更する場合、btnews.cssのline-height:○○;を変更して下さい。
    /* 文字サイズ、行間を変更する場合 */
    #feed .td-text .title {font-size:15px; line-height:1.5em;}/* タイトル */
    #feed .td-text .date {font-size:12px; color:#999999; line-height:1.5em;}/* 日付 */
    #feed .td-text .text {font-size:12px; line-height:1.5em;}/* 本文抜粋 */
    #feed .td-text .more-reed {font-size:12px; line-height:1.5em;}/* 『… 続きを読む』 */
    
    リンク リンクの文字色を変更する場合、btnews.cssのcolor:○○;を変更して下さい。
    リンクの下線の有無を変更する場合、btnews.cssのtext-decoration:○○;を変更して下さい。
    /* リンクの文字色、下線の有無を変更する場合 */
    #feed .td-text a.title {color:#0000EE; text-decoration:underline;}/* タイトル */
    #feed .td-text a.title:hover{color:#0000EE; text-decoration:underline;}/* タイトル オンマウス時 */
    
    #feed .td-text a.more-reed {color:#0000EE; text-decoration:underline;}/* 『… 続きを読む』 */
    #feed .td-text a.more-reed:hover{color:#0000EE; text-decoration:underline;}/* 『… 続きを読む』 オンマウス時 */

    カスタマイズ(画像、タイトル、日付などのレイアウト変更)

    btnews-ss1.js~btnews-ss5.jsの下記の部分を変更して下さい。
    また、画像や日付、本文抜粋などを表示したくない場合、該当する箇所を削除して下さい。
    ……
    ……
    	disp	= '
  • ' + '
    ' + '' + '
    ' + '
    ' + '' + dArr[i].title + '' + '
    ' + dArr[i].date + '
    ' + '
    ' + dArr[i].text + ' …' + '
    ' + '… 続きを読む' + '
    ' + '
  • '; …… ……
    • 【画像】
      + ‘<div class=”td-img”>’……'</div>’
    • 【タイトル】
      + ‘<a href=”’ + dArr[i].url + ‘” class=”title”>’ + dArr[i].title + ‘</a>’
    • 【日付】
      + ‘<div class=”date”>’ + dArr[i].date + ‘</div>’
    • 【本文抜粋】
      + ‘<div class=”text”>’ + dArr[i].text + ‘ …’ + ‘</div>’
    • 【… 続きを読む】
      + ‘<a href=”’ + dArr[i].url + ‘” class=”more-reed”>… 続きを読む</a>’