No14,　サイドバーのデザインを編集する　前編　では、

サイドバーの全体的なデザインを編集する方法を学びます。



No15,　サイドバーのデザインを編集する　後編　では、

前編で編集したデザインに細かなデザインを施していきます。



サイドバーのデザインを編集するにあたって、

前回の記事を読んでからこの記事を読んでいただくことで

学習効率があがる。。はずです(笑)



前回の記事を読んでない方はこちら


→　No,13 サイドバーのデザインを編集する 準備編



それではさっそくアメブロのサイドバーを編集していきましょう。


No1から記事をお読みの方は、(特にヘッダー画像の記事サンプルをやった方は)

以下の画像のように、ヘッダー画像とサイドバーとの隙間がなく、

ピタッとくっついてしまっているはずですので、

その隙間を開けることから始めたいと思います。







ヘッダー画像とサイドバーとの隙間を開けるには、

CSSの編集から

/* (3-7) サイドバーエリア

--------------------------------------------*/

.skinSubArea{} /* サイドバーエリア共通 */



の部分を編集します。


いつものように

「記事を書く」　から　「デザインの変更」　を選択し、　「CSSの編集」　を選択しましょう。


そうしましたら、

上に貼ってあるコードのところまで下にスクロールして編集できるようにしてください。


スクロールができたら、以下の画像のように

中括弧の間をエンターボタンでスペースを作りましょう。

スペースを作ってコードを書き込めるようになったら、

以下のCSSのコードをコピーして、先ほど作ったスペースに貼り付けてください。



＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝

margin: 10px 0 0 0;

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝



うまく貼り付けられましたらCSSのコードが以下の画像のようになっているはずです。

なお、ヘッダー画像とサイドバーとの間に隙間が元々ある人や、

あえて隙間を作りたくない人は、このコードを書かないでください。


margin: 10px 0 0 0;　の数字が、隙間の大きさを表していますが、

隙間をもっと開けたい場合は 10px　の部分を大きくし、

逆に数字にマイナスを付けると今ある隙間をさらに縮めることも可能です。



コードができたら、ブログの表示を確認してみましょう。

うまく反映されていると、

ブログヘッダー画像とサイドバーとの間に隙間ができていることが確認できると思います。

今度は、サイドバー全体をデザインしていきます。

以下のコードをコピーしてCSS編集画面に貼り付けてください。



＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝

/* (3-8) サイドバー　メニュー

--------------------------------------------*/

/* skinMenu サイドバー　メニューのエリア */

.skinMenu{

/* 注　ベースのcssに margin-bottom の記述有り */

background:rgba(255,255,255,0.7);/* ←サイドメニューに背景を敷きたいとき */

border:1px solid rgb(67,177,52);

border-radius: 15px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;   

}

.skinMenu2{}

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝



貼り付ける場所は以下の画像を参考にしてください。

うまく貼り付けができますと、CSSのコードが以下の画像のようになっているはずです。

一旦ここでブログがどう変わっているか確認してみましょう。

今回デザインを編集した場所はサイドバー全体となりますので、

以下の画像のように、

サイドバーのいくつもの項目がすべて同じようにデザインが変更されています。


変更された点は、

枠線が緑色になり、角が丸くなり、背景が少し透明になりました。

1つの場所だけでなく、

サイドバーすべてのデザインが変更されていることが確認できますね！


コードを解説します。

.skinMenu{

/* 注　ベースのcssに margin-bottom の記述有り */

background:rgba(255,255,255,0.7);/* ←サイドメニューに背景を敷きたいとき */

border:1px solid rgb(67,177,52);

border-radius: 15px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;   

}

.skinMenu{ }　は、サイドバーのデザインを変更しますという意味です。

この中に書かれているコードは、

background:rgba(255,255,255,0.7);/* ←サイドメニューに背景を敷きたいとき */

border:1px solid rgb(67,177,52);

border-radius: 15px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px; 


の５行ですね！


background:rgba(255,255,255,0.7);　は、もうおなじみになってきた

rgba　の形式で書かれた色と透明度を指定するコードです。

rgba ？なにそれ？　という方は過去記事を読んでくださいね！

毎回というほど出てきていますので(汗)



border:1px solid rgb(67,177,52);　このコードもおなじみになってきました。

枠線を付ける為のコードです。


border:　が枠線を指定するよ！という意味で、

1px というのが枠線の太さ。

solid　というのが一本線の枠線にするよ！　という意味で、

rgb(67,177,52);　というのは先ほど書いたrgb形式で書かれた枠線の色(今回の場合は緑)です。


つまり、サイドバーの枠線を付けたくない場合は、この一行すべてを消せばOKですし、

枠線の太さを変えたい場合は、1px　の部分の数字を変えてください。


一本線から二本線や点線に変えたい場合は、

solid　の部分を　double か　dotted　に変える。

枠線の色を変えたい場合は、rgb(); の括弧の中身を好きな色に指定すればOKというわけです。



コード解説の続きをしますと、

border-radius: 15px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px; 



この三行は、同じ意味で、

「指定した場所(今回はサイドバー)の枠を丸くする」　という意味のコードです。


なぜ、３行もあるのかというと、

我々人間はインターネットを見る時に、「ウェブブラウザ」というものを使って

インターネットのサイトやブログ、画像、動画などを見ていますよね。


このウェブブラウザとは、インターネットエクスプローラやグーグルクロームなど

沢山の種類があり、それぞれのウェブブラウザによってCSSのコードが違う場合がある。

と、いう感じで覚えておいてもらえれば大丈夫です。


つまり、角を丸くするときは、

border-radius: 15px;　だけじゃなくて、

-webkit-border-radius: 15px;　　と　　-moz-border-radius: 15px; 　も

セットで使えばいい。　と、これはもう決まり文句みたいなものなので、

そう覚えてしまってください。


この角を丸くするのが嫌な人は、

この三行を丸々削除してしまえば、角が丸くなりませんし、

角の丸さを調整したい人は、15pxという部分の数字を変えてください。

数字を変える際は、三行の数字の部分全てを同じ数字にそろえてくださいね！


それでは、

最後に今回の編集を保存して終わりましょう(*^^)vお疲れ様でした

次の記事で、今回行ったサイドバーの全体のデザイン編集の続編と言いますか、

もう少しサイドバーの細かい部分のデザイン編集をしていきたいと思います。


それでは、また次の記事でお会いしましょう(*´ω｀*)

本文のあるところではない、サイド(横っちょ)の部分のことを表す言葉ですね。


ここを色々と今回からいじっていくわけですが、


アメブロでこのサイドバーを変更する時は、

「ブログを書く」　を押して、

以下の画像のような部分がすべてサイドバーに関わる編集画面です。

項目としては、５つあります。


上から


設定・管理　　→　主にサイドバーの細かな設定をします

配置設定　　→　サイドバーにどれを表示し、どれを表示しないか、どこに表示するかなど

プラグインの追加　　→　プラグインを追加できます。※詳しくはのちほど

フリースペース編集　→　フリースペース編集が可能です、メッセージボードのようなものです

ブックマーク管理　　→　　ブックマークが登録できます。


これらを画像を見ながら少し詳しく説明していきます。


最初は　「設定・管理」　です。

ここでは、サイドバーに表示する項目の表示数などが変更できます。


例をとったほうが分かりやすいと思うので、以下の画像を見てください。

例えば、この　「最近の記事一覧」　という項目がありますが、

これが現在は　「１０件表示」　と、なっていますよね？


これをブログで見てみますと・・・

１０件表示されていました。

ここの表示数を変えることで、いくつ最新の記事を表示するかが決められるわけです。


他にも、ブログ読者や、最近のコメントなど

色々なサイドバーの項目がありますので、

色々いじって好きなようにアレンジしてみてください。



お次は　「配置設定」　です。

ここは一番よく使うかもしれませんので、要チェックです！

配置設定を選ぶと以下の編集画面が表示されます。

上の画像には、左側に　「使用しない機能」　という項目があり、

右側には　「使用する機能」　という項目があることが確認できると思います。


使用しない機能　には、「最近のコメント」が入っています。

つまり、現在僕のブログのサイドバーには「最近のコメント」が表示されていません。


逆に、右側にある「使用する機能」　という項目に入っているいくつもの機能は、

全て僕のブログのサイドバーに表示されています。


そういうことです。

表示したい項目を右側に、

表示したくない項目を左側にマウスでドラッグして移せばいいのです。


簡単ですね♪


それから、表示したい項目では、上下にドラッグすることで、

どの項目を上に持ってきて、どの項目を下に表示するかなどが

調整できますので、是非色々いじって好きな配置にサイドバーの項目を動かしてみてください。


次は、「プラグインの追加」　です。　クリックしてください。

そうしますと、以下のような編集画面が表示されますので、

下の画像のように、「フリープラグイン」　という項目をクリックしてください。

すると、以下の画面になります　↓

プラグインの追加ページでは、アメブロが元々用意してくれている(提携している)

ブログパーツを利用できますが、そんなダサイというか、みんなが使えるものは


我々は使いません！笑


フリープラグインというところで、

もともと用意されているもの以外を使用することができますし、

独自で、画像を置いたり、文字を表示させたりと色々できるので、


このフリープラグインというのは、

今後記事として取り上げますので楽しみにしていてください(^O^)／


お次は、「フリースペース編集」　です。　クリックしてください。

クリックすると、以下の編集画面が表示されます。

簡単に言ってしまうと、

このフリースペースって以前やったメッセージボードのようなものです。


メッセージボードのサイドバー版。　と、考えてもらえると分かりやすいと思います。

フリープラグインのように、プラグインのような高度なものは使えませんが、

画像や文字、リンクなどは表示することができます


また、このフリースペースでやめてほしいのは、

サイドバーに表示するだけでなく、プロフィール画面でも表示されてしまうので、


どちらで読んでも変じゃないようにしなくてはいけなく、

ココだけの話ですが、かなり使いたくない機能ではあります(笑)


フリースペースも、

一応、今後記事にする予定なので詳しくはそちらを楽しみにしていてください(*^^)v



最後になりますが、　「ブックマーク管理」　です。　クリックしてください。

すると、以下のようなページが表示されます。

ここの各項目を入力すると、

サイドバーのブックマーク欄に指定したリンク付き文字が表示されます。


やってみましょう。

このように、入力項目をすべて入力したのちに　「追加」　を選択し、忘れず保存を。

ブログ側を確認してみると・・

ちゃんと、表示されていました(*´ω｀*)


お気に入りのブログや自分のTwitterなど、

自分の読者さんに是非見てもらいたいサイトがあった場合はブックマークに表示しましょう！


もちろん、いらなければ、「配置の設定」の編集ページから

「使用しない機能」　に　ブックマークをやってしまえば表示を消すことが可能です。



お疲れ様でした！　とりあえず、サイドバーを編集する為の準備は終わりです。


サイドバーがなんで、どのような種類があるのか理解していただけたかと思います。


次回の記事からは、

サイドバーのデザインを編集していきますので、張り切っていきましょう(^O^)／

どうでしょうか(笑)


「だせーよ！」　「デザイン力ねーよ！」　って思う人は・・・　(T_T)許してください泣


もちろん、デザインに関しては、皆さんがそれぞれ好きな感じに変えてください。

僕はデザインの変え方を上のダサイ・・デザインを例にして説明するだけですので(T_T)



さて、本題へ行きましょう。


今回の　「メッセージボードのデザインを設定、変更する」　の記事は、

長くなることが予想されるので、

其の一、其の二　の２つの記事にきりの良いところで分けさせていただきます。


其の一では、

メッセージボードに　簡単なHTML　を使って文章、画像、リンクを作っていきます。


其の二では、

そのHTMLで書いた文字や画像に対してCSSでデザインを変更していきます。


ここで出てきた　「HTML」　と　「CSS」　という言葉ですが、

プログラミング言語(厳格には違う)の一種だと思ってください。

基本的なブログやホームページは、このHTMLやCSSなどで作られています。


もちろん、HTMLやCSS自体を学んでいくわけではなく、

HTMLやCSSが全く分からない人にわかるように解説していきますので、ご安心を。

※HTMLとCSSなんて中学生でも１週間もあれば習得できる簡単なものですがｗ



さて、それでは参りましょう。

まず、前回と同じく　「記事を書く」　を押して　「メッセージボード」　を選択しましょう。

すると、白紙のメッセージボードの編集画面が出てくるはずです。

※前回のサンプルで何かを書き込んだ人は、今回のサンプルで邪魔になるので
先に前回書いた分のコードを全てメモ帳とかに保存して移しておいてください。


白紙のページが準備できたでしょうか。

準備ができましたら、

以下のコードをコピーして、白紙のメッセージボードへ貼り付けてください。


＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝

<!-- ここから「アメーバブログカスタマイズブログのメニュー」 -->

<h2 id="message-title">アメーバブログカスタマイズブログのメニュー</h2>

<!-- ここまで「アメーバブログカスタマイズブログのメニュー」 -->

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝



このコードは、あのダサイメッセージボードのサンプルの文字部分になります(笑)

アメーバブログカスタマイズブログのメニュー

というところの部分ですね！


<h2 id="message-title">アメーバブログカスタマイズブログのメニュー</h2>


この部分の、


アメーバブログカスタマイズブログのメニュー


この部分が表示される文字となりますので、

違う文字を表示したい場合はこの文字を書き換えてみてください。


うまく貼り付けができると以下の画像のようにコードがなっているはずです。

次に、５つ横に並ぶ画像の画像部分のコードをコピーして貼り付けていきます。

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝

<!-- ここから５つの画像のエリア -->

<ul id="message-image5"><a href="#"><li><img src="http://p.tl/FLLG" width="115px"></li></a><a href="#"><li><img src="http://p.tl/BuaH" height="115px" width="115px"></li></a><a href="#"><li><img src="http://p.tl/IgoS" height="115px" width="115px"></li></a><a href="#"><li><img src="http://p.tl/Tacb" height="115px" width="115px"></li></a><a href="#"><li><img src="http://p.tl/N51W" height="115px" width="115px"></li></a></ul>

<!-- ここまで５つの画像のエリア -->

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝



少し長いですが、ちゃんと後で説明するのでこの場では一旦コピーして貼り付けをしましょう。


コピーができたら、

メッセージボードの先ほど張り付けたコードのすぐ下に貼り付けをしましょう。

貼り付けできましたか？


この５つ横に並ぶ画像のコードの説明をしますと・・・

<!-- ここから５つの画像のエリア -->

<ul id="message-image5"><a href="#"><li><img src="http://p.tl/FLLG" width="115px"></li></a><a href="#"><li><img src="http://p.tl/BuaH" height="115px" width="115px"></li></a><a href="#"><li><img src="http://p.tl/IgoS" height="115px" width="115px"></li></a><a href="#"><li><img src="http://p.tl/Tacb" height="115px" width="115px"></li></a><a href="#"><li><img src="http://p.tl/N51W" height="115px" width="115px"></li></a></ul>

<!-- ここまで５つの画像のエリア -->


を分解すると、

<ul id="message-image5">　と　</ul>  がコードの両端にあり、


その中に

<a href="#"><li><img src="画像のURL"></li></a>

が、５つ入っていることがわかると思います。


<a href="#"><li><img src="画像のURL"></li></a>

が、まさに画像を表示させるコードで、


それをリンク機能を設定する<a href="#"></a>

で囲まれているのがわかると思います。


これが５つ並んでいるから、画像が５つ表示されているわけですね。


手品と同じで、どんなものも説明をすれば意外と簡単なものです(*´ω｀*)


さて、コードの説明は終わりましたので、

実際に表示させたい画像のURLを貼り付けてみましょう。


今回のサンプルでは、正四角形の画像が使われていますので、

そのような画像を探してきて使ってください。


画像URLは、以下の部分に貼り付けして上書きしましょう。


今回のサンプルで使用されている画像URLは、

いずれも僕のダサイサンプルと同じ画像になっています。

自由に変えちゃってください。

５つとも同じ画像でもよし、違う画像でもよし、

練習の時に画像が用意できない場合は、

画像URLを変えずに張り付けたコードのままにしておけば僕と同じ画像が表示されます。



次に、画像をクリックしたときに飛ばすリンクについて設定していきましょう。


リンクについて書かれているのは、　<a href="#">　この部分です。

＃　の部分を飛ばしたいリンクに換えるだけで、好きなリンクへ飛ばすことが可能です。


つまり、

<a href="http://www.yahoo.co.jp">　とすれば、ヤフーにリンクを貼れますし、

<a href="http://www.google.co.jp">　とすれば、グーグルにリンクを貼れます。


画像に合ったリンクを設定してみてください。

さて、そうしましたら、ここまででこの記事でやるべきHTMLの部分は完了しました。


次はデザインに関する部分なので、CSSの編集から色々いじっていきます。


CSSがわけわからなくても、実際にここまで記事を読んでくださった方は、

知らず知らず　「ブログを書く」　から　「デザインの変更」

そして　「CSSの編集」　を選び

CSSのコードをいじってデザインを変えてきたんです(*´ω｀*)


知らず知らずCSSを使っていたわけですね！


素晴らしいです。



そうしましたら、

アメブロ豆知識といいますか、知らない人にはちょっと得する知識を一つ。


僕のサンプルのように

「読者登録はこちら」　なんて画像を作って、

「クリックしたら読者登録画面にリンクを飛ばしたい。」

そんな方もいらっしゃると思います。


やり方を説明しますね！


まず、画像自体はご自身で用意してもらうしかありませんが、

読者登録画面にリンクを張りたい場合、


自分のブログトップなどから、

サイドバーなどに「読者登録する！」　のようなリンクありませんか？


絶対どこかにあるはずなので探してください。

見つけたら、そのリンクをクリックして、読者登録画面が開くはずです。


もちろん、自分で自分のブログを読者登録することはできませんが、

登録画面自体を表示することはできますよね。


表示できたら、その登録ページのリンクをコピーして、

あとは　<a href="#">　の＃の部分に貼り付けてください。

これで、自分の読者登録ページへリンクを張ることができました。


同じ方法で、メッセージをしてもらうページに飛ばしたり、

ペタのページ、アメンバー登録ページなど好きなページに飛ばせますね(*´ω｀*)



今回の記事は少し難しかったと思います。


一度読んでわからなければ二度読んでください。

二度読んでわからなければ三度読んでください。

三度読んで駄目なら、１００回読んでください。笑


ここで書かれていることは難しくありませんし、絶対わかるはずです。

これ以上簡単な説明もなかなかできないと思います。


是非、自分を信じてトライしてください。



では、

次の記事　「メッセージボードのデザインを設定、変更する　其の二」　で会いましょう♪

今から上の画像の赤い部分に以下のコードを貼り付けます。

まずは、以下のコードをコピーしてください。

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝


コピーができたら、今度は貼り付けていきます。

下の画像を参考に場所を間違えないように張り付けましょう。

貼り付けができるとコードが以下のようになっているはずです。

貼り付けができたら、今度はブログを確認してみましょう。

ブログが、以下の画像のようになっていれば、うまくカスタマイズできています。

ブログのどこが変わったか気づきましたか？

３つの場所が変わっています。


まずは、記事の白い背景が少し透明になっている点です。

２点目は、記事の枠線が緑色になり、尚且つ少し太くなっています。

３点目は、記事の枠線の角が丸くなりました。

少し以前のデザインよりポップで可愛くなったのではないかと(笑)


もちろん、

記事の背景を白いままにしたり、記事の背景の色を変えたり、記事の背景を画像にしたり、

枠線の色を緑色ではなくピンク色にしたり、枠線の角は四角いままにしたりと、

好きなようにカスタマイズする方法を今から説明しますね(*´▽｀*)


まずは、記事の枠線について変更する場合を見ていきましょう。

枠線を変更するには、コードの以下の部分を変更します。

border:2px solid rgb(67,177,52);

↑　ここの部分ですね！


ここの部分を分解すると、


border:　と　2px と　solid　と rgb(67,177,52) の４つに分けられます。


border:　は、「今から枠線について指定しますよ！」　という意味です。

2px　は、「枠線を2pxという太さにしますよ！」　という意味です。

solid　は、「枠線を一本線にしますよ！」　という意味です。

rgb(67,177,52)　は、「枠線の色を()の中に書いた色にしますよ！」　という意味です。


・・・・・


難しいですね(笑)　　　でも、大丈夫です。

丁寧に見ていけば小学生でも理解できるはずです。


まず、border:　の部分は枠線について書いていくのでそのままにしておきましょう。


次に　2px の部分ですが、ここの２の部分の数字を１とか５とかに変えてみてください。

変えたら保存せずに　「表示を確認する」　で、

ブログのデザインがどう変わったか確認しましょう。

数字を変えるだけで枠線の太さが変わることが体感できるはずです。

お好きな数値に設定しましょう。


お次は、　solid の部分。

ここが少し難しいと思いますが、以下の選択肢から好きなものを選択してください。

solid →　１本線　　　double →　２本線　　　dotted →　点線

他にも一応ありますが、あまり使わないので上の３つからお好きなものを使ってください。


イメージがわかないと思うので、実際に設定しては　「表示を確認する」　で、

実際にどのように表示されるか試してみましょう！


最後に　rgb(67,177,52) ですが、これは難しい説明になってしまうので簡単に説明すると、

red green blue の頭文字で　rgb となっており、()の中にそれぞれの三原色を

０から２５５までの数値を入れて色を表現しています。


なーんてことを言われてもわからない人が９９．９９９９９９％だと思います(笑)

僕もいまいちわかっていません。　だから以下のサイトを利用しましょう！


http://shouginekochann.blog9.fc2.com/blog-entry-29.html


上のサイトでは、選択した色を上の　rgb　の方式で表示してくれますので、

それをありがたく利用させていただきましょう！笑

もちろん、無料で使えますのでご安心を。　登録とかもしなくて使えます(*^^)v

↑このような部分を利用します。


そして、色の部分を色々クリックして自分が使いたいような色を選択した状態で

下の文字部分に表示される上から二番目の部分のコードを拝借しましょう。

これで色もバッチりですね！


因みに、枠線を消したい場合は、

border:2px solid rgb(67,177,52);　の部分を　border: none;　に書き換えれば消えます。


ちょっと長くなりがちですが(笑)

線の色、太さ、線の形状　の編集方法について解説しました。


次は、記事の背景色を変える方法と、透明度を変える方法について解説します。


この記事の背景について記述されているコードは

background: rgba(255,255,255,0.9);/* ←記事に背景を敷きたいとき */

の部分です。


あれ？　これ見たことある？？　と思った方！　素晴らしい。

先ほどやった枠線の色を変える　rgb 形式の色の指定が利用されています。

しかし、rgb形式の色の指定は、あくまで色を指定するだけで透明度を指定できません。


つまり、　今回の　rgba の　a の部分は透明度についての記述なわけです。

rgb の色については　先ほどの無料で使えるありがたいサイトを利用するとして、


透明度の指定方法がわからない。。。


と、いうことで、透明度の指定方法について説明したいと思います。笑


今回のサンプルでは、

background: rgba(255,255,255,0.9);/* ←記事に背景を敷きたいとき */

透明度を表すのは最後の　0.9 という部分になります。


透明度を表現する場合は、

0.1　から 0.2　次が　0.3 次が　0.4 と、1 までの１０段階で、

0.1 が一番透明で、　数字が大きくなるにつれて不透明になっていきます。

1　では、完全に不透明になります。


今回のサンプルでは、

background: rgba(255,255,255,0.9);/* ←記事に背景を敷きたいとき */

で、　0.9 でしたから、ほぼ不透明。　でもちょっぴりだけ透明。

そんな設定だったわけです(笑)


色を変えて、透明度を変えて、記事背景をお好きなデザインに　レッツカスタマイズ♪



最後に。。。(ちょっぴり書くの疲れてきたのは内緒ｗ)


本文の枠線の角を丸くしたコードについて解説します。

ここの部分です。

なぜ、３行もあるのかというと、難しい話になるので割愛。

要は、　15px という数字をいじると角の丸さが変わっていくという感じです。


文字で説明するのは難しいので、

こればかりは実際に数字をいじって変化を楽しんでください←投げやり


※数字を変える際は、３行とも同じ数字に変えてくださいね！


角を丸くしたくない人は、

この３行を丸々消しちゃってください。　それで角が丸くなることはなくなります。



最後に、「表示を確認する」　を押して、好きなデザインになったら、

保存してしまいましょう！！！

お疲れ様でしたーーーー(T_T)ーーーー


今回の記事はすごく長くなってしまいました。。。申し訳ないです。


でも、これ以上分かりやすい説明はなかなか難しいので、頑張ってください！！！


そして本当にお疲れ様でした。　僕もお疲れ様←自分で言うな( ;∀;)

その後、画像をアップロードしてくださいね！

次に、画像の部分を右クリックして、　「画像ＵＲＬをコピー」　を押します。

これでコピーが完了しました。

コピーができましたら、あとでこの画像のＵＲＬを使うので、

メモ帳などに貼り付けて後で使う時に使えるように各自保存しておいてください。


これで画像の用意は終わりです。


これからＣＳＳの編集(アメブロのデザイン編集)を行っていきますので、

「記事を書く」　を押して　「デザインの編集」　を押して　「ＣＳＳの編集」　と

いつものようにコードを編集できるページまでもっていってください。

ＣＳＳの編集画面までもっていけましたか？


次は、ＣＳＳのこの部分を編集するのでこの部分まで下にスクロールしてください　↓

そうしましたら、

上の画像で赤く囲んである部分に以下のコードをコピーして貼り付けます。

まず、以下のコードをコピーしてください。


＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝

/* skinArticleHeader 記事タイトルエリア */

.skinArticleHeader{

margin:0 29px;

padding: 10px 2px 10px 40px;

border-left: none;

background-image: url(ココに画像のＵＲＬを);

background-position: center left;

background-repeat: no-repeat;

}

.skinArticleHeader2{

padding-top: 9px;

font-size: 105%;

}

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝


コピーができましたら、貼り付けをしていきましょう。

以下の画像を参考に、場所を間違えないように貼り付けてください。

貼り付けができると、以下のようになります。

よく自分の画面を見比べて正しく貼り付けができているか確認してみてくださいね！


次は、先ほどメモ帳にとっておいた画像のＵＲＬをコピーしてきてください。

コピーできたら、先ほど張り付けたコードの中の以下の画像と同じ部分に

今コピーした画像のＵＲＬを貼り付けます。

貼り付けができると以下の画像のようにコードがなっているはずです。

※画像ＵＲＬ部分はそれぞれ各自違うＵＲＬのはずなのでそこが違っていても大丈夫です


できましたでしょうか？

出来たらさっそくブログの表示を確認してみましょう！

ブログにうまくデザインが反映していましたか？

うまく変わっていない人は間違えたところがないかもう一度チェックしてみましょう！

うまく変わっていた人は、

最後にこの編集を保存しましょう。

これで完了です(*^^)v　お疲れ様でした(*´▽｀*)♪


今後好きな画像をこのアメーバのロゴと取り替えて好きなデザインを楽しんでください！

今回やった手順の画像ＵＲＬを取り換えれば他の画像に切り替わります(*^^)v

そうしましたら、今度は　「ＣＳＳの編集」　を押しましょう。

さて、ここまでは前回の記事と同様ですね。

次は、背景にする画像をアップロードします。

先ほどパソコンに保存した画像を選択し、アップロードを押してください。

うまくアップロードできれば、

以下の画像ように今回追加した画像が追加されているはずですので

アップロードした背景用の画像をクリックしましょう。

ここら辺の工程も前回の記事で解説したヘッダー画像を変える時と手順は一緒ですね！

次にクリックしたら表示される画像のＵＲＬをコピーしましょう。

コピーができたら、元の編集ページに戻り、

(3-1)　ボディ (全体)　というところまで下にスクロールしてください。

上の画像の場所が表示できたら、

次は以下の画像のようにＥＮＴＥＲ(エンター)・キーで改行してください。

※改行する行数は適当で大丈夫です。

改行してコードを書き込むスペースができたら、

次は下の画像のように先ほどコピーした背景用画像のＵＲＬを貼り付けます。

貼り付けができたら、次は以下のコードをコピーしましょう。


＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝

background-image : url(ココにＵＲＬをコピーする);

＝＝＝＝＝＝＝（内側だけコピーしてください。）＝＝＝＝＝＝＝＝＝


コピーできたら下の画像のように先ほど作ったスペースに貼り付けてください。

貼り付けできましたでしょうか。

貼り付けができたら、今度は先ほど張り付けた背景用画像のＵＲＬを切り取ります。

切り取ったら、今度は先ほど張り付けたコードの　（ココにコピー）　の部分の

()の中にある　ココにコピー　の部分に貼り付けます。

　

できましたか？　これができたら、以下の画像のようになっているはずです。

※背景用画像のＵＲＬは、みんな違いますのでそこは違くなってても大丈夫です。

これで設定完了なので、　下の方にある　「表示を確認」　を押してブログを確認してみましょう。

うまくできていれば、下の画像のようにちゃんと背景に画像が入っているはずです。

ちゃんと画像が背景に入っていればちゃんと設定を保存しましょう。

背景に画像が反映されていない人は、どこかの手順で間違えていることになるので、

記事を読み直して確認してみてくださいね(*^^)v