人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: アビイ
●カテゴリ:インターネット
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

はてなブログには、その機能が無いので 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 と、はてなフォトライフのサイトが表示されますが、これは要らないかな、とか、画像をクリックしたときの動作がある(画像を中央に表示)ので、リンクのタグにする必要はないかな、とか思わなくもないんですが。



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


a-kuma3さんのコメント
>> ただ、どうも示していただいた画面とは少し異なるんですね。 >「デザイン」の左側にあるスパナのマークをクリック。 ここまではできました。しかし、次のステップに入れません。 << そこがちょっと違います。 アビイさんがクリックしたスパナのマークの横には「設定」の文字があって、その下にあるパレットマークの「デザイン」をクリックした後の画面を回答に貼りました。 でも、アビイさんがコードを貼り付けた「headに要素を追加」でも大丈夫です。 >> そこへコードを貼り付けても何の変化もありません。 << すみません、javascript のコードが間違ってました。 回答のコードを修正したので、お手数ですがコードを貼りなおしてみてください。

a-kuma3さんのコメント
>> やり方が分かったのでその通りにしてみたのですが、それでもうまくいきません。 << 最新の記事だと、最初の画像に以下のように表示されています。 f:id:a-kuma3:20170119012025j:image こういうのを期待していたのではないのですか?

アビイさんのコメント
ありがとうございます。そうです、この表示です。ただ、パソコンでは表示されるのですが、スマホやタブレットでは表示されません。パソコンとスマホやタブレットでは何か違いがあるのでしょうか?

a-kuma3さんのコメント
はてなブログをスマートフォンで見るときは - レスポンシブデザインのテンプレートを使う - そうじゃないケース の、2種類があります。 アビイさんの場合は後者で、スマホでトップページを見たときのデザインがPCで見たときと違います。 後者の場合には、デザインのカスタマイズが 2ヶ所あります。 「デザイン」を選んだ後、スパナのマークの横にスマホのマークがあって、それをクリックするとスマホ用のデザインを変更できます(Pro だけですが)。 PC とスマホ共通でカスタマイズするなら、最初にコードを入れた「設定」→「詳細設定」→「headに要素を追加」にスクリプトのコードを設定するのが良いと思います。

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

質問者から

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

>「デザイン」の左側にあるスパナのマークをクリック。
ここまではできました。しかし、次のステップに入れません。

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

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

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

検索エンジン最適化

ブログの概要(meta description)

タグの content 属性として使われます


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

タグの content 属性として使われます


検索を避ける
検索エンジンに登録させない(noindex, nofollow)
ブログを検索エンジンのインデックスに登録させないようにします


headに要素を追加
(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>
HTML文書のhead部分に追加するmetaタグやスクリプトを自由に記述できます(既定のタグを書き換えることはできません)。
※ブログのヘッダー部分にブログパーツなどを追加するには、デザイン設定をカスタマイズしてください。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ