アビイ回答ポイント 100ptウォッチ

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32017/01/17 11:18:57

  満足100pt

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

  ---

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

  スター

  • 

    5件のコメントを見る

  • a-kuma3 2017/01/18 09:01:22

    ただ、どうも示していただいた画面とは少し異なるんですね。
    
    ＞「デザイン」の左側にあるスパナのマークをクリック。
    ここまではできました。しかし、次のステップに入れません。

    そこがちょっと違います。
    アビイさんがクリックしたスパナのマークの横には「設定」の文字があって、その下にあるパレットマークの「デザイン」をクリックした後の画面を回答に貼りました。
    
    でも、アビイさんがコードを貼り付けた「headに要素を追加」でも大丈夫です。
    
    

    そこへコードを貼り付けても何の変化もありません。

    すみません、javascript のコードが間違ってました。
    回答のコードを修正したので、お手数ですがコードを貼りなおしてみてください。

    スター

  • a-kuma3 2017/01/19 01:23:17

    やり方が分かったのでその通りにしてみたのですが、それでもうまくいきません。

    最新の記事だと、最初の画像に以下のように表示されています。
    
    
    こういうのを期待していたのではないのですか？

    スター

  • アビイ 2017/01/19 23:25:28

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

    スター

  • a-kuma3 2017/01/20 00:18:36

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

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

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

    スター

  • アビイ 2017/01/22 22:04:28

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

    スター

その他の回答

• アビイ

  2017/01/18 01:49:16

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

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

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

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

  「タイトル下」の「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タグやスクリプトを自由に記述できます（既定のタグを書き換えることはできません）。

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

この質問へのコメント

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

質問の情報

登録日時

2017-01-15 23:48:28

終了日時

2017-01-19 02:58:40

回答条件

1人1回まで

この質問のカテゴリ

• インターネット

この質問に含まれるキーワード

人気の質問

• OKI レーザープリンタートナーの再生品でおすすめのメーカー教えてください，トラブルが少なく，リーズナブ…relattori221時間前
• PHPでのクレジット決済について質問です。 自分のサイトのデータベースに顧客のクレジットカードの情報が入…aiomock20時間前
• 水泳の授業が１０月まである学校ありますか？kuth6119時間前
• 国家公務員法に関する質問 第84条 (懲戒権者) 1 懲戒処分は、任命権者が、 これを行う。 2 人事院は、この…minminjp2001122時間前
• https://www.google.co.jp/maps/@37.6881983,139.9472867,3a,32.4y,177.64h,107.51t/data=!3m8!1e1!3m6!1sA…匿名質問者21日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ