趣味のハンドメイドから
「あなたから買いたい」と言われる
アクセサリーブランドに
Shop＆School
salon de Bijou
ブログで良く見かける
このような枠に囲まれた文。
↓
これってどうやって作るの？
全部がカワイイ♡
検索したけど同じようにできない。
という声をいくつかいただいたので
私がやっている方法、使っているサイトをご紹介します。
スマホでもPCからもできます☺︎
囲み枠の検索方法
『囲み枠 アメブロ 無料』
『見出し付き 枠 カワイイ』
などで検索すると
無料、コピペOKの枠を提供してくださっているサイトを見つけることができます。
囲み枠の設置方法
①使いたい枠を探す
②枠内のカラー、枠内の余白、線の種類、太さ、カラーなどを組み合わせたコードを「コピー」
③ブログ「HTML編集」をクリック
④コードを「ペースト」
⑤「通常表示」または「完了」をクリック
⑥枠内に文章を入力
改行したいとき
PCの場合⇒「通常表示」画面でSift＋Enter
スマホの場合⇒「HTML編集」画面で <br> と入力
【ここに本文を入力します】
↑
通常の入力画面でEnter、改行ボタンを押すと枠がもう1つ作られてしまうので注意！
きゃー！ウソでしょ…。
と絶望的な気持ちになってしまうのですが
もう一つ枠が作られてしまっても
「一つ戻るボタン」で元に戻せるので安心してください。
焦らず、１つ戻るボタンです。
■ここにタイトルを入力してください
【ここに本文を入力します】
見出し付きの枠も同様です。
お問い合わせ・申し込みボタンの設置方法
ボタンも同様に
『アメブロ 申し込みボタン』
などで検索して使いたいデザインを探し
コードをコピー、HTML編集画面にペースト。
私が使わせていただいたサイトはこちら
囲み枠と異なる点は
ボタンを押すと別のサイトやページに飛ぶこと。
"リンク先URL"の文字の部分に
飛んで欲しい先のURLを入力します。
⚠️" "を消さないように注意！！
例えば［お問い合わせボタン］にしたいときは
「お問い合わせフォームのURL」を入力し
ボタンのテキストの部分に
「お問い合わせはこちら」と入力します。
組み合わせは自由に
囲み枠とお問い合わせボタンを組み合わせることも可能です。
囲み枠のコード「本文を入力」の部分に
お問合せボタンのコードを入力します。
コード内のフォントサイズを変えれば
ボタンの大きさも変えることができます。
下記の画像はfont-size: 1.1em を0.9に変更してみました。
写真を入れることもできます。
「通常表示画面」で枠内の入れたい箇所にカーソルを合わせて画像を選択して挿入。
こんな感じで作ることができます。
↓↓
どこにペーストするの？！
HTML編集画面にすると英数字や文字がバーーっと並んでいてビックリしちゃいますよね。
上から文章を入力しながら、枠を入れたい部分にきたら画面を切り替えて1番下にコードをペースト。
また画面を切り替えて本文の入力。
もアリですが
これでは大変なので、私は文章を最後まで作り終えてから枠を入れる作業をしています。
コードに詳しい方は見ただけでわかると思うのですが、知識のない私には暗号が並んでいる画面を見て「どこにコードをペーストして良いのかわからない！」ととっても困ってしまい
そこで思いついた方法は
枠を入れたい部分に「あああ」と入力。
最初は「111」にしてたのですがイマイチわかりにくい。
そしてHTML編集画面にすると
見つけることができるんですーー！！
「あああ」は消さずに後ろにコードを入力。
消してしまうと「アレどこだ？」となってしまう可能性があるので、消さずに行います。
通常表示に戻したときに消すのを忘れないように！
ぜひ、枠を使って見やすいブログ作りをしてみてください。
ご不明な点や質問などございましたら、お気軽にお問い合わせください。
salon de Bijou サロン デ ビジュー
取材・委託販売・コラボ商品・お問い合わせはこちら
お問い合わせ・ご質問はこちら
公式LINEはじめました
最新の講座情報、お得なキャンペーンなど優先的にご案内していく予定です。
１体１のトークが可能です♪
(@280nseek)
◾︎営業日/ 月〜金
◾︎営業時間/10:00〜16:00
