『バナー』とは
自分で用意した横長の画像を
ブログに貼ってインスタやLINE公式など
他のSNSのリンクを設定するためのもの
ポチッと押したくなるような
ボタン・スイッチっぽいものが一般的
昔は少し膨らんで見える画像がボタンに見えて
人気だったけど、今はバナー自体が
認知されているので立体的にすると
ちょっと古く見えることも…
というのが土曜の記事
そして今日は
スマホでバナーの設置ができる！
というお話です♡
ご訪問ありがとうございます^ ^
静岡県静岡市草薙の よねりえ です☆
♢顔タイプ アドバイザー (外見)
♢自分辞典 アドバイザー (内面)
♢ブログ添削 講師 (集客用ブログ)
外見と内面のコンプレックスを手放し
本来の自分をまるごと愛そう♡
□お問合せ・お申込み → LINE公式 : @edv0881m
自分で設置した時は
PCで簡単にできたので
「スマホでやろう」という発想が
そもそもで無かったのですが
普段からPCは使わず（使えず）
スマホのみでブログを編集している方は
バナーの設置だって
スマホのみでやりたいですよね！
そりゃそうです！
そこで、
「バナーって何？」
「初めてなんだけど出来るかな？」
ドキドキ♡
という方にご協力いただいて
スマホでやってみましたよー☆
やってるつもりで読んでみてください^ ^
◆アメブロのスマホアプリでバナー設置◆
①バナー用の画像を用意
②アメブロアプリで新規記事を作成
③用意したバナー用画像を置いて
下書き保存
※ここからは作業する毎に下書き保存してね
④インスタへのURLをコピーしてくる
https://www.instagram.com/アカウント名
⑤バナー用画像の下に
④のURLを通常の文字リンクで配置する
表示用テキストは「★★★」など
見つけやすいものに
↓通常表示に戻ると、こんな感じ
文字リンクでインスタを指定すると
自動でこんな四角が出てきます
バナーにするからいらないので削除してね
ここまで出来たら一旦保存して
HTML編集画面を開いてみますよー
HTML編集画面に戻ると
このように英数字がギッシリ💦
慌てずに、
>と<の間で改行しましょう
そうすると一つ一つのHTMLの指示文が
読みやすくなり、欲しいところが
探しやすくなります
（PCだと自動で色が変わったりして見やすいんですが）
実はバナーの設置のときは
・<img src= … > という文
・<a href="htt … "> という文
・↑とペアの </a> という文
この3つの文だけでOK
アメブロアプリで自動で入る
他のところは削除してみてください
(残すべきところは次の画像を参考に)
削除して、通常表示に戻ってみて
画像と★★★が変わっていなければOK
ここがスマホで作業するときの山場ですね
⑥HTML編集画面で
<img src= … > という画像用URL
(下の画像だと青く選択されている部分)
を切り取り
「★★★」のところに
上書きで貼り付け、下書き保存
⑦編集モードの通常表示で開いて
「★★★」が消えて
バナー画像だけになっていたらOK
テストとして投稿してみましょう☆
バナー用画像をクリックして
リンク先に正しく飛べたら完成です！！
⑧テスト投稿した記事は、確認できたら
また編集モードで開いて
「下書き保存」に戻しましょう
このとき、バナー画像の前後に
改行を入れると後で使いやすいです
「☆バナー」などのタイトルをつけて
未来の日付にして下書き保存すると
行方不明になりにくくて便利です
お疲れさまでした♡
保存した「☆バナー」記事を
編集モードの通常表示で開いて
バナー画像の前後を含めてコピーして
日々のブログに貼り付けて利用できます^ ^
いかがでしたか？
スマホからバナー設定するポイントは、
HTML表示が長くなりすぎると
ややこしくて何もわからなくなるので
バナー単体で作業するということです
LINE公式へのリンクも
④で記入するURLが異なるだけで
作業は同じです
落ち着いてやれば大丈夫♡
ぜひやって見てくださいね
いつもあなたを応援しています！
よねりえ
ブログ作成 お役立ち記事
サービスリスト
ブログ添削
顔タイプ診断 (常時受付)
自分辞典セッション (常時受付)
Instagram …ストーリーズ更新してます✨
LINE公式 …お申込み・お問合せはこちらへ✨
↑うまくリンクできない場合は
LINEの友達追加の検索🔍に @edv0881m と入力してください♪
