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

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

Ameblo

どうも、こんにちは

 

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

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

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

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

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

CSSの編集をクリック

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

 

そうすると以下のプログラミングコードが出てきます。

下にスクロールしてもらい下記のプログラミングの文字列を見つけてください。

(3-2)メインタイトルの記事タイトルを探す

 

 

以下のコードがタイトルのデザインを変更するために必要なコードです。

この{}の中にOOOOOOと書かれている部分にさらに装飾をしていきます。

.skin-entryTitle {OOOOOOOOOOOOOOO}

アメブロのタイトルのデザインコード集

 

見出し
.skin-entryTitle {border-bottom: solid 3px black;}
見出し
.skin-entryTitle {color: #364e96;
padding: 0.5em 0;
border-top: solid 3px #364e96;
border-bottom: solid 3px #364e96;}
見出し
.skin-entryTitle { background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;}
見出し
.skin-entryTitle {background: linear-gradient(transparent 70%, #a7d6ff 70%);}
見出し
.skin-entryTitle {padding: 1rem 2rem;
color: #fff;
background: #094;
-webkit-box-shadow: 5px 5px 0 #007032;
box-shadow: 5px 5px 0 #007032;
}
見出し
.skin-entryTitle {padding: 1.65rem 2rem;
background-color: rgba(165, 210, 255, .4);
background-image:
linear-gradient(90deg, rgba(165, 210, 255, .3) 50%, transparent 50%),
linear-gradient(rgba(165, 210, 255, .3) 50%, transparent 50%);
background-size: 40px 40px;}
見出し
.skin-entryTitle { position: relative;
  padding: 1rem 2rem;
  text-align: center;
  color: #0075a9;
  border-radius: 0 10px 10px 10px;
  background: #d8ecf5;
}

.skin-entryTitle :before {
  font-family: 'Font Awesome 5 Free';
  font-size: 15px;
  font-size: 1.5rem;
  position: absolute;
  top: -24px;
  left: 0;
  height: 24px;
  padding: 0 1em;
  content: '\f0a4  POINT';
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #0075a9;
}

まとめ

ということで今回は、アメブロのタイトルのデザインについてお話をしました。細かいところもデザインをしようと思ったら、難しいかもしれませんが、簡単なデザインであれば、そんなにCSSの言語は難しくありません。なので、一度CSSの勉強をしてみると意外に自分でもプログラミングができるかもしれません。一度やってみましょう。

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