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

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

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の知識を入れて私のサイトや他サイトのコピペをしてもいいデザイン集を見ることによって、あなたの経験は知識がないよりも断然効果があるでしょう。完ぺきに勉強しようとしなくてもいいので、まずはやってみることをおすすめします。そして、間違えた場合は、ちょっとずつ修正をして進歩していけばいいでしょう。

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

 

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

 

 

 

Ameblo
スポンサーリンク



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