やりたいことやってきたから報告するよ!

最近、Twitterで見たものを検証するサイトになりつつある…ズボラ家事、便利グッズ、福岡と熊本のことなど

【ブログ初心者必見!】Twitter、YouTube、Googleマップをはてなブログ上に埋め込む方法!(iPhone、PC)

f:id:qookunikiya:20180921224647p:plain

どうも国木屋 空(くにきや くう)です。

ブログの記事を最近あげたので、ブログを更新するときに地味に役立つけど、最初はわからなかったことをせめていこうかなと…!

 

わたしもあんまり詳しくないので、一度調べたことも何回も調べちゃったりするので(ハッ…老化かいな…!?)、ブログに書いてまとめたらさすがに忘れないかな!?と!忘れないといいな!忘れませんように…!!!

 

記事中のiPhone上のはてなブログは、アプリを使用しています〜!

 

全体の共通の流れは、

1 埋め込みたいもののHTMLタグやURLを取得する

2 自分のブログに貼る

って感じです! 

 

iPhoneからの場合、Googleマップはアプリからブログに埋め込むためのHTMLタグを取得することができないようなので、Safariなどから取得することになります!

 

なので、

1 SafariなどでPC画面表示にする

2 該当のものからHTMLタグを取得する

3 取得したものをブログ記事に貼る

の順番となります!

 

 

 

Twitterをブログに埋め込む方法(iPhone)

 

まずはTwitterをブログに埋め込む方法ですね!

わたしはiPhoneなので、iPhoneでのやり方を紹介します!

 

最初はSafariからPC用サイトを開いて〜というものを紹介していたのですが、リンクをコピーからの書き換えで簡単に済むようなので書き直しました!

 

その際大変お世話になったひろさんのブログはこちらです↓

hiro-log.hatenablog.jp

 

 

まずは埋め込みたいツイートのURLをゲットしましょう!

 

ここからはわたしのTwitterアプリでの手順になりますが…

埋め込みたいツイートを開きます。

f:id:qookunikiya:20180923234008p:plain

右下の↑みたいなところをタップ!

f:id:qookunikiya:20180923234101p:plain

その他の方法でツイートを共有」をタップ!

 

f:id:qookunikiya:20180923234142p:plain

リンクをコピー」をタップします!

これでツイートのURLがコピーされます!(下の方に”コピーされました”って文が出てくると思います)

 

ツイッターをフォローし合っていない姉に面白ツイートを共有したい時、わたしはこうやってURLをコピーして、ラインに貼って送っています〜!それかスクショw

 

 

次にはてなブログアプリで今コピーしたURLを貼る手順です。

 

アプリの記事編集画面を開いてくださいな!

ツイッターを埋め込みたいところを開いて照準を合わせて置いてくだせえ。

f:id:qookunikiya:20180923234443p:plain

このカメラマークの横あたりを左に2回ほどスライドします!(下の方に同じような手順のところで右矢印で書いちゃったけどそれは間違いだぞ☆めんご☆)

 

f:id:qookunikiya:20180923234642p:plain

一番左にリンクのマークが出てきますので、タップしちゃってください!

 

そしたらこんな画面が出てきます。

f:id:qookunikiya:20180923234804p:plain

長丸のところにURLを貼ればいいのですが、もうすでにURLをコピーした状態でリンクのボタンを押すとすでにURLを貼った状態で開きます!

挿入をおしましょう!

 

そうすると、なんか入力されますね。

f:id:qookunikiya:20180923234927p:plain

この「title」の部分を「embed」に変更してください!

 

f:id:qookunikiya:20180923235021p:plain

こんな感じで!

ここを変更できたら終わりなので、プレビュー画面で確認してみましょう!

 

キーボードマークを押して文字入力画面を下げて…(邪魔なのでわたしのスクショでは削除していますが…)

f:id:qookunikiya:20180923235407p:plain

プレビューをおしてみましょう!

 

f:id:qookunikiya:20180923235442p:plain

 

でででできてる!!!簡単や…最初に紹介したやつより全然簡単や…!!!

 

titleをembedに変更するのを忘れないようにしたいですね!もう「embed」って辞書登録しちゃおうぜ!(わたしはブログで使うものを辞書登録しまくっているので、たまにラインで文章送るときカオスな変換になることがあります…)

 

Twitterをパソコンから埋め込みたい場合はこちらから

 

YouTubeをブログに埋め込む方法(iPhone)

 

これ、後半(はてなブログに貼り付けるところ)のやり方はTwitterと全く同じです!

 

こちらのサイトさんを参考にさせていただきました!  

www.pogu-note.com

 

 

まず、iPhoneでYouTubeを開きます。アプリでオッケーです。

 

そして埋め込みたい動画を開いてください!

f:id:qookunikiya:20180922233614p:plain

視聴回数1回ってwww

共有のところをおします!

 

するとどのように共有するかが出てくるので、

f:id:qookunikiya:20180922233710p:plain

コピーをおしてください!

わたしの場合はおしたら下部に「コピーされました」と出てきてコピー完了しました。

もうひと画面出てくる人も、そこからコピーしてみてください!

 

そしたら貼りたいブログ記事の貼りたい場所を開きます。

この辺かな〜?

f:id:qookunikiya:20180922233846p:plain

このカメラのあたりを矢印のようにスライドしてみてください。(注:確認したら動きは逆方向でした!すみません)いろんな便利メニューが出てきます。

 

2回スライドしたらこの画面になります。

f:id:qookunikiya:20180922234024p:plain

この丸のところをおしてみましょう。リンクを挿入できます。 

 

f:id:qookunikiya:20180922234223p:plain

この画面が出てくるので、長丸のところに先ほどコピーしたリンクを貼り、貼ったら挿入をおします。

 

すると、リンクが挿入されます。

f:id:qookunikiya:20180922234411p:plain

そして、この「title」を「embed」に変更します!

f:id:qookunikiya:20180922234433p:plain

これでOK!

プレビューで確認すると、

f:id:qookunikiya:20180922234521p:plain

できてますね!!!いえーい!!!

 

 ↓そのまま残してみた。

 

 

YouTubeをパソコンから埋め込む方法はこちらから

Googleマップをブログに埋め込む方法(iPhone)

 

次はGoogleマップ!埋め込もう!

 

もーほんとiPhoneでのやり方わからん!ので調べました。

参考にしたのはこちらのサイト!

hiro-log.hatenablog.jp

 

Googleマップはアプリからじゃなくてブラウザから開かないといけないようです…クソめんどい(笑)

アプリも対応してくれ〜!!! 

 

というわけで、SafariからGoogleマップを開きます。

そのままだとスマホサイトになっているので、PCで見るような画面にします。

f:id:qookunikiya:20180922235628p:plain

ここをタップします。

 

f:id:qookunikiya:20180922235319p:plain

 出てきた画面をスライドして、「デスクトップ用サイトを表示」をタップします。

 

これで表示がスマホサイトからPCサイトになります

 

そして、地図を埋め込みたい場所を検索しましょう。

f:id:qookunikiya:20180922235814p:plain

(このお店、好きなんですよ…)

 

そして、共有をおしましょうね!

すると、

f:id:qookunikiya:20180922235901p:plain

この画面になると思うので、「地図を埋め込む」をタップしましょう!

 

すると貼り付け用のタグが出てくるのですが、めちゃめちゃコピーしにくそうな画面が出てきますので、頑張ってコピーしてくださいね!

f:id:qookunikiya:20180923000012p:plain

わたしはあまりiPhoneの画面を横にしたりしないのですが、これはさすがにした…

 

次に、コピーしたものをブログ記事に貼りましょう!

ブログの、貼りたい場所を開きましょう。

f:id:qookunikiya:20180923000120p:plain

貼りたいところを長押しすると、メニューが出てきます。

f:id:qookunikiya:20180923000134p:plain

HTML貼り付け」をおしてください!

すると、プレビュー確認しなくていいレベル!

 

f:id:qookunikiya:20180923000221p:plain

 

できてる!!!!

と、こんな感じですわな。 

 

パソコンでのやり方はこちらから

 

Twitterをブログに埋め込む方法(パソコン)

      

これはiPhone上でやるよりもっと簡単です。

 

PCの何かしらのブラウザ上でTwitterを開きます

そして埋め込みたいツイートの右上の∨をクリックします。

f:id:qookunikiya:20180922224124p:plain

 

メニューが出てくるので、「ツイートをサイトに埋め込む」をクリックします。

f:id:qookunikiya:20180922224234p:plain

するとまたタグが出てくるので、それをコピーします。

 

キーボードのCtrl+Aで全選択したあと、Ctrl+Cでコピーをすると早いよ!

macの場合はCtrlじゃなくてCommandですね。

f:id:qookunikiya:20180922224305p:plain

 

これでコピーができました!次はブログ側に貼る作業です。

 

貼りたいブログ記事の編集画面を出します。

HTML編集というところをクリックしましょう。 

f:id:qookunikiya:20180922224602p:plain

 

ほんで、貼りたい位置にさっきコピーしたものを貼ります。

よくわからないけど、わたしはいつも<p>と</p>の間に貼っています。

f:id:qookunikiya:20180922224704p:plain

↑この辺。貼った下に改行したい時は<p></p>をコピーして下部に貼ったりしてます。

 

f:id:qookunikiya:20180922224729p:plain

 

プレビュー画面で見てみましょう!

f:id:qookunikiya:20180922224902p:plain

 

貼れてますね!OKじゃ!!

 

ちゃんと表示されているか確認するようにしましょう〜!

 

↓これも貼った時のそのまま残してみた。

 

 

YouTubeをブログに埋め込む方法(パソコン)

      

次はYouTubeをパソコンからブログに埋め込む方法っすね!

 

YouTubeの埋め込みたい動画を開いてくださいね。

f:id:qookunikiya:20180923002126p:plain

視聴回数10回って…笑

共有、をクリック!

 

すると「どぎゃんして共有すっとか〜?」て聞いてくるので、

f:id:qookunikiya:20180923002227p:plain

埋め込む」をクリック!

するとタグが出てくるのでコピーしてくださいね!

 

f:id:qookunikiya:20180923002303p:plain

ちなみにこの「width」とか「height」の数字をいじると埋め込むYouTubeの画面の大きさが変わるよ!わたしはめんどくさいからいじったことないけどな!!

 

さて、これをブログ記事に貼りましょう。

貼り方はツイッターのと同じなので正直省略してもいいですか?え、ダメ?

f:id:qookunikiya:20180923002452p:plain

HTML編集、をクリック

 

貼りたい場所に

f:id:qookunikiya:20180923002517p:plain

コピーしたタグを貼りましょう!

f:id:qookunikiya:20180923002529p:plain

 

はい!もうOK!

プレビューで確認してね〜!

f:id:qookunikiya:20180923002600p:plain

できてるできてる〜!

 

↓これです!

 

 

Googleマップをブログに埋め込む方法(パソコン)

        

Googleマップをパソコンからブログに埋め込む方法ですが…今までの総集編感でています。もう正直解説はいらないと思うけど、目次から飛んできたあなたのために書いていくよ!

 

Googleマップでブログに埋め込みたい場所を検索して表示させましょう!

f:id:qookunikiya:20180923002754p:plain

ほんで共有を押そうね!もうわかってるよね?

 

f:id:qookunikiya:20180923002816p:plain

でてきた画面の「地図を埋め込む」を選択して、HTMLタグをコピーしましょう!

 

そしてコピーしたものを、HTML編集モードにしたブログ記事の貼りたい場所

f:id:qookunikiya:20180923002913p:plain

貼りましょう

f:id:qookunikiya:20180923002920p:plain

はい。

 

f:id:qookunikiya:20180923003051p:plain

プレビューするとこんな感じだけど、地図は編集見たままモードでも表示されますのでできてるなってわかると思います。

 

↓こんな感じになりました!

 

 

まとめ

 

どれもこれも、iPhoneでやるとパソコンよりちょっとめんどくさいっぽいですね…!

わたしは普段macで更新しているので初めて調べてみましたよ〜!お役に立てると幸いです〜!

 

しかし、iPhoneのはてなブログアプリ、なかなか使い勝手良さそうですね!スマホいじってるだけと見せかけてブログ更新とかやってみたいかもしれん…!

普段はメモにだらだら書いておいて、それをmacで添削&記事更新しているんですよね。うーん、iPhone更新、いいかも。

 

あと、アイフォンって打ったら変換されなくて、アイフォーンって打ったらiPhoneに変換できるのはなんでなのか。謎は深まるばかりであった…!

 

良いブログライフを〜!

最後まで読んでいただいてありがとうございました!