ブログの記事にYouTubeの動画を貼り付けると、記事上では動画のアイコンの下部にwww.youtube.comというように引用元のURLが薄い文字で表示されます。


しかし、静止画を貼り付けた場合はこのような表示がされません。画像のオプションで色々な方法を試してみたのですが、上手くいきませんでした。

どうすればYouTubeの動画と同じように表示されるのでしょうか?

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:
  • 終了:2017/01/19 02:58:40

ベストアンサー

id:a-kuma3 No.1

回答回数4933ベストアンサー獲得回数2137

ポイント100pt

はてなブログには、その機能が無いので javascript を使ったカスタマイズでやります。

f:id:a-kuma3:20160218091131j:image:w200:right「デザイン」の左側にあるスパナのマークをクリック。
「ヘッダ」をクリック。
「タイトル下」の「HTML を記述できます」の下にあるテキストのエリアをクリック。


広がったテキストエリアの最後に、以下のコードを貼り付けます。

<script>
document.addEventListener("DOMContentLoaded", function() {
    var re = /^https?:\/\/([^/]+)/;
    Array.prototype.forEach.call(document.querySelectorAll("article .entry-content img"), function(img) {
        var mat = re.exec(img.src);
        if (mat) {
            var cite = document.createElement("cite");
            cite.className = 'hatena-citation';
            var link = document.createElement("a");
            link.href = img.src;
            link.innerHTML = mat[1];
            cite.appendChild(link);
            img.parentNode.insertBefore(cite, img.nextSibling);
        }
    });
});
</script>

テキストエリアの外のどこかをクリックすると、広がったテキストエリアが元に戻り、右側にプレビューが表示される(ちょっと待たされる)。
右側のプレビューで画像の下にサイト名が表示されていることを確認したら、左上の「変更を保存する」をクリックで反映されます。



とりあえず、記事中の IMG タグの画像の下に入れるようにしてます。

自分でブログにアップロードした画像には cdn-ak.f.st-hatena.com と、はてなフォトライフのサイトが表示されますが、これは要らないかな、とか、画像をクリックしたときの動作がある(画像を中央に表示)ので、リンクのタグにする必要はないかな、とか思わなくもないんですが。



追記です。
プログラムのコードを修正しました。

他3件のコメントを見る
id:a-kuma3

はてなブログをスマートフォンで見るときは

  • レスポンシブデザインのテンプレートを使う
  • そうじゃないケース

の、2種類があります。

アビイさんの場合は後者で、スマホでトップページを見たときのデザインがPCで見たときと違います。

後者の場合には、デザインのカスタマイズが 2ヶ所あります。
「デザイン」を選んだ後、スパナのマークの横にスマホのマークがあって、それをクリックするとスマホ用のデザインを変更できます(Pro だけですが)。

PC とスマホ共通でカスタマイズするなら、最初にコードを入れた「設定」→「詳細設定」→「headに要素を追加」にスクリプトのコードを設定するのが良いと思います。

2017/01/20 00:18:36
id:abbeyroad0310

パソコンでもスマートフォンでもちゃんと表示できるようになりました。ありがとうございました。

2017/01/22 22:04:28

その他の回答0件)

id:a-kuma3 No.1

回答回数4933ベストアンサー獲得回数2137ここでベストアンサー

ポイント100pt

はてなブログには、その機能が無いので javascript を使ったカスタマイズでやります。

f:id:a-kuma3:20160218091131j:image:w200:right「デザイン」の左側にあるスパナのマークをクリック。
「ヘッダ」をクリック。
「タイトル下」の「HTML を記述できます」の下にあるテキストのエリアをクリック。


広がったテキストエリアの最後に、以下のコードを貼り付けます。

<script>
document.addEventListener("DOMContentLoaded", function() {
    var re = /^https?:\/\/([^/]+)/;
    Array.prototype.forEach.call(document.querySelectorAll("article .entry-content img"), function(img) {
        var mat = re.exec(img.src);
        if (mat) {
            var cite = document.createElement("cite");
            cite.className = 'hatena-citation';
            var link = document.createElement("a");
            link.href = img.src;
            link.innerHTML = mat[1];
            cite.appendChild(link);
            img.parentNode.insertBefore(cite, img.nextSibling);
        }
    });
});
</script>

テキストエリアの外のどこかをクリックすると、広がったテキストエリアが元に戻り、右側にプレビューが表示される(ちょっと待たされる)。
右側のプレビューで画像の下にサイト名が表示されていることを確認したら、左上の「変更を保存する」をクリックで反映されます。



とりあえず、記事中の IMG タグの画像の下に入れるようにしてます。

自分でブログにアップロードした画像には cdn-ak.f.st-hatena.com と、はてなフォトライフのサイトが表示されますが、これは要らないかな、とか、画像をクリックしたときの動作がある(画像を中央に表示)ので、リンクのタグにする必要はないかな、とか思わなくもないんですが。



追記です。
プログラムのコードを修正しました。

他3件のコメントを見る
id:a-kuma3

はてなブログをスマートフォンで見るときは

  • レスポンシブデザインのテンプレートを使う
  • そうじゃないケース

の、2種類があります。

アビイさんの場合は後者で、スマホでトップページを見たときのデザインがPCで見たときと違います。

後者の場合には、デザインのカスタマイズが 2ヶ所あります。
「デザイン」を選んだ後、スパナのマークの横にスマホのマークがあって、それをクリックするとスマホ用のデザインを変更できます(Pro だけですが)。

PC とスマホ共通でカスタマイズするなら、最初にコードを入れた「設定」→「詳細設定」→「headに要素を追加」にスクリプトのコードを設定するのが良いと思います。

2017/01/20 00:18:36
id:abbeyroad0310

パソコンでもスマートフォンでもちゃんと表示できるようになりました。ありがとうございました。

2017/01/22 22:04:28
id:abbeyroad0310

ご回答ありがとうございました。ただ、どうも示していただいた画面とは少し異なるんですね。

>「デザイン」の左側にあるスパナのマークをクリック。

ここまではできました。しかし、次のステップに入れません。

>「ヘッダ」をクリック。

「タイトル下」の「HTML を記述できます」の下にあるテキストのエリアをクリック。

そもそもヘッダという画面にならないんです。「検索エンジン最適化」そして「headに要素を追加」という画面になります。そこへコードを貼り付けても何の変化もありません。

以下のような画面になります。

検索エンジン最適化

ブログの概要(meta description)

<meta name="description" content="..." > タグの content 属性として使われます

ブログのキーワード(meta keywords)

<meta name="keywords" content="..." > タグの content 属性として使われます

検索を避ける

検索エンジンに登録させない(noindex, nofollow)

ブログを検索エンジンのインデックスに登録させないようにします

headに要素を追加

<script></p> <p>(function() {</p> <p> var re = /^https?:\/\/([^/]+)/;</p> <p> Array.prototype.forEach.call(document.querySelectorAll("article .entry-content img"), function(img) {</p> <p> var mat = re.exec(img.src);</p> <p> if (mat) {</p> <p> var cite = document.createElement("cite");</p> <p> cite.className = 'hatena-citation';</p> <p> var link = document.createElement("a");</p> <p> link.href = img.src;</p> <p> link.innerHTML = mat[1];</p> <p> cite.appendChild(link);</p> <p> img.parentNode.insertBefore(cite, img.nextSibling);</p> <p> }</p> <p> });</p> <p>})();</p> <p></script>

HTML文書のhead部分に追加するmetaタグやスクリプトを自由に記述できます(既定のタグを書き換えることはできません)。

※ブログのヘッダー部分にブログパーツなどを追加するには、デザイン設定をカスタマイズしてください。

  • id:abbeyroad0310
    コードは正しいものに変えていただいたんですよね?やり方が分かったのでその通りにしてみたのですが、それでもうまくいきません。タイトル下の所にコードを貼り付けて変更を保存したんですが。
  • id:abbeyroad0310
    今ブログを確認しました。期待した通りの結果になっています。ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません