囲み枠を使ってこんな経験ありませんか？
- 囲み枠をいちいちコピペするのが面倒
- 記事の構成を考えるのが苦手
- 良いと思って選んだ色が表示してみたらいまいち
- 全体の色合わせが下手で途中で嫌になる
そんなあなたに
囲み枠を記事ごとコピペして
楽にわかりやすいセンス良い記事に仕上げる
テンプレートをご用意しました。
※この記事は2021/01/10に更新しました
◆アメブロ囲み枠おしゃれ記事テンプレートがお勧めな理由◆
＼アメブロ囲み枠おしゃれ記事テンプレートはこんな方にお勧めです／
- 記事を見やすく読みやすく整えたい
- プロっぽく見せたい
- 告知部分を目立たせたい
- 記事の中を可愛く装飾したい
- ライバルと差をつけたい
- 囲み枠は使いたいけどコピペが面倒
- 囲み枠の色選びが難しい
＼アメブロ囲み枠おしゃれ記事テンプレートを使って変わる嬉しい未来／
- 毎日の記事の更新が捗る
- 記事の書き方が理解できる
- 記事を書くのが楽しくなる
- あなたの魅力が伝わり易くなる
- スマホユーザーにも訴求できる
ということで、
良いことしかありません
読みやすくセンスよくまとめることが
らく〜〜〜〜〜にできる様になります。
◆どんなデザインのアメブロ囲み枠記事テンプレがあるの？◆
アメブロ囲み枠記事テンプレ『ペールピンク』
かわいい雰囲気が好き♡
女子ウケを狙いたい方に。
コードは上のリンクからコピペしてお使いください
アメブロ囲み枠記事テンプレ『ゴールドベージュ』
落ち着いた雰囲気で信頼感を与えるデザイン
どんな文字色とも相性が良いので使いやすいです。
コードは上のリンクからコピペしてお使いください
アメブロ囲み枠記事テンプレ『ペールブルー』
淡い色味が好き♡でもピンクは苦手な方に
コードは上のリンクからコピペしてお使いください
アメブロ囲み枠記事テンプレ『ブラック＆ピンク』
かわいいのは好き♡でも甘すぎるのは苦手な方へ
ラグジュアリーにもスタイリッシュにも使えます。
コードは上のリンクからコピペしてお使いください
アメブロ囲み枠記事テンプレ『パープル』
スマホデザインMacaron Greenのテーマに合わせて作ったよ。
シンプルだけど印象的にしたい方へ。
コードは上のリンクからコピペしてお使いください
◆アメブロ囲み枠で作るおしゃれ記事テンプートの設定方法◆
◆デザインを選ぶ◆
アメブロ囲み枠記事テンプレートの中から
お好きなデザインを選びます。
デザインページへのリンクが貼ってありますので
ページに飛んでいただくとコードが記入されています。
◆新規記事ページのHTML表示を別タブで開いておく◆
コードをコピペするための準備をしておきます。
作業効率を良くする為に別タブでご自分の
アメブロアカウント管理画面を開き
『記事を書く』で新規記事を開き
HTML表示にしておいてください。
◆選んだデザインのHTMコードをコピーする◆
先ほど選んだお好みのデザインページに戻り
グレーの枠の中のコードをコピーします。
な、長い💦
グレーの枠の中のコードを選択した状態。
コードはかなり長いので
頑張ってコピーしてくださいねw
◆新規記事のHTML表示にコードを貼り付ける◆
別タブで開いておいた新規記事の
HTML表示画面にコピーしたコードを貼り付けます。
下の写真はコードを貼り付けた状態です。
◆通常表示でレイアウトを確認◆
通常表示に切り替えて
サンプルと同じ状態に
表示できていれば大丈夫です。
下の写真は通常表示にした状態です。
もし、表示が崩れているところがあれば
コピペがうまく出来ていない可能性が高いので
記事ページのHTMLを削除してから
もう1度コピペをやり直してください。
それでも、どうしても貼り付けが
上手くいかない！
という方は公式LINEからお問い合わせください。
公式LINEは記事の最後に友達登録ボタンがあります。
◆下書きに保存◆
コードの貼り付けが無事終わりましたら
記事にタイトルをつけて下書きに保存してください。
タイトルは「記事テンプレ」など
わかりやすく付けてください。
次回から記事を書く時は
「記事テンプレ」の名前で保存した記事を使って書いていきます。
◆複製を利用して記事を書いていく◆
記事の編集・削除から記事を複製します。
すると保存しておいた「記事テンプレ」があるので
複製ボタンを押してあげると
同じタイトルのコピーが出来上がります。
今コピーした記事を編集して新しい記事を書いて行きます。
複製ボタンはスマホ画面やアプリ画面では表示されません。
移動中にスマホで記事を書きたい方は
複製ボタンで数個コピー記事を作っておくと
すぐに記事が書けて便利です。
◆アメブロ囲み枠で作るおしゃれ記事テンプレートを使って楽に！速く！読みやすい！記事を書くコツ◆
◆導入文で結論を書く◆
導入文は
・今日の記事はどんな人にむけて書かれた記事なのか
・今日の記事を読むと読者様はどうなれるのか
を短くまとめて書きます。
冒頭から、自分語りが多い人がいますが
ブログはタイトルを見て記事の内容が
気になって読みに行きます。
最初から記事を書いた人のことが
知りたいわけではなく
記事を読んだ結果、
記事を書いた人は
どんな人なのか、気になった時に
プロフィールを見に行きます。
冒頭の自分語りは程々にしないと
離脱に繋がりますし、
タイトルを見て記事を読みに来た
期待値が薄れたり
何が気になって読みに来たのか忘れて
違うページに行ってしまうコトも
感がられます。
まず、タイトルに対する結論を先に
記載してそのあとに
自己紹介やメニューの表示をして下さい。
◆メニューはあなたのサービスが一瞬でわかる看板の役目◆
アメブロのカスタマイズで
メニューバナーを設置しても残念ながら
スマホではメニューが表示されません、、、
◆メニューのメリット◆
・ブログ読者様が見たい情報へすぐにアクセス出来る
・情報がまとまっていれば読者様がページ内で迷わない
・なんとなく訪れた方が他のページに興味を持ってくれる可能性が高まる
メニューを設置するのは
記事を読む為に訪れた読者様を
他のページやサービスに
ご案内出来るきっかけ作りでもあります。
自分はこんな事をしていると
ひと目で伝える事も出来ます。
特に見ていただきたいページのリンクを
貼っておきましょう。
アメブロ囲み枠記事テンプレでは導入文の次に
メニューを持ってきています。
目につく場所に
さりげなく設置しているのがポイントです。
◆見出しを読めば内容がわかる！がベスト◆
見出しを見ただけで
書かれていることがわかる様に
文章を構成しましょう。
イメージは本の目次です。
見出しは文字サイズの隣にあります。
大見出し 中見出し
小見出し 段落となっています。
普段記事を書いているのは段落です。
見出しは記事を書き終わってから
最後に指定するのがおすすめです
他、文字の装飾も最後にまとめてやる方が
効率よく作業が出来ます。
◆本文で大切な細かなチェックポイント◆
・１文を長くし過ぎない。
・程よくひらがな、カタカナをを使う。
・適度に改行を入れる。
文字がずらーーーーっと並んでいると
読む気がなくなります。
「限りなくグレーに近い黒」を意識して下さい。
昨日と今日のお昼は繁忙期で外食続きだ。
⇓
昨日と今日のランチは繁忙期で外食つづきだ。
上の文章は漢字を多用しています。
下の文章はカタカナとひらがなを少し増やしました。
全ての文章が上の文章のように
漢字を多用すると文字が詰まった印象になり
読むのに疲れてしまいます。
・カラー文字を使う時は多色使いしない。
色が多いと、どこが大事な部分かわかりにくくなります。
デザインも大切ですが、
かわいい薄いピンクが好き♡
だからと言っても
薄いピンクは視認性が悪く
文章が入ってこなくなりますので
見やすさ、読みやすさは忘れないで下さい。
◆まとめだけ読む人もいる◆
今日の記事のまとめです。
最悪まとめだけ読んでも
どんなことが書かれているのか
わかる様に簡潔に説明して
今日の記事を読者様に
活用していただくように促します。
◆現在募集中のサービス◆
あなたが今１番告知したいサービス
メルマガや公式LINEなど
登録を促したいサービス
サービスがない場合は
おすすめ記事でも良いです。
記事直下は読者様の気持ちがホットに
なっていれば、アクションが望める
絶好のポジションです。
あなたのホットなサービスもこちらで
紹介して下さいね。
◆合わせて読みたいおすすめ記事◆
タイトルは「人気記事」や
「ランキング」でも良いですね。
スマホから読んでいると
サイドの記事カテゴリーが出てこないので
他記事への回遊を高める為にも
設置しておきましょう。
いいねの多い記事や
アクセスの多い記事。
募集中のサービスがあれば
サービスに関連した記事を
設置しておくのも大切です。
◆メディア情報◆
メディア情報はあなたの
売りのメディアを入れて下さい。
LINEボタンやバナーの設置も
効果的です。
◆アメブロ囲み枠使用時の改行における注意点◆
囲み枠の中に文字を入力するときは
必ずシフトキーを押しながら
エンターキーで改行をして下さい。
シフト押さずにエンターだけで
改行をしてしまうと……
エンターだけで改行した結果↓
もう一つ枠が出来てしまいます
枠が出来てしまった場合はバックスペースキーで
すぐに戻れば大丈夫です。
改行には十二分にお気をつけ下さい。
◆アメブロ囲み枠をもう少し深く知りたい人にHTMLとCSSを解説します◆
◆アメブロの囲み枠には作り方が2種類ある◆
①HTMLで作る囲み枠
②CSS編集から設定する囲み枠
HTMLの設定は初心者様からすべての人へお勧めです。
CSSの設定はブログ全体をオリジナルにおしゃれに
可愛くカスタマイズしていきたい方や
ビジネス利用でブランディングをしたい方におすすめです。
CSSの編集はテーマが限定されていて
指定のテーマを使う必要があります。
シンプルだからこそ
自分仕様にデザイン出来るのが
CSS編集テーマの良さです。
アメブロ管理画面からデザインの設定で
カスタム可能デザインを選択します。
カスタム可能を選択するとカスタムできる
デザイン一覧が表示されます。
カスタム可能デザインの中でも
CSSの編集が出来るのは3種類だけになります。
CSS編集の中でも真ん中の配置デザインがおすすめです。
◆HTMLとは◆
そもそもHTMLとはWEBページを
表示させるためのソースコードと言って
世界中のWEBページはHTMLという
専用の言語を使って表示させています。
アメブロもそうですね。
記事を書くページの下の方を見ていただくと
「通常表示」と「HTML」表示があります。
写真下の赤マル部分です。
赤マル位置のHTMLタブを選択すると
HTMLを使ったページが表示されます。
アルファベットとかっこ < > を組み合わせて
コードをコードの支持の間に日本語が表示されています。
コードはページ上には表示されずに
私たちが読むコトバだけが表示されるようになっています。
HTMLのページに『囲み枠のコード』を入力してあげれば
枠を表示できます。
◆HTML表示のメリット◆
- どのデザインでも使うことができる
- 記事の内容に合わせて毎回好きなデザインの枠をつけることが出来る
- スマホ表示でもデザインが反映される。
◆HTML表示のデメリット◆
- HTMLのどの場所に入力するのかわかりずらい。
- たくさんのアルファベットを見ただけで拒絶反応してしまう。
- 毎回入力するのが面倒…
毎回入力するのが面倒だったので記事のテンプレを作りましたよ！
◆CSSとは◆
CSSとはHTMLの装飾をしてくれるのコードの事です。
人間でいうとHTMLは体でCSSは洋服やヘアメイクと
イメージしていただくとわかり易いかな？と思います。
私もCSSの編集を始めて
オリジナルのデザインにしています。
CSSを編集でデザインをしてから
アメブロがとっても楽しくなったので
皆さんにも知っていただきたいと思います。
HTMLに比べると簡単ではなくなるのですが
出来ない事はありませんので
好きな方は是非やってみて下さい。
◆CSS表示のメリット◆
- 一度設定してしまえば記事を書くだけで自動的にデザインが反映される。
- HTMLよりもデザインの幅が広がる。
◆CSS表示のデメリット◆
- 記事ごとに変えることは出来ない。
- スマホ表示ではデザインが反映されない。（アメブロに限り）
下の表示のを見て下さい。
CSSで編集した場合
PC表示のプレビューで確認すると
大見出しに枠があります。
スマホ表示でプレビューすると
大見出しに枠がありません…
文字は大きくなっているので
大見出しにはなっていますが
装飾は反映されません。
アメブロにおけるCSS編集の悲しい点です、、、
それでもPC表示の時に
美しくカスタマイズされたページ
というのはビジネスマンとして
胸を張れるブランディングになります。
ヘッダを変えるだけでイメージは雲泥の差がでますので
フリーランスの人は皆さんヘッダーを変えています。
◆アメブロ囲み枠を部分的に使う時の設定方法◆
自分が使いたい囲み枠のデザインを選びます。
コピペで簡単かわいい囲み枠の
HTMLコード一覧は下のリンクからご利用下さい。
例えば…
表示のターコイズブルーの枠を設定したいとします。
WEBページ上でHTMLをコピーします。
HTMLはグレーの枠の中のアルファベットの事です。
カーソルでコード部分のみセレクトして
ショートカットキーか
右クリックでコピーします。
HTML表示に切り替えて枠を設定したい位置に
貼り付けます。
HTML表示は記事の下にあるタブの事です。
HTML表示に変える前に記事のどのあたりの
どこの文の次に貼り付けるのかを覚えておくと間違えにくいです。
「どこの文の次かを覚えておくと間違えにくいです。」
の下に入れるとします。
文章を覚えておいて…
HTML表記の中で同じ文章を探します。
記事の上の方とか真ん中あたりなども目安に考えておいてください。
見つけました！
挿入する箇所にペーストしたら
通常表示に戻して確認してみましょう。
枠が表示されてますね。
文字を入れてみます。
好きなテキストを入力できます。
枠の中で文字の大きさや
見出しに変えることもできます。
途中で改行するときは注意が必要です。
必ずシフトキーを押しながらエンターキーで
改行をして下さい。
エンターだけで改行してしまうと…
もう一つ枠が出来てしまいます。
枠が出来てしまった場合はバックスペースキーで
すぐに戻れば大丈夫です。
◆枠線の太さを変える◆
HTMLで設定できる
枠線のページを見ていただくと
グレーの枠の中にコードが書いてあります。
枠のコードの中に 2px と表記があります。
数字の部分を変えると太さが変わります。
数字が大きくなる程
線も太くなります。
0.5pxから5pxまで表示してみました。
参考にしてください。
◆アメブロ囲み枠で作るおしゃれ記事テンプレートのまとめ◆
アメブロ囲み枠で作るおしゃれ記事テンプートを使えば
楽に！早く！わかりやすい記事を書くことができます。
記事の書き方も参考にして
より良い記事を生み出して下さい。
あなたの記事がたくさんの人に読まれますように♡
枠線の設定についてわからないことやアメブロカスタマイズについてのご質問は高尾有香の公LINEでお答えしております。
▼▼▼
