~アメブロの記事の書き方~

【アメブロの見出し】コピペだけでできるおしゃれなカスタマイズ方法

Ameblo

今回は、アメブロの見出しをおしゃれにする方法をお伝えしようと思います。コピペだけでできるので、今回を機に自分のブログをおしゃれにしましょう。ということでさっそくみていきましょう。

アメブロの見出しのカスタマイズするためにすべきこと

管理画面から「デザインの設定」をクリック

ブログ管理画面(パソコンの場合)の左下にあります。また、CSSの編集ができないデザインもあるので、カテゴリーの中から、CSS編集用デザインを選びましょう。

CSSとはプログラミングのデザインをするための言語です。そこまで難しくないので、Amebaの部分だけでも覚えたら、十分に自分でブログのカスタマイズができます。

CSSの編集をクリック

CSSの編集をクリックしてください。

そうすると上記のCSSのプログラミングコードが書いてあるものがあります。

なので、こちらに記入をしましょう。

一番下にコードを記入すればいいです。

各見出しのCSSコード

 

《大見出し》.skin-entryBody h2
《中見出し》.skin-entryBody h3
《小見出し》.skin-entryBody h4

こちらが各見出しのコードになります。

このhOの後に{}と打ちその中にデザインのコードを書きます。

簡単なデザインであれば少し勉強すればできるので、今回を機に知ってみるといいでしょう。

見出しデザイン

 

見出し
/*大見出し*/
.skin-entryBody{border-bottom: solid 3px black;
}

/*中見出し*/
.skin-entryBody h3{border-bottom: solid 3px black;

}

/*小見出し*/
.skin-entryBody h4{border-bottom: solid 3px black;
}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{ border-bottom: double 5px #FFC778;
}

/*中見出し*/
.skin-entryBody h3{ border-bottom: double 5px #FFC778;

}

/*小見出し*/
.skin-entryBody h4{ border-bottom: double 5px #FFC778;
}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{background: #c2edff;
padding: 0.5em;
}

/*中見出し*/
.skin-entryBody h3{background: #c2edff;
padding: 0.5em;

}

/*小見出し*/
.skin-entryBody h4{background: #c2edff;
padding: 0.5em;
}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;
}

/*中見出し*/
.skin-entryBody h3{padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;

}

/*小見出し*/
.skin-entryBody h4{padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;
}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

/*中見出し*/
.skin-entryBody h3{padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);

}

/*小見出し*/
.skin-entryBody h4{padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{padding: 1rem 2rem;
border: 3px dotted #000;
}

/*中見出し*/
.skin-entryBody h3{padding: 1rem 2rem;
border: 3px dotted #000;

}

/*小見出し*/
.skin-entryBody h4{padding: 1rem 2rem;
border: 3px dotted #000;
}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{padding: 1.65rem 2rem;
color: #e5004f;
background-color: transparent;
background-image: linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc),
linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;

}

/*中見出し*/
.skin-entryBody h3{padding: 1.65rem 2rem;
color: #e5004f;
background-color: transparent;
background-image: linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc),
linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;

}

/*小見出し*/
.skin-entryBody h4{padding: 1.65rem 2rem;
color: #e5004f;
background-color: transparent;
background-image: linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc),
linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;

}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{padding: 1.65rem 2rem;
color: #22ac38;
background-color: transparent;
background-image: linear-gradient(45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9),
linear-gradient(-45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9);
background-size: 24px 24px;

}

/*中見出し*/
.skin-entryBody h3{padding: 1.65rem 2rem;
color: #22ac38;
background-color: transparent;
background-image: linear-gradient(45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9),
linear-gradient(-45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9);
background-size: 24px 24px;

}

/*小見出し*/
.skin-entryBody h4{padding: 1.65rem 2rem;
color: #22ac38;
background-color: transparent;
background-image: linear-gradient(45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9),
linear-gradient(-45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9);
background-size: 24px 24px;

}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{color: #ffffff;
font-size: 16px;
line-height: 20px;
padding: 10px;
background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px);
}

/*中見出し*/
.skin-entryBody h3{color: #ffffff;
font-size: 16px;
line-height: 20px;
padding: 10px;
background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px);

}

/*小見出し*/
.skin-entryBody h4{color: #ffffff;
font-size: 16px;
line-height: 20px;
padding: 10px;
background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px);
}

/*--- ここまで見出し ---*/
見出し
/*大見出し*/
.skin-entryBody{font-size: 16px;
line-height: 20px;
padding: .5em 0 .5em .5em;
border-left: 6px solid #000000;
border-bottom: 1px solid #000000;
}

/*中見出し*/
.skin-entryBody h3{font-size: 16px;
line-height: 20px;
padding: .5em 0 .5em .5em;
border-left: 6px solid #000000;
border-bottom: 1px solid #000000;

}

/*小見出し*/
.skin-entryBody h4{font-size: 16px;
line-height: 20px;
padding: .5em 0 .5em .5em;
border-left: 6px solid #000000;
border-bottom: 1px solid #000000;
}

/*--- ここまで見出し ---*/

まとめ

ということで今回は【アメブロの見出し】コピペだけでできるおしゃれなカスタマイズ方法についてお話をしました。まずはワードプレスは難しいからアメブロでやってみたいという方にはおすすめだと思います。アメブロでも自由にCSSというデザインのプログラミングコードを使用したらきれいなブログを作ることができます。まずはやってみることがいいと思います。やってみて出来なかったら修正をしてトライ&エラーを繰り返しましょう。

他のおすすめのアメブロに関する記事

 

【アメブロで1記事100いいね以上】もらった僕が語るブログの書き方
今回は、アメブロで1記事100いいね以上もらうためにすべきことについて書いてみました。統合失調症のブログは僕が再受験するときに勉強に集中するときに消してしまったので参考にできないと思いますが、できるだけ読者目線で書くといいことは確実です。なので、読みやすい文章を作り上げましょう。
【3秒で心を掴む】アメブロのプロフィール(自己紹介)の書き方
今回は、アメブロのプロフィールの書き方について紹介しました。よかったら参考にしてみてください。また、ちょっとうまくいったなどがありましたら私のライン公式アカウントにて成功してみてどうだったのかなど書いてもらえると私もとても励みになります
【アメブロ集客】ライティングの仕方│SEO対策が一番の目的ではない
今回は、アメブロ集客でライティングをするとき、文章を書く時にすべきことをお話をしました。今すぐにでもできることなのでよかったら実践してみてください。
アメブロで集客できる文章の書き方│集客をデザインしよう
今回は、アメブロで集客できる文章の書き方について書きました。アメブロでも集客はできます。ただコツを知っておかないといけないので、このブログで知ってもらえると嬉しいです。
アメブロのサイドバーのプロフィールをカスタマイズする方法
今回は、アメブロのサイドバーのプロフィールをカスタマイズする方法を紹介しました。もしよかったらCSSのところに実際に張ってみてください。そして、そうなるのかどうか確かめましょう。
コピペでできるアメブロにメニューをカスタマイズする方法!
今回は、アメブロでメニューの作り方をお伝えしました。一番は軽くCSSとHTMLの知識を入れて私のサイトや他サイトのコピペをしてもいいデザイン集を見ることによって、あなたの経験は知識がないよりも断然効果があるでしょう。完ぺきに勉強しようとしなくてもいいので、まずはやってみることをおすすめします。そして、間違えた場合は、ちょっとずつ修正をして進歩していけばいいでしょう。
【アメブロの見出し】コピペだけでできるおしゃれなカスタマイズ方法
今回は【アメブロの見出し】コピペだけでできるおしゃれなカスタマイズ方法についてお話をしました。まずはワードプレスは難しいからアメブロでやってみたいという方にはおすすめだと思います。アメブロでも自由にCSSというデザインのプログラミングコードを使用したらきれいなブログを作ることができます。まずはやってみることがいいと思います。やってみて出来なかったら修正をしてトライ&エラーを繰り返しましょう。
【アメブロ】コピペだけで作れるボタンのコードを紹介!
今回はコピペだけで作れるボタンコードを紹介したいと思います。ボタンを作るためにはプログラミングであるHTMLとCSSの言語が分かっていないとできません。しかし、そんなの勉強できないという人向けに今回は作成しましたので、よかったら使ってみてく...
【アメブロ初心者必見】きれいな囲い枠を作る方法を解説していきます。
今回はきれいな囲い枠を作る方法をまとめていきたいと思います。 囲い枠を作るためには、プログラミングを学ばなければなりません。しかし、プログラミング、、、、ってすごい難しそう、、、と思うのでコピペだけでできるきれいな枠組みを作る方法を教...
【アメブロ書いている人必見】コピペだけで作れる箇条書きリストのデザインを紹介!
今回はアメブロで箇条書きをデザインする方法を書きました。アメブロ内では、CSSといってデザインをする場所がないので多くのデザインをすることができません。しかし、上記のように枠組みを作る程度であればできます。なので、一度コピペをして試してみましょう。また、ワードプレスであれば細かいデザインもできるので今回を機にやってみるのもいいでしょう。

 

Ameblo
スポンサーリンク



ライフスタイルコーチ│八木のBLOG
タイトルとURLをコピーしました