どうも国木屋 空(くにきや くう)です。
ブログの記事を最近あげたので、ブログを更新するときに地味に役立つけど、最初はわからなかったことをせめていこうかなと…!
わたしもあんまり詳しくないので、一度調べたことも何回も調べちゃったりするので(ハッ…老化かいな…!?)、ブログに書いてまとめたらさすがに忘れないかな!?と!忘れないといいな!忘れませんように…!!!
記事中のiPhone上のはてなブログは、アプリを使用しています〜!
全体の共通の流れは、
1 埋め込みたいもののHTMLタグやURLを取得する
2 自分のブログに貼る
って感じです!
iPhoneからの場合、Googleマップはアプリからブログに埋め込むためのHTMLタグを取得することができないようなので、Safariなどから取得することになります!
なので、
1 SafariなどでPC画面表示にする
2 該当のものからHTMLタグを取得する
3 取得したものをブログ記事に貼る
の順番となります!
- Twitterをブログに埋め込む方法(iPhone)
- YouTubeをブログに埋め込む方法(iPhone)
- Googleマップをブログに埋め込む方法(iPhone)
- Twitterをブログに埋め込む方法(パソコン)
- YouTubeをブログに埋め込む方法(パソコン)
- Googleマップをブログに埋め込む方法(パソコン)
- まとめ
Twitterをブログに埋め込む方法(iPhone)
まずはTwitterをブログに埋め込む方法ですね!
わたしはiPhoneなので、iPhoneでのやり方を紹介します!
最初はSafariからPC用サイトを開いて〜というものを紹介していたのですが、リンクをコピーからの書き換えで簡単に済むようなので書き直しました!
その際大変お世話になったひろさんのブログはこちらです↓
まずは埋め込みたいツイートのURLをゲットしましょう!
ここからはわたしのTwitterアプリでの手順になりますが…
埋め込みたいツイートを開きます。
右下の↑みたいなところをタップ!
「その他の方法でツイートを共有」をタップ!
「リンクをコピー」をタップします!
これでツイートのURLがコピーされます!(下の方に”コピーされました”って文が出てくると思います)
ツイッターをフォローし合っていない姉に面白ツイートを共有したい時、わたしはこうやってURLをコピーして、ラインに貼って送っています〜!それかスクショw
次にはてなブログアプリで今コピーしたURLを貼る手順です。
アプリの記事編集画面を開いてくださいな!
ツイッターを埋め込みたいところを開いて照準を合わせて置いてくだせえ。
このカメラマークの横あたりを左に2回ほどスライドします!(下の方に同じような手順のところで右矢印で書いちゃったけどそれは間違いだぞ☆めんご☆)
一番左にリンクのマークが出てきますので、タップしちゃってください!
そしたらこんな画面が出てきます。
長丸のところにURLを貼ればいいのですが、もうすでにURLをコピーした状態でリンクのボタンを押すとすでにURLを貼った状態で開きます!
挿入をおしましょう!
そうすると、なんか入力されますね。
この「title」の部分を「embed」に変更してください!
こんな感じで!
ここを変更できたら終わりなので、プレビュー画面で確認してみましょう!
キーボードマークを押して文字入力画面を下げて…(邪魔なのでわたしのスクショでは削除していますが…)
プレビューをおしてみましょう!
でででできてる!!!簡単や…最初に紹介したやつより全然簡単や…!!!
titleをembedに変更するのを忘れないようにしたいですね!もう「embed」って辞書登録しちゃおうぜ!(わたしはブログで使うものを辞書登録しまくっているので、たまにラインで文章送るときカオスな変換になることがあります…)
Twitterをパソコンから埋め込みたい場合はこちらから
YouTubeをブログに埋め込む方法(iPhone)
これ、後半(はてなブログに貼り付けるところ)のやり方はTwitterと全く同じです!
こちらのサイトさんを参考にさせていただきました!
まず、iPhoneでYouTubeを開きます。アプリでオッケーです。
そして埋め込みたい動画を開いてください!
視聴回数1回ってwww
共有のところをおします!
するとどのように共有するかが出てくるので、
コピーをおしてください!
わたしの場合はおしたら下部に「コピーされました」と出てきてコピー完了しました。
もうひと画面出てくる人も、そこからコピーしてみてください!
そしたら貼りたいブログ記事の貼りたい場所を開きます。
この辺かな〜?
このカメラのあたりを矢印のようにスライドしてみてください。(注:確認したら動きは逆方向でした!すみません)いろんな便利メニューが出てきます。
2回スライドしたらこの画面になります。
この丸のところをおしてみましょう。リンクを挿入できます。
この画面が出てくるので、長丸のところに先ほどコピーしたリンクを貼り、貼ったら挿入をおします。
すると、リンクが挿入されます。
そして、この「title」を「embed」に変更します!
これでOK!
プレビューで確認すると、
できてますね!!!いえーい!!!
↓そのまま残してみた。
YouTubeをパソコンから埋め込む方法はこちらから
Googleマップをブログに埋め込む方法(iPhone)
次はGoogleマップ!埋め込もう!
もーほんとiPhoneでのやり方わからん!ので調べました。
参考にしたのはこちらのサイト!
Googleマップはアプリからじゃなくてブラウザから開かないといけないようです…クソめんどい(笑)
アプリも対応してくれ〜!!!
というわけで、SafariからGoogleマップを開きます。
そのままだとスマホサイトになっているので、PCで見るような画面にします。
ここをタップします。
出てきた画面をスライドして、「デスクトップ用サイトを表示」をタップします。
これで表示がスマホサイトからPCサイトになります。
そして、地図を埋め込みたい場所を検索しましょう。
(このお店、好きなんですよ…)
そして、共有をおしましょうね!
すると、
この画面になると思うので、「地図を埋め込む」をタップしましょう!
すると貼り付け用のタグが出てくるのですが、めちゃめちゃコピーしにくそうな画面が出てきますので、頑張ってコピーしてくださいね!
わたしはあまりiPhoneの画面を横にしたりしないのですが、これはさすがにした…
次に、コピーしたものをブログ記事に貼りましょう!
ブログの、貼りたい場所を開きましょう。
貼りたいところを長押しすると、メニューが出てきます。
「HTML貼り付け」をおしてください!
すると、プレビュー確認しなくていいレベル!
できてる!!!!
と、こんな感じですわな。
パソコンでのやり方はこちらから
Twitterをブログに埋め込む方法(パソコン)
これはiPhone上でやるよりもっと簡単です。
PCの何かしらのブラウザ上でTwitterを開きます。
そして埋め込みたいツイートの右上の∨をクリックします。
メニューが出てくるので、「ツイートをサイトに埋め込む」をクリックします。
するとまたタグが出てくるので、それをコピーします。
キーボードのCtrl+Aで全選択したあと、Ctrl+Cでコピーをすると早いよ!
macの場合はCtrlじゃなくてCommandですね。
これでコピーができました!次はブログ側に貼る作業です。
貼りたいブログ記事の編集画面を出します。
HTML編集というところをクリックしましょう。
ほんで、貼りたい位置にさっきコピーしたものを貼ります。
よくわからないけど、わたしはいつも<p>と</p>の間に貼っています。
↑この辺。貼った下に改行したい時は<p></p>をコピーして下部に貼ったりしてます。
プレビュー画面で見てみましょう!
貼れてますね!OKじゃ!!
ちゃんと表示されているか確認するようにしましょう〜!
↓これも貼った時のそのまま残してみた。
プリンの話ばかり… #はてなブログ
— 国木屋 空 (@qoo_kunikiya) 2018年9月21日
セブンイレブン限定らしい明治プリン アイス&ミルク氷を食べました - やりたいことやってきたから報告するよ!https://t.co/TUW37GEKlb
YouTubeをブログに埋め込む方法(パソコン)
次はYouTubeをパソコンからブログに埋め込む方法っすね!
YouTubeの埋め込みたい動画を開いてくださいね。
視聴回数10回って…笑
共有、をクリック!
すると「どぎゃんして共有すっとか〜?」て聞いてくるので、
「埋め込む」をクリック!
するとタグが出てくるのでコピーしてくださいね!
ちなみにこの「width」とか「height」の数字をいじると埋め込むYouTubeの画面の大きさが変わるよ!わたしはめんどくさいからいじったことないけどな!!
さて、これをブログ記事に貼りましょう。
貼り方はツイッターのと同じなので正直省略してもいいですか?え、ダメ?
HTML編集、をクリック
貼りたい場所に
コピーしたタグを貼りましょう!
はい!もうOK!
プレビューで確認してね〜!
できてるできてる〜!
↓これです!
Googleマップをブログに埋め込む方法(パソコン)
Googleマップをパソコンからブログに埋め込む方法ですが…今までの総集編感でています。もう正直解説はいらないと思うけど、目次から飛んできたあなたのために書いていくよ!
Googleマップでブログに埋め込みたい場所を検索して表示させましょう!
ほんで共有を押そうね!もうわかってるよね?
でてきた画面の「地図を埋め込む」を選択して、HTMLタグをコピーしましょう!
そしてコピーしたものを、HTML編集モードにしたブログ記事の貼りたい場所に
貼りましょう!
はい。
プレビューするとこんな感じだけど、地図は編集見たままモードでも表示されますのでできてるなってわかると思います。
↓こんな感じになりました!
まとめ
どれもこれも、iPhoneでやるとパソコンよりちょっとめんどくさいっぽいですね…!
わたしは普段macで更新しているので初めて調べてみましたよ〜!お役に立てると幸いです〜!
しかし、iPhoneのはてなブログアプリ、なかなか使い勝手良さそうですね!スマホいじってるだけと見せかけてブログ更新とかやってみたいかもしれん…!
普段はメモにだらだら書いておいて、それをmacで添削&記事更新しているんですよね。うーん、iPhone更新、いいかも。
あと、アイフォンって打ったら変換されなくて、アイフォーンって打ったらiPhoneに変換できるのはなんでなのか。謎は深まるばかりであった…!
良いブログライフを〜!
最後まで読んでいただいてありがとうございました!