ブログテーマ「Aqours ver.YOU」をリリースしました

僕のリリースしたブログテーマについてです。
スライドショーのカスタマイズについても記載してます。

コンセプト

名前で分かる方もいらっしゃると思いますが、「ラブライブ!サンシャイン!!」の渡辺曜というキャラクターをイメージしたブログテーマとなっています。
Aqours ver.YOU - テーマ ストア

曜のイメージカラーであるブルーを基調に、どことなく「みかん」を配置。
シンプルな2カラムで作ってますので、カスタマイズは簡単に出来るかと思います。

nuruta2.hatenablog.com
nuruta.hatenablog.com

自分のエントリーですが、この辺参考にしてカスタマイズしてみて下さい。

最初自分のメインブログ用に作っていたのですが…。
ナビゲーションが上手く作用しなかったので断念したという残念な経緯があります。
多分殆どDLされないと思いますが…。
まあ、作った手前一応。

最新記事一覧

ブログタイトル直下に最新記事のスライドショーを付けられます。
デザイン⇒カスタマイズ⇒ヘッダに以下を記述して下さい。

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->


<script>
$.ajax({
        //はてなrssファイルを読み込む
        //ブログのアドレスの最後にrssをつける
     url:'http://nuruta.hatenablog.com/rss',
     success: function(data){

                    //はてなrssの読み込み
                    var rss_url = 'http://nuruta.hatenablog.com/rss';

          var htmlstr = "";
          htmlstr += '<div id="wrapper2">';
          htmlstr += '<div id="new-entry">New Entry</div>';
          htmlstr += '<div id="slideshow">';
          htmlstr += '<div class="slideContents">';

                    //アイテムの調整
          $.get(rss_url, function(data) {
               $(data).find("item").each(function (i) {
                    var el = $(this);
                    var elimg = el.find("enclosure").attr("url");

                    htmlstr += '<section id="slide';
                    htmlstr += i+1;
                    htmlstr += '">';
                    htmlstr += '<iframe class="hatenablogcard" style="display: block; width: 100%; height: 150px; max-width: 500px;" title="' + el.find("title").text() + '" src="http://hatenablog.com/embed?url=' + el.find("link").text() + '" frameborder="0" scrolling="no"></iframe>';
                    htmlstr += '</section>';

                    if(i === 4) { // 表示件数の設定
                        return false;
                        };
               });

          htmlstr += '</div>';
          htmlstr += '</div>';
          htmlstr += '</div>';

          //footer前に挿入する
          $('#blog-title').after(htmlstr);
          });
     }
});
</script>

ソースコードの中のurlとなっている2か所をご自分のブログurlに変えて下さいね。
主なCSSはこんな感じです。

#wrapper2 {
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin-bottom:10px;
}
 
.slideContents {
  position: relative;
  background-color:#4784bf;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
 
.slideContents section {
  position: absolute;
  top: 0;
  left: 300px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: opacity .6s, -webkit-transform .6s;
  transition: opacity .6s, transform .6s;
}
 
#new-entry {
  font-weight:bold;
  background-color: #d3edfb;
  color: #008dcb;
  text-align:center;
}

これは元々組み込まれていますので、変えたい部分のみ変えてみ下さい。