;

スポンサーサイト

0

    一定期間更新がないため広告を表示しています

    • 2019.10.15 Tuesday
    • -
    • -
    • -
    • by スポンサードリンク

    ブログのヘッダを、複数の画像の中からランダムで表示させる

    0
      これまで、ブログのデザインをカスタマイズすることなく使っていたけれど、心機一転も兼ねてこれをリニューアル。
      折角なので HTML や CSS をさわりたいなと思い、カスタマイズできるデザインに変更してみた。

      で、色々な人のブログを見てきて、密かにいいなーと思ったのが、ブログのヘッダ画像がロードの度に切り替わるやつ
      HTML に javascript を書いてるんだろうなと推測しつつ、調べながら設定をしてみた。

      ■ HTML編集フォーム
      配列でそれぞれの画像の文字列を定義 -> ランダムでインデックスを取得 -> 表示するという流れ。
      </head> の下あたりに作ってしまえばいい。

      <script type="text/javascript">
      /* 使用する背景画像を好きなだけ記述 */
      var headImg = new Array();
      headImg[0] = "http://img-cdn.jg.jugem.jp/cd7/878159/20140917_1142511.jpg";
      headImg[1] = "http://img-cdn.jg.jugem.jp/cd7/878159/20140918_1143605.jpg";
      headImg[2] = "http://img-cdn.jg.jugem.jp/cd7/878159/20140918_1143604.jpg";
      headImg[3] = "http://img-cdn.jg.jugem.jp/cd7/878159/20140918_1143603.jpg";
      headImg[4] = "http://img-cdn.jg.jugem.jp/cd7/878159/20140919_1143677.jpg";
      headImg[5] = "http://img-cdn.jg.jugem.jp/cd7/878159/20140919_1143678.jpg";
      headImg[6] = "http://img-cdn.jg.jugem.jp/cd7/878159/20140919_1143679.jpg";
      idx = Math.floor(headImg.length*Math.random());

      document.write ('<style type="text/css"><!-- #header {background-image: url("'+ headImg[Math.floor(idx)] +'");background-repeat:no-repeat;} --></style>');
      </script>


      ■ CSS編集フォーム
      CSS で表示させているところがあるので、コメントアウト(#を行頭に付ける)

      自分の環境の場合は、下記
      #background-image:url(http://imaging.jugem.jp/template/custom/img/bg_title_blue.jpg);


      ★ ★ ★

      ブログのヘッダ画像は、これまで撮ってきた城の写真を、いろんな感じで処理してみたもの。




      その1) 熊本城 (ソフトレンズ)


      その2) 上田城 (オイルペイント)


      その3) 松本城 (鉛筆画)


      その4) 安土城本丸からの景色



      その5) 名古屋城 (オイルペイント)


      その6) 掛川城 (スポットライト)


      その7) 伊賀上野城石垣 (ソフトレンズ処理)


      その8) 大洲城

       

      | 1/1PAGES |

      PR

      calendar

      S M T W T F S
         1234
      567891011
      12131415161718
      19202122232425
      262728293031 
      << July 2020 >>

      counter

      ブログパーツUL5

      books

      ひろの最近読んだ本

      selected entries

      categories

      archives

      recent comment

      links

      profile

      search this site.

      others

      mobile

      qrcode

      powered

      無料ブログ作成サービス JUGEM