もう一枚貼ってみる

さてどうなりますやら

ここまでがテストの為の投稿で、ここからその意味などを。

実装してみたかったこととしては、投稿内容の最初の画像をjQueryで抜き出して、ヘッダーの背景画像にしつつ、その箇所にcssのlinear-gradientでグラデーションをかけつつ、background-blend-modeで色を合成したかったわけです。

準備としては、

  • itemページの判断
  • 投稿内容から最初の画像のアドレス取得
  • cssを書き加える

というような流れになってまして、itemページは、Bloggerのタグで、

<b:class cond="data:blog.url==data:blog.homepageUrl" name="idx"/>

というような具合で、bodyタグの下に上記を追加しまして、itemページの時には.idxというクラスが追加されます。

jQueryでは、この.idxのクラスがある時に処理をしてます。

if ( !$('body').hasClass('idx')) { //ここに処理内容 }

ここでは！にて.idxをbodyが持ってない時となってます。

次に最初の画像のアドレスですが、今のテンプレートでは、entry-contentというクラスが投稿コンテンツのところについているので、この中からimg要素があるかを調べます。

if ( $(".entry-content img").length ) { //ここに処理内容 }

画像がなかったら何もせず、画像があった場合は次のようにしてアドレスを抜き出しました。:firstを使ったらもっと簡単に行くかなと思ったわけですがうまく行かなかったので順番に拾ってます。

var imgSrc = $(".entry-content").find("img").first().attr("src");

これでimgSrcに最初の画像のアドレスが入りました。画像を入れたかった所が.site-headernbtというクラスが入っており、そこにbulmaのクラスで.heroというのを付け加えてありましたので、ここに対してcssをjQueryで追加します。

cssのlinear-gradientと画像アドレスをどう入れるのか分からなかったんですが、以下の完成形のようにした所、動作を確認しました。

jQuery(function($){
  if (!$("body").hasClass("idx")){
    if ( $(".entry-content img").length ) {
      var imgSrc = $(".entry-content")
            .find("img").first().attr("src");
      $(".site-headernbt.hero")
         .css("background-image", 
            "linear-gradient(135deg, #09c6f9, #045de9),url(" + imgSrc + ")"
        );
    }
  }
});

このような感じです。codeタグでは改行が無くなったんでpreタグ書きました。

たいしたことはしてないんですが、その組み合わせとか普通はそんなことしないだろ？というようなことをしてたんで書き残しておく次第です。

で、ここまで書いておいてあれなんですが、どうせならcodepenの所に書いて、ここに貼っ付ければ良かったなと今更ながらに思いました。次からこういうことがあったら載せて行こうかと思います。

スマホだけでここまでを書くのは苦行でした。精進します。