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

コピペでできるアメブロにメニューをカスタマイズする方法!

Ameblo

どうも、こんにちは

 

今回は、コピペでできるアメブロにメニューをカスタマイズする方法!についてお話をしていきたいと思います。アメブロのデザイン設定をするためには、CSSとHTMLというプログラミング言語を習得しないといけません。

しかし、プログラミングって????難しくないの???と思う方もいるとおもいますので今回は簡単にコピペでできるメニューの作り方を教えていきたいと思います。それではみていきましょう。

STEP1 フリースペースに以下のコードをコピペして張る

 

設定管理画面からフリースペース編集ボタンを押してください。そこでHTMLの文章を記入することができます。

下記のコードを自分がいれたいURLとリンク先の名前を記入してコピペしてください。

 

<div class=”menu-11″>
<ul>
  <li><a href=”URL”>リンク先</a></li>
  <li><a href=”URL”>リンク先</a></li>
  <li><a href=”URL”>リンク先</a></li>
  <li><a href=”URL”>リンク先</a></li>
  <li><a href=”URL”>リンク先</a></li>
</ul>
</div>

STEP2  CSS編集用デザインの外観を選択してコピペ

CSS編集にて以下のコードをコピペしましょう。

 

/*メニューエリア*/
#menu-11{
position:absolute;
width:1120px;
margin-left:-30px;
padding:0;
top: -115px;
}

/*メニューリスト*/
#menu-11 li {
float:left;
width:224px; /*メニュー 1 項目の幅*/
}

/*メニューリストリンク*/
#menu-11 li a{
font-size:15px;
font-weight:normal;
color:#ffffff; /*文字色*/
background-color:#4267b2; /*背景色*/
display:block;
text-decoration:none; /*項目の文字装飾*/
text-align:center; /*項目の文字寄せ位置*/
line-height:74px;
}

/*メニューリストリンク マウスオーバー時*/
#menu-11 li a:hover{
color:#4267b2; /*文字色*/
background-color:#ffffff; /*背景色*/
}

STEP3 自分のしたいデザインのように編集

 

簡単に一番最初にデザインを変えることにするためには、色を変えることです。

色は#OOOOOOOとなっている部分が色を付けるコードになります。

 

CSSの色は以下のサイトで分かります↓

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

 

 

色を変えましょう。

まずは色を変更してみることをおすすめします。

そのほかには、CSSとHTMLのプログラミング言語を勉強してちょっとず変更していくといいと思います。

まとめ

以上で今回は、アメブロでメニューの作り方をお伝えしました。一番は軽くCSSとHTMLの知識を入れて私のサイトや他サイトのコピペをしてもいいデザイン集を見ることによって、あなたの経験は知識がないよりも断然効果があるでしょう。完ぺきに勉強しようとしなくてもいいので、まずはやってみることをおすすめします。そして、間違えた場合は、ちょっとずつ修正をして進歩していけばいいでしょう。

 

 

 

Ameblo 集客
スポンサーリンク



アメブロ集客活用マーケテイング
タイトルとURLをコピーしました