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

Question

アビイ

1

1もっと見る

100pt

インターネット

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

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

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

回答の条件

1人1回まで

登録：2017/01/15 23:48:28
終了：2017/01/19 02:58:40

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

質問者から

アビイ2017/01/20 03:48:01

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

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

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

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

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

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

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

検索エンジン最適化

ブログの概要（meta description）

ブログのキーワード（meta keywords）

検索を避ける

検索エンジンに登録させない（noindex, nofollow）

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

headに要素を追加

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

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

規約違反として通知

アビイ 2017/01/19 00:46:14

コードは正しいものに変えていただいたんですよね？やり方が分かったのでその通りにしてみたのですが、それでもうまくいきません。タイトル下の所にコードを貼り付けて変更を保存したんですが。
アビイ 2017/01/19 02:57:30

今ブログを確認しました。期待した通りの結果になっています。ありがとうございました。

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

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

リクエスト送信済

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

a-kuma3 · Accepted Answer · 2017-01-17T11:18:57+09:00

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

「デザイン」の左側にあるスパナのマークをクリック。
「ヘッダ」をクリック。
「タイトル下」の「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 と、はてなフォトライフのサイトが表示されますが、これは要らないかな、とか、画像をクリックしたときの動作がある（画像を中央に表示）ので、リンクのタグにする必要はないかな、とか思わなくもないんですが。

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

a-kuma3 · Accepted Answer · 2017-01-17T11:18:57+09:00

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

「デザイン」の左側にあるスパナのマークをクリック。
「ヘッダ」をクリック。
「タイトル下」の「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 と、はてなフォトライフのサイトが表示されますが、これは要らないかな、とか、画像をクリックしたときの動作がある（画像を中央に表示）ので、リンクのタグにする必要はないかな、とか思わなくもないんですが。

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

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

ベストアンサー

a-kuma3497321542017/01/17 11:18:57

その他の回答（0件）

a-kuma3497321542017/01/17 11:18:57ここでベストアンサー

質問者から

コメント（2件)

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