アメブロCSSに使う画像をアップロードする時の小技

どうもみなさんこんにちわ！

クーラーのお世話になりっぱなしのタマネギボムです＾＾

今回はCSSを編集する時に使う画像をアップロードする時の小技を紹介します。

例えば、ブログヘッダーや背景画像、そのほかメニューバーなど

ブログを作る際に色々な画像をアップロードしてブログデザインに使いますよね。

ただ、CSS編集画面の画像をアップロードするところを見てもらえればわかるのですが

画像がアップロードは５枚までしかできないと書いてあると思います。

じゃあ５枚よりもっと画像を使いたいと思った時はどうすればいいのか？！

それを今回、紹介したいと思います。

といってもそんな難しいことではなく、CSS編集画面に画像をアップロードする

というのではなく、画像フォルダにアップロードするというものです。

こうすることによってCSS編集画面のアップロード限界枚数の５枚という制限を越えて

2Gまで画像をアップロードすることができます！(使うかどうかは別ですが＾＾；)

これでアップロードすることによって、使える画像の幅がぐっと増えますよね。

しかし、もちろんのことながら世の中そんな上手い話ばかりじゃありません・・・

この画像フォルダにアップロードできる画像サイズというのに制限があるんです。

それは縦幅が800px　横幅が800pxと決まっています。

画像の容量の大きさ制限は２Mｂとなってるんですね。

なので画像フォルダに作った画像や撮った画像をアップロードして入れる時は

このサイズを守ることを念頭におかないといけません。

逆を言えば、この画像サイズを守りさえすれば、画像フォルダの容量いっぱいまで

好きなだけ画像を入れられるということです。

つまり、CSSでアメブロのデザインをカスタマイズする時にこれを応用して

縦：横が800px：800px以下の場合は画像フォルダにアップロード

縦：横が800px：800pxより大きい場合はCSS編集フォルダにアップロード

と使い分けることによって、アメブロカスタマイズの幅が広がるということです。

例えば、ブログヘッダーの場合横幅が980px前後のことが多いので

CSS編集画面の方に画像をアップロードしなければいけないです。

しかし、もしブログの背景を一枚の絵にするのではなく、タイルみたいに

ひとつの画像を敷き詰めるといった背景にする場合、CSS編集画面に

わざわざアップロードするのではなく、画像フォルダの方にアップロードすれば

大きい画像を５枚しかアップロードできないという枠を使うことなく

背景画像を敷き詰めることができます。

僕のアメブロデザインもそういった便利な小技を使って作られていますよ(*^∇^*)

CSSでアメブロのデザインをカスタマイズしたいという時に

大きい画像を５枚使いたいけど、小さい画像もデザインに使いたい！

といった時に重宝する便利な小技です。

是非とも使ってみてくださいね♪

それでは最後まで読んで頂きどうもありがとうございました！

ブログタイトルの背景を編集してみる～その２～

どうもみなさん、こんにちわ！

わかりやすくをモットーに記事を書いているタマネギボムです＾＾

前回に引き続きタイトル部分のブログヘッダーの編集をしていこうと思います。

ブログヘッダー部分にタイトルと説明文が書いてありますが

例えば、僕のブログみたいに画像ソフト等で作った１つの画像・背景に

背景もブログタイトルと説明文も一体になっている、もしくは

一体になったものを使いたいという場合がありますよね。

背景も文字も一緒にして画像を作るというのは個性をブログに出す

そういった時に必要かと思います。

今回はブログヘッダーに作った画像を載せるというのを解説したいと思います。

それではいつもどおり、デザインの変更→CSSの編集から編集画面を開きます。

次にCSS編集エリアから、以下のような部分を探してください。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

そこにCSSを編集してタグを付け足します。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background:url(この文字を消して画像のURLを入れます);
background-repeat:no-repeat;/*←画像を繰り返さないようにする*/
height:○○px;/*←画像の縦幅を○を消して数値を入れて指定します*/
width:○○px;/*←画像の縦幅を○を消して数値を入れて指定します*/
}/* ←ブログヘッダーに背景画像を敷きたいとき */

上のbackground()の括弧で括られた部分にあなたがデザインソフト等で作った

ブログヘッダー画像を入れます。

『height:;』がブログヘッダー部分の縦幅を指定するCSSタグです。

『width:;』はブログヘッダー部分の横幅を指定するCSSタグです。

作った画像を入れる時に○消してそれぞれ画像の縦幅と横幅の数値を入れます。

これは補足ですが、アメブロのブログヘッダーを作る際に気をつけることなんですが

画像サイズには基準があって、横幅が980pxと縦幅が300pxとなっています。

画像の縦幅が長くてもブログにあまり支障はないんですが

横幅のpx（ピクセル）が長いと読んでくれている人のディスプレイ画面によっては

ブログヘッダーが収まりきらない場合があります。

なので、画像を作る際横幅は980pxを大幅に超えない程度に作るようにしてください。

それじゃあ、僕がCSSを編集してできたブログをみてみましょう。

ちょっとブログらしくみえるでしょうか？＾＾；

これでできあがりというわけではなく、画像の左上を見てもらえればわかるのですが

ブログのタイトルと説明文の文字が残ったままになってしまっています。

なので、この文字の表示を消して、すっきりさせましょう！

先ほどのCSSタグを書いた場所の下に以下の部分があります。

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

この部分に以下の下記のタグを付け加えます。

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
display:none;/*←タイトルと説明文の文字を消す*/
}

さて、そのCSSタグを付け加えたブログ画像がこちらです。

背景から文字が消えて、ヘッダーがすっきりしましたね！

以上でブログヘッダーに背景を入れる編集作業は終わりです。

ヘッダーに背景を入れるだけで、ブログらしさがぐぐっと変わってきます。

タイトルや説明文の文字もアメブロそのままの文字で書くのではなく

画像でフォントを変えて作ったブログの方が印象が良いのは間違いないと思います。

なので、是非！デザインソフト等で簡単にでもいいのでブログのヘッダーを作ってみて

もっとあなたのブログが良くしてあげてください♪

それでは最後まで読んで頂きありがとうございました(*^∇^*)

ブログタイトルの背景を編集してみる～その１～

どうもこんにちわ！

ブログ運営人のタマネギボムです！

今日の記事ではブログタイトルの背景を編集してみようかと思います！

前回ブログのタイトルを編集してみるという記事をしましたが

文字だけだとやっぱり味気ないですよね＞＜；

なので、もっとあなたのブログを華やかにする為に

ブログタイトルの背景をCSSで編集して、かっこいいブログを目指しましょう！

それではまずデザインの変更→CSS編集から編集画面を開きます。

次にCSS編集エリアから、以下のような部分を探してください。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

タイトル背景の部分のことをブログヘッダーと言うので覚えておいてください。

そして、半角の中括弧『｛｝』で囲ってある部分の中を以下のように修正します。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background:url(この文字を消して画像のURLを入れます);
}/* ←ブログヘッダーに背景画像を敷きたいとき */

『background:();』というのが付け加えられたのがわかると思います。

そして上の括弧『（）』でくくられた中の部分に画像のURLを書きます。

ちなみに僕はCSSを編集して、このような感じになりました。

背景に使った画像がこちらです。

上の画像のままだとサイドメニューの部分との隙間がくっつきすぎて

なんかちょっと息苦しい感じがしますよね＾＾；

なので、以下のようなCSSタグを付け加えます。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background:url(この文字を消して画像のURLを入れます);
margin-bottom:30px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

変更後のブログがこちらです。

これで少しスペースが出来て息苦しさが軽減されたかと思います＾＾

『margin-botoom』というのはヘッダー下の部分に隙間をつくるというCSSタグです。

『px』で指定した数値が大きくなればなるほど、隙間が大きくなります。

ちなみにですが、画像を見て頂ければわかるのですが

ブログ説明文の文字が大きくなっていますよね。

タイトルの文字を大きくするというのを応用して、以下のように書きました。

/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
font-size:1.8em;/*付け加えた部分*/
}

この部分も前回と同じように色や大きさ太さが変更できます。

ポイントはタイトルの文字の大きさよりも小さくするというところですね＾＾

さて、今回の記事色々な部分のCSSを編集しましたがいかがだったでしょうか？

何度も読み返してもらえれば理解できる内容だと思うので

是非とも挑戦してみてください♪

次回はブログヘッダーの応用編を解説したいと思います＾＾

それでは最後まで読んで頂きどうもありがとうございました。