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

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

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というデザインのプログラミングコードを使用したらきれいなブログを作ることができます。まずはやってみることがいいと思います。やってみて出来なかったら修正をしてトライ&エラーを繰り返しましょう。

タイトルとURLをコピーしました