キラッとはてログ

ポヤポヤの主婦ポヤラが本気で取り組むブログ運営

記事内に商品プロモーションを含む場合があります。

トップ > 【はてなブログリンクの貼り方/スマホ編】ブログカードもYouTubeも埋め込みOK

【はてなブログリンクの貼り方/スマホ編】ブログカードもYouTubeも埋め込みOK

リンクの貼り方/スマホ編

はてなブログをスマホで更新しているあなた！こんな悩みはありませんか？

過去記事を紹介したいけど、ブログカードの埋め込みができない～！

YouTubeの貼り付けってどうやるの？？

そう…はてなブログってスマホからリンクを貼るとみ～んなタイトル名のテキストリンクになっちゃうのよね。

でも少し工夫するだけで、スマホからもきれいなブログカードが埋め込めるんです。

この方法を使えばYouTubeの埋め込みもカンタン！
お気に入りの動画をブログで紹介できちゃうよ。

■この記事でわかること■

はてなブログにスマホから・・・

  • ブログカードを埋め込む方法
  • YouTubeを埋め込む方法
  • 選択したテキストにリンクを埋め込む方法
  • 画像リンクを作成する方法←オマケ

 

 

 

 

はてなブログで貼れるリンクの形式

はてなブログでは、リンクをいろいろな形式でカンタンに貼ることができます。

【リンクの形式】

・埋め込み（ブログカード）↓↓

poyaran.com

・タイトル↓↓

初心者でもできる！はてなブログのサイドバーをおしゃれにする３つのカスタマイズ - キラッとはてログ

・URL↓↓

https://poyaran.com/entry/sideber-customize

・選択範囲↓↓

「初心者にもカンタンにできるサイドバーのカスタマイズをまとめました。」

・画像リンク↓↓
＊画像をタップするとリンク先に飛びます↓↓

サイドバーカスタマイズ/アイキャッチ

 

リンクの詳細やPCから貼る方法はこちらにまとめました↓↓

■関連記事■

 

スマホからリンクを貼る方法（URL・タイトル形式）

はてなブログではスマホからもカンタンにリンクを貼れますが、普通に貼ると「タイトル形式」か「URL形式」になってしまいます。

スマホ（アプリ）の見たまま編集で行います。

STEP
リンク先のURLをコピー

リンクの貼り方/リンク先のURLをコピー

このまま編集画面にペーストすると・・・

リンクの貼り方/URLをペースト

URL形式のリンクが表示されます↓↓

URL形式のリンク

STEP
「リンク」のアイコンをクリック

リンクのアイコンをクリック１

編集バーをスラッシュしていくと「リンク」のアイコンが出てきます↑↑
これをクリック↓↓

リンクの貼り方/アイコンをクリック

STEP
編集画面にリンクを挿入

リンクの貼り方/リンクを挿入

編集画面（見たまま編集）にはこのように表示されます↓↓

リンクの貼り方/スマホタイトル

プレビューするとタイトル形式で表示されています↓↓

リンクの貼り方/スマホタイトル形式

スマホアプリでは・・・

  • リンク先のURLを貼る→【URL形式】のリンク
  • リンクのアイコンをタップしてURLを挿入→【タイトル形式】のリンク

 

埋め込み形式（ブログカード）を表示させる方法

タイトル形式のリンクを埋め込み形式に変える方法は驚くほどカンタンです。

STEP
[title]を[embed]に書き換える

見たまま編集画面に表示されているHTMLコードの[title](タイトル）を[embed]（埋め込み）に書き換えるだけ↓↓

リンクの貼り方/タイトル埋め込み形式に

STEP
埋め込み形式（ブログカード）のリンクが表示される

するとタイトル形式だったリンクが埋め込み形式のブログカードにかわります。
カンタンでビックリ！

タイトル形式からブログカードへ

 

スマホからYouTubeを埋め込む方法

同じ要領でYouTubeも埋め込めます。

STEP
埋め込みたい動画のURLをコピー

動画のURLをコピー

①「共有」をクリック
②コピーをクリック

STEP

見たまま編集で「リンク」のアイコンをクリック

 

リンクをクリック

STEP
リンクを挿入

リンクを挿入

①コピーしたURLをペースト
②「挿入」をクリック

STEP
HTMLコードの[title]を[embed]に書き換える

HTMLの書き換え

見たまま編集画面に表示されるHTMLの[title]を[embed]に書き換えます。

これで完了です。

タイトル形式のリンクが・・・
Hey! Say! JUMP - 群青ランナウェイ [Official Music Video] - YouTube

埋め込み形式に代わり、このまま再生できるようになりました♪

 

選択範囲にリンクを貼る方法

スマホから選択した範囲のテキストにリンクを貼るのも超カンタンです。

記事本文にさりげなく貼る、こういうリンクです↓↓

■例文■
初心者にもカンタンにできるサイドバーカスタマイズをまとめました。

 

はてなブログスマホアプリの見たまま編集で行います。

STEP
リンクを貼る文章を書く
■例文■
初心者にもカンタンにできるサイドバーのカスタマイズをまとめました。
STEP
リンクを貼る範囲を選択する
■例文■

スマホでリンクを貼る/選択範囲

STEP
選択範囲にリンクを貼る

先ほど「スマホからリンクを貼る方法」でご紹介した手順でスマホの見たまま編集でにリンクを貼ります。

すると、見たまま編集画面にはこのように表示されます↓↓

スマホで選択範囲リンク/編集画面

プレビューすると↓↓

スマホで選択範囲リンク/プレビュー

選択範囲にリンク先の記事タイトルが表示されています。

STEP
titleの後に[=選択したテキスト]を書き足す

HTMLコードを書き足す

見たまま編集画面に表示されたHTMLコードのtitleの後に[=選択したテキスト]を書き足します。
今回は[=サイドバーのカスタマイズ]と書き足しました。

STEP
完成！

実際にスマホから貼ったリンク↓↓

■例文■
初心者にもカンタンにできるサイドバーのカスタマイズをまとめました。

HTMLの書き足しは見たまま編集のままで出来るので楽ちん！

スマホからX（旧Twitter）を貼る方法

スマホから、Web版のXにアクセスすれば、ポストを記事内に貼ることができます。

詳しくはこちらの記事にまとめました↓

スマホからXのポストをはてなブログに貼る方法 - キラッとはてログ

スマホから画像にリンクを埋め込む方法

PCでは選択範囲を利用すれば画像リンクもカンタンに作れます！

・・・しかし・・・

色々試したのですがスマホアプリからカンタンに画像リンクを貼る方法は見つけられませんでした。ごめんなさい…

どうしてもスマホで画像リンクを貼りたい場合は、アプリではなくWeb版のはてなブログからPC版を開いて操作するのがオススメです。

パソコンで色々なリンクを貼る方法はこちらの記事をご参考に↓↓

■この記事でわかること■

スマホからPC版を開く方法は、公式のはてなブログヘルプに詳しく紹介されています。デバイスごとに紹介されていてわかりやすいですよ↓↓

■参考記事■

 

まとめ/スマホからリンクを貼る方法

はてなブログのスマホアプリの見たまま編集で色々な形式のリンクの貼り方をご紹介しました。

  • 【URL形式】編集画面にリンク先のURLを貼ればOK。
  • 【タイトル形式】リンクのアイコンから貼り付ければOK。
  • 【埋め込み形式（ブログカード）】タイトル形式と同様に貼り付けて、編集画面に表示されるHTMLの[title]を[embed]に書き換えればOK。
    ＊ちなみに[embed]は「埋め込み」を表すタグです。
  • 【選択範囲】タイトル形式と同様に貼り付けて、編集画面に表示されるHTMLの[title]のあとに[=選択したテキスト]を書き足せばOK。

HTMLを少しだけ書き換えたり、書き足したりしますが、見たまま編集画面で操作できるのでカンタンです。

画像リンクだけはスマホアプリからは貼れませんでした。
PC版を開いて操作してね。

 

これからもはてなブログ初心者向けにわかりやすくて役立つ記事を更新していきます。

フォローよろしくお願いいたします。