こんにちは。ブランディングプロデューサーの櫻井圭子です。
アメブロで記事を更新する時、見出し機能を使っていますか?
見出しは文章を読みやすくする役割を果たし、そしてSEO対策にも有効なんです。
でも、アメブロの見出し機能ってただ文字が大きくなるだけでちょっとさみしいんですよね。
そんな寂しい見出しはおしゃれじゃない!私らしくない!

読者さんにとって少しでも読みやすくしたい!
かわいいアメブロにしたい!おしゃれにしたい!
そう見出しのタグをコピペしていたけど、毎回のその作業が面倒になってきた。

そんな方は、CSSを変更して毎回の作業を楽チンにしませんか?

本日はCSSのコピペで見出しをかわいい&おしゃれにデザインというテーマでお届けします。

CSSをコピペするだけでかわいい&おしゃれに見出しをデザインしよう

keiko
見出しをCSSの編集で設定するとその後が楽チンです。
PC作業が苦手な方もおしゃれでかわいいブログを目指して一緒に頑張りましょう!!
※この方法はアメブロで「カスタム可能デザイン」を設定している方に適用できる方法となります。

【準備】CSSをカスタマイズするためのデザイン変更

まず、この方法ですが、アメブロで「カスタム可能デザイン」を選んでいる方に適用できる方法となります。
新デザイン、旧デザイン、どちらも対応しています!

「カスタム可能デザイン」とは?

アメブロはCSSを編集すると、自分の好きなおしゃれなデザインにカスタマイズする事ができます。

マイページブログ管理デザインの設定

■「カスタム可能」デザインをクリックします。

 

■この中から好きなものを選びましょう。

※シンプルなテンプレートを選んだ方がおしゃれになります。
※かわいいブログにしたい方はピンク系統のテンプレートがおすすめ。

 

■テンプレートを選んだら準備完了です。

 

【実践】アメブロの見出しをCSSのコピペで一括変更する方法

マイページブログ管理デザインの設定

①デザインの変更から”CSSの編集”をクリックしましょう。

 

②現在使用中のブログデザインのCSSの画面

下の方にある、英数字(日本語もあります)が沢山記述されている四角い入力画面がCSSをコピペしていく場所になります。

1番下までスクロールしていきましょう。
通常何もいじっていない時は、「/* その他、拡張 */」(新デザイン)「/* その他、拡張があれば記述 */」(旧デザイン)が出てきます。
ここの1番下の部分に下記で紹介している見出しのCSSをコピペで追加していきます。

③追加した後は表示を確認する表示を確認してOKなら保存ボタンを押して完了。

きちんとCSSのコピペができていても、最新記事の中に見出しを入れていない場合は表示を確認してもプレビューされません。
プレビューで確認したい場合は、最新記事に見出しを入れてアップしてから表示を確認してみてくださいね。

 

【コピペCSS】アメブロのかわいい&おしゃれな見出しデザイン

まず初めに、カスタム可能デザインには「新デザイン」と「旧デザイン」があります。
コピペするCSSが変わってきますので、ご自分がどちらを選んだのか見分けられるようにしましょうね。

■新デザインはプロフィールの写真が丸いのが特徴。

 

■旧デザインはプロフィールの写真が四角いのが特徴。

アメブロで元々準備されているデザイン性のある「カスタム可能」なテンプレートはほとんどが「旧デザイン」となります。(201811月現在)

 

【新旧デザイン】コピペするだけアメブロの見出しのCSS

今回のCSSを編集してアメブロの見出しをデザインする作業のゴールのイメージはこちらです。

※大見出し中見出し小見出しの順に、デザインはシンプルに、文字は小さくしていくとおしゃれになります。

keiko
まるっとコピペするだけです!!超簡単!!
ピンク系統でかわいい!!
見出しを整えるだけで、おしゃれなブログに一歩近づきます。

【新デザインの場合はこちらのCSSをコピペ】

 

【旧デザインの場合はこちらのCSSをコピペ】

 

【CSSのコピペ】おしゃれでかわいい見出しデザイン14選

上記のCSSは大中小のそれぞれの見出しをセットにしているので、まるっとコピペするだけでもOKですが、自分らしいアメブロにこだわりたいおしゃれさんは、ちょっとだけ自分で頑張って編集してみましょう。

下記から好きな見出しデザインのCSSを選んでコピペしてみてくださいね。

※下記CSSは新デザインの大見出しの場合のCSSとなります。
旧デザインで編集したい方や、中見出し、小見出しの編集をしたい方は「.skin-entryBody h2」の部分を変更してください。

【新デザイン】
《大見出し》.skin-entryBody h2
《中見出し》.skin-entryBody h3
《小見出し》.skin-entryBody h3

【旧デザイン】

《大見出し》.articleText h2
《中見出し》.articleText h3
《小見出し》.articleText h4

 

【1】ピンクの直線の見出し

シンプルな直線です。なんだかんだ言っても使い勝手が良いです。

 

【2】赤の破線の見出し

ミシンのステッチのような破線。かわいいものがお好きな方におすすめ。

 

【3】ゴールドの点線の見出し

キレイ系、ゴージャス系がお好きな方におすすめのゴールドの点線。おしゃれにまとまります。

 

【4】大人ピンクの二重線の見出し

使いやすい二重線。大人ピンクは甘すぎず、でもかわいい!

 

【5】ピンクの上下線の見出し

上下に線を入れることで目立たせる事ができます。

 

【6】紫の上下二重線の見出し

上下線を二重に。

 

【7】上と下で色が違う線の見出し

上下の線の色を変えて個性的に。色の組み合わせでおしゃれ度がグッと上がります。
人とは違うものが好きな方におすすめです。

 

【8】背景塗りつぶしの見出し

シンプルですが目立ちます!薄い色で塗りつぶす時は文字の色は黒で。
濃い色で塗りつぶしたい時は、文字の色は白に変更すると読みやすくなりますよ。

 

【9】シンプルなポイント線の見出し

超シンプル。大見出しよりは、中見出しや小見出しに使うのがおすすめです。

 

【10】ポイント付きの付箋風の見出し

ポイントの左の線との色の組み合わせで楽しむ事ができます。
目立たせたい場合は反対色で。綺麗にしたい場合は同系色にするのがおしゃれな見出しにするポイントです。

 

【11】囲み線&文字色変更の見出し

ちょっと個性的でおしゃれなデザインです。
囲み枠の色と文字の色を別にしても、また雰囲気がガラッと変わります。

 

【12】ピンクの吹き出しの見出し

人気の吹き出しデザインです。角のある吹き出しは、かわいいよりは、かっこいいやカジュアルなおしゃれアメブロにしたい方におすすめです。

 

【13】サーモンピンクの角丸の吹き出しの見出し

吹き出しの角丸バージョン。丸くすると優しい感じになります。

 

【14】黄色の蛍光ペン(ラインマーカー風)の見出し

さりげなく強調してくれる蛍光ペン風のデザイン。
大見出しより、中見出しや小見出しにおすすめです。

 

keiko
お好みの見出しはありましたか?
コピペで簡単におしゃれなデザインに変更できるので、かわいい見出し作りに是非挑戦してみてくださいね。
次の章では、色や線を変更して、オリジナルにする方法を説明しています。

 

【応用】CSSの解説&色と線の種類の変更方法

CSSを理解すると自分の好きな色に変更する事ができます。

font-size:文字の大きさの指定
background:背景色
padding:枠と文字の間の隙間の幅
border:線の太さ、種類、色を指定
・線の種類
→solid…直線/double…二重線/dashed…破線/dotted…点線

#fff#ffb3d9などは色の番号です。
ご自分の好きな色に変更したい時は、#より後ろの英数字を変更してくださいね。

色を変更する時はこちらのサイトがオススメです!
原色大辞典

【色や線の太さを変更する時の注意点】
CSSのコードと呼ばれる英数字は1文字でも消してしまうと、きちんと表示されなくなってしまいます。
また、CSSの編集は自己責任で行ってください。
心配な方は、編集前に元のCSSをメモ帳などにコピペしてバックアップをとっておくのがオススメです。

まとめ

見出しはHTMLタグを毎回コピペするよりも、CSSで最初に設定した方が楽チンです。

■後から見出しのデザインを変更したくなった場合も、CSSを編集すれば一括で変更する事ができます。

■おしゃれなブログにしたい場合は配色を意識しましょう。自信がない方は同系色にするのが無難です。

というわけで、本日はCSSのコピペで見出しをかわいい&おしゃれにデザインというテーマでお届けさせていただきました。

本日も最後までお読みいただき、ありがとうございました。