【備忘録】はてなブログの画像、記事に著作権表記を加えたい

メモ

もう3ヶ月前の話になりますが

2月18日にサクセスの動画・静止画投稿ガイドラインが公開されました。

かなり端折って一言で言うのであれば

著作権表記はしてくださいね、ってことなんですが

このガイドライン制定日以前のものに関しては

そこまで厳しく取り締まるつもりはない旨が書いてあるし

そもそもの話、うちがリンドリ記事あげてたことは

その著作権者に知られてるわけですからたぶん大丈夫でしょ？

･･･とは思ったんですが、それでもやはり気になってしまったので

こっそり著作権表記を追加していました。

 

で、今回はその際のノウハウを備忘録として残しておこうかと思った次第。

なお、流用する場合は自己責任でお願いします。

画像への著作権追記

今回のガイドラインによると

 

当社ゲームを用いた投稿・配信を行う場合は

動画・画像内に著作権表示を記載してください。

 

とのこと。

ウチでは動画は扱っていないため、該当するのは画像の方になります。

が、確認してみたところ「リンドリストーリーズ」カテゴリの記事に関しては

この対応が既に行われていたようで･･･。

2年近く前になるので覚えがないのですが

その当時にもそういう話があったんですかねー。

 

ともあれ、その当時に対処した方法というのが

 

CSSで画像の上にテキストを貼り付ける

 

というものでした。

毎回、画像に直接文字を書き入れるというのは

考えただけで嫌気がさしますからね･･･。

なので、「カスタマイズ」の「{}デザインCSS」欄に

.pictxt {/*親div*/
  position: relative;/*相対配置*/
}

.pictxt p {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  bottom: 0;
  left: 0;
  font-size: 12px;
}

.pictxt img {
  width: 100%;
}

上記を記載した上で

<div class="pictxt">
  <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/L/LITTLEWING/20220207/20220207235935.png" alt="f:id:LITTLEWING:20220207235935p:plain" width="1000" height="402" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
  <p>ここにテキストが追加されます</p>
</div>

このように、テキストを載せたいimgタグの下にpタグでテキストを書き

それらを class="pictxt" のdivタグでくくってやれば･･･

f:id:LITTLEWING:20220207235935p:plain

ここにテキストが追加されます

ごらんのように、画像左下にテキストが追記されました。

 

まあ･･･これは別に、はてなブログに限定した話ではないのですけどね。

 

各記事への著作権追記

これで一安心･･･といいたいところですが

ウチのリンドリ記事って全部で2000近くあるんですよ･･･。

これらの記事を一つ一つ開いて

それぞれの画像に上記の対処を施すとか無茶な話。

 

いや、たとえば「リングドリーム」カテゴリ記事内の

すべてのimgタグに一括で記載を加えるということであれば

難しい話ではないのです。

ただ、中にはリングドリームに関係ない画像だって

いくつか使ってるはずなんですよ。

そんな画像にまで、同じ著作権表記がされてしまっては

さすがに論外なわけで。

 

なので、画像ごとに著作権表記を加えるのは諦めました。

といっても、実は画像そのものにではないのですが

f:id:LITTLEWING:20220220124155j:plain

赤枠部分に以前は著作権表記してたんですよね。

ただこれ、PC上では問題なくても

スマホだとサイドメニューがないせいで

どこにも著作権表記が表示されないという問題が。

 

そんな経緯もあって

「リングドリーム」「リングドリーム烈伝」カテゴリについては

各記事の最後に1行加えておこうという結論になりました。

記事数が少なければ手作業で行ってもいいですが

2000近くとか指が死ねるので、以下のスクリプトで対応。

 

<script>
window.onload = function(){
  var inner=document.getElementById( "main-inner" );
  if(inner!=null){
    var art=inner.getElementsByTagName( "article" );
    if(art.length!=0){
      //記事毎に検索
      for(i=0;i<art.length;i++){
        //「リングドリーム」の記事を探す
        var tag1 = art[i].getElementsByClassName( "entry-category-link category-リングドリーム" );
        var tag2 = art[i].getElementsByClassName( "entry-category-link category-リングドリーム烈伝" );
        if(tag1.length!=0 || tag2.length!=0){
          //著作権追加
          art[i].getElementsByClassName( "entry-content" )[0].insertAdjacentHTML('beforeend', '<p>再下段に著作権表記を追加</p>');
        }
      }
    }
  }
};
</script>

 

このスクリプトを、詳細設定の

「<head>要素にメタデータを追加」欄に記載することで

同じカテゴリ（「entry-category-link category-」の後ろがカテゴリ名）の

記事に対して、一括で著作権表記を追記することが出来ました。

 

はてなブログのid、class構成に関しては

このあたりがわかりやすいので、そっちで見てもらうとして

記事本文は

<div class="entry-content">

  本来の記事本文

  <p>再下段に著作権表記を追加</p>
</div>

このように”entry-content”というclass名のdivタグ内に書かれているので

insertAdjacentHTMLを用いて、その最後に挿入したというわけです。

 

一応、Chrome、Edge、Firefox、Operaで確認したので

たぶんこれで大丈夫･･･だと思う。