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

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

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の勉強をしてみると意外に自分でもプログラミングができるかもしれません。一度やってみましょう。

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

 

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

 

Ameblo
スポンサーリンク



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