• Breaking Entry

    TeLog Anime+Game

    深夜アニメのおもしろ記事や家ゲーRPG・ネトゲ・スマホゲームのおすすめ
    感想、レビュー、リセマラ、攻略系情報ブログ
    たまに知的好奇心をそそる記事も。





    2016年6月28日火曜日

    RSSフレーム内に自分の広告を取り入れる 【HTML/CSS/Javascript】





    汎用性の高いライブドアのRSS機能。そのフレーム(枠)に自分の広告を挿入する簡単なコードをご紹介します。この記事は自分専用のメモ書きとなんら変わりません。久々のコード記事ですが、もしRSSフレーム(枠)内に自分の広告を挿入したくてこの記事に辿り着いた方は参考にしてってどうぞ。
    表示させたい位置に以下のコードをコピーして貼り付けて下さい。
    <div class="rss-blogroll"><!--blog roll-->
    
    <!-- 相互RSSのコード ひとつ目-->
    <script type="text/javascript">
    <!--
         var blogroll_channel_id = 表示させたい自分の5桁のRSSコード;
    // -->
    </script>
    <script charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js" type="text/javascript"></script>
    <!-- 相互RSSのコード ひとつ目-->
    
    <!-- 相互RSSのコード ふたつ目-->
    <script type="text/javascript">
    <!--
         var blogroll_channel_id = 表示させたい自分の5桁のRSSコード;
    // -->
    </script>
    <script charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js" type="text/javascript"></script>
    <!-- 相互RSSのコード ふたつ目-->
    
    <!--
    RSSの数をひとつだけにしたい場合はチャンネル単位の設定からひとつのRSSの縦横サイズ指定を倍の数値に書き換えてください
    -->
    
    <div class="googlead"><!--RSS内に広告-->
    自分の広告コードを貼り付けてください
    </div><!--RSS内に広告-->
    
    </div><!--blog roll-->
    
    <style type="text/css">
    /* BlogRoll
    ----------------------------------------------- */
    /*全体の設定*/
    .rss-blogroll:after{
    display: block;     
    visibility: hidden;
    clear:both;
    height: 0;
    content: ".";
    }
    
    .rss-blogroll{
     margin: 10px 0;
     padding: 3px 0;
     border: 2px solid #b0b0b0; /*フレーム(枠)の色*/
     zoom: 100%;
     width: 925px; /*フレームの横サイズを指定*/
     height: 260px; /*フレームの縦サイズを指定*/
    }
    
    /*チャンネル単位の設定*/
    .rss-blogroll .blogroll-channel{
     float: left; /*左につめる*/
     overflow: auto;
     margin-bottom: 0;
     margin-left: 5px;
     padding: 0;
     width: 300px !important; /*ひとつのRSSの横サイズを指定*/
     height: 260px !important; /*ひとつのRSSの縦サイズを指定*/
     font-size: 12px;
    }
    
    /*リストの設定*/
    .rss-blogroll .blogroll-channel .blogroll-list {
     padding: 3px 0;
     padding-top: 0;
     border-bottom: 1px dashed #c2c2c2;
     list-style-type: none;
     font-size: 14px;
     line-height: 1.2;
    }
    
    /*テキスト部分の設定*/
    .rss-blogroll .blogroll-channel .blogroll-list a{
     padding-left: 5px;
     text-decoration: none;
    }
    
    .rss-blogroll .blogroll-channel .blogroll-list a:hover{
     text-decoration: underline;
    }
    
    /*NEWの文字の設定*/
    .rss-blogroll .blogroll-new-entry{
     color: #ff0a00; /*NEWのフォントカラーコードを指定*/
     font-weight: bold;
     font-size: 11px;
    }
    /* BlogRoll
    
    /* googlead */
    .googlead {
            float:right; /*右につめる*/
            padding:5px 5px 5px 5px;
    }
    /* googlead */
    </style>
    
    久々の【HTML/CSS/Javascript】記事を書きましたが、コード把握するのに時間がかかってダメですね…。ライブドアのRSSコードをちょちょいと変えて自分のコード付け加えただけの仕組みになってます。使いたい方はコピペってどうぞ(๑´•.̫ • `๑)

    0 件のコメント :

    コメントを投稿

    ANTENA RSS

    ARCHIVE

    LINK





    RE:ACCESS

    アクセスランキング

    Feedly

    follow us in feedly

    PAGE TOP