- ご訪問ありがとうございます。
- すっかり夜中に
- こんばんは＾＾;
- 今日は思いの外時間が取れず、
- こんな時間になってしまいました💦
- 遅くなりましたが、
- 今日は昨日に引き続き、
- レシピの埋め込みを記したいと思います。
- 明日からはまた朝ごはん投稿に
- 戻るので、あと少しだけ
- お付き合いお願いいたします🙏
- 昨日に引き続き、
- スマートフォンの方は地球マークを
- タップしていただくと
- 見やすいかと思います。
- まずは昨日の復習から。
- 復習大切（笑）
- 動画を埋め込む場合の
- 大まかな手順は以下になります。
- 1.ブログの文章入力ページで
- 埋め込みたい場所に目印を付ける
- 2.埋め込みたい動画の
- 埋め込みコードをコピーする
- 3.ブログのHTML編集ページを開き
- 目印の位置に埋め込みコードを貼る
- そして、
- 埋め込みコードを貼る前か後に目印を消せば
- 完了です。＾＾
- 画像の表示サイズを変えたい場合は、
- 埋め込みコード内のタグ
- width＝"数値"
- height＝"数値"
- を探して、
- その数値を変えることで可能でしたね。
- 埋め込みコードさえコピぺできれば
- 何でも文章の途中に挿入することができます。
- では、レシピを挿入してみましょう。
- 私が日頃ブログに貼っているのは
- レシピブログというサイトにupしている
- 自分のレシピなのですが、
- おそらく一般的には
- クックパッドが主流かと思いますので、
- まずはクックパッドを貼ってみましょうか。
- このために私、
- 昨日はじめてクックパッドに
- 自分のレシピを投稿してみましたのよ(๑•̀ㅁ•́๑)✧
- 実は今までククパに投稿したことが
- 無かったというね。笑
- 私のように料理系ブロガーなら、
- 自作のレシピを貼りますが、
- ただ普通に、
- 作ってみたら美味しかったから
- 紹介したいな・・という気持ちで
- 他の方のレシピを自分のブログに
- 貼りたい場合もあるかと思います。
- もちろん、URLをそのままコピーしたり、
- クックパッドのレシピIDを記載する方法でも
- 伝わりますが、
- 埋め込みコードを使って挿入すると
- 材料や作り方が表示される上に
- そこからリンクもされるので
- ただ数字を並べるだけより
- 興味を持ってもらいやすいですよね。
- ですから埋め込みコードを使った
- レシピ表示は、レシピブロガーでなくても
- 何かと便利な気がします。＾＾
- さて、クックパッド。
- 昨日と同じく
- ブログに文章を打ち込み、
- 印をつけておきます。↓↓
- そして、
- 埋め込みコードが欲しいので
- クックパッドへGO!！
- 私の記念すべき
- ククパ初投稿レシピです（笑）↓↓
- この画面で探しても埋め込みコードが
- 出てきそうな場所はどこにもないので、
- 下へスクロールしていくと・・
- あったあった。
- 一番下にありました。
- PC版で表示！
- 赤丸の部分です。↓↓
- PC版で表示をタップすると、
- こんな画面が出てきます。
- 赤丸の部分に「レシピを共有」
- の文字がありますね。
- だがしかし。
- ちょっと待って。
- スマホ画面だと
- 最初は全体の端まで見えていないので
- ピンチインして全体を見ると、
- 右横の方にこんな箇所が。
- クックパッドは
- 下の方にある「レシピを共有」からも
- 埋め込みコードをコピーできますし、
- 右横にもコードをコピーできる場所がある
- とっても親切なサイトなようです。
- でね、よく見ると
- 「直接貼り付け」とあるので、
- タップしてみると・・
- 各ブログのロゴが現れ、
- ロゴをタップすれば
- ブログ編集の画面になります。
- 昨日のyotubeにもありましたよね。
- 直接投稿できるアイコン。
- 最近は便利ですね〜✨
- ここで直接タグ前後に文章を打って
- 投稿してもいいのですが、
- 練習にもなるので昨日と同様、
- アプリに持ち帰って埋め込みましょうか。
- この埋め込みコードを
- 全部コピーして・・・
- 目印の★★★のところに埋め込みます。
- こんな感じです。
- クックパッドは埋め込みコードが短いですね。
- 右上の完了をタップして確認してみましょう。
- 表示されました。
- どうやら画像はなく
- 純粋にレシピだけの表示ですね。
- これはこれで、パッと見で
- 材料も作り方も分かるので便利かも？
- レシピブログの場合も、
- まずレシピのページを開き・・
- スクロールして下の方にある
- 「PC版を表示」
- をタップします。
- するとこのようにPC表示に切り替わるので、
- やはりスクロールして下へ行き
- 「ブログで紹介する」をタップします。
- タップすると埋め込みコードが現れます。
- レシピブログの埋め込みコードは長いですが
- 全てコピーします。
- そして、Amebaアプリの
- ブログHTML編集のページで
- 目印を付けた位置に貼り付けると、
- こんな風に表示されます。
- きちんと貼れてはいるけれど、
- なんだか幅がいっぱいいっぱいで
- 窮屈な雰囲気。
- もっとスッキリさせたいので
- 枠幅のサイズを変えましょう。
- レシピブログの埋め込みコード内で
- 枠幅を示すタグは赤いアンダーラインの部分、
- max-width:400px
- になります。
- この数値を250にしてみましょう。
- ブログ上での表示はこうなります。
- 小さくなりましたね。
- ただ、アプリで見ると問題ないのですが、
- 地球マークを押してPC表示にしたり、
- 実際にデスクトップで見ると、こんな風に
- 画像だけが大きいままなので、
- 画像のサイズも変える必要があります。
- はみ出ちゃうの💦
- さきほどのレシピの枠幅を400から250に変えた
- HTML編集ページに戻り、
- 表示画像の幅を示す数値を探します。
- 青いアンダーラインの箇所
- width:100%
- がそうなので、
- ここを80%にしてみましょうか。
- 80%に変えると・・
- PC表示で確認しても
- はみ出ずに表示されるようになりました＾＾
そして、このままだと左寄りなので
レシピを中央に配置したいのですが、
文字数制限にかかってしまったので
次の記事に記しますね💦
長くなってしまい
申し訳ございません🙏
