アメブロサイドバー各タイトルを画像化する

今日はアメブロサイドバーにある各項目のタイトルを画像化するCSSのご紹介♪
項目はデフォルトで全部で11タイトル。
下記のとおりです。

・プロフィール
・ブログテーマ一覧
・最近に記事の一覧
・カレンダー
・アーカイブ
・ブログ内検索
・アメブロランキング
・お気に入りブログ
・このブログの読者
・ブックマーク
・最近のコメント

これらを画像化していきましょう！


赤文字の箇所はあなたの画像に合わせて変更してください。

プロフィール

/*プロフィール
#profile h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

ブログテーマ一覧

/*ブログテーマ一覧
#theme_list h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

最近に記事の一覧

/*最近に記事の一覧
#recent_entries h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

カレンダー

/*カレンダー
#calendar h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

アーカイブ

/*アーカイブ
#archives h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

ブログ内検索

/*ブログ内検索
#search h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

アメブロランキング

/*アメブロランキング
#ranking h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

お気に入りブログ

/*お気に入りブログ
#favorite h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

このブログの読者

/*このブログの読者
#reader h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

ブックマーク

/*ブックマーク
#bookmark h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

最近のコメント

/*最近のコメント
#recent_comment h4.menu_title {
height: 30px;//画像の高さ
width: 170px;//画像の横幅
margin: 0px 0px 10px 0px;
padding: 0px 0px;
background: url(http://画像URL) no-repeat;
text-indent: -9999px;
}

以上で簡単に画像化ができます。
CSSファイルの一番下に追加するだけでOK！

アメブロ画像フォルダーにアップした大きな画像が800pxに縮小されてしまう件

おは・・こんにちは＾＾

アメブロカスタムでどうしてーも、気になることがあるので記事にしました。それはアメブロのカスタムに当たって800px以上の幅の画像を画像フォルダーにアップすると強制的に800ｐxに縮小されてしまう。。ということ。

最初はこれでハマってしまいました。え、なんで？
画像の書き出しサイズ間違ったかな・・・。
しかし何度書きだしても、800ｐｘになってしまいます。
いやでもそんな初歩的な間違いする訳ない！と思ったので良く調べてみるとアメブロの仕様で「画像フォルダ」にアップした画像の幅が800pxに強制的に縮小されてしまうということだったのです。ｳｰﾝ。

これでは大きな横幅のサイトを作るとき何かと不便ですよね。


実はデザイン変更のCSSのカスタムページあるたった5枚だけなんですが、画像をアップロードできる機能がありますので、そちらでアップすれば画像は縮小されずにそのままの大きさで利用できます。
5枚って・・・すくなーい＞＜

しかし、この範囲内でデザインをカスタムするか、もしくは外部のサーバーに画像ファイルをアップして読み込むかしかないのが現状。。

外部からの読み込みをしてしまえば、簡単に解決する問題ですが、なるべくシンプルに、アメブロ内だけで綺麗に完結させたいので、ここは我慢です。

大きな幅のサイトを作る場合は幅広画像5枚で完結できるようにデザインをするのが基本セオリーとしました。（スイの勝手なアメブロデザインセオリー）（笑

さすがにお客様に外部のサーバー借りてください。。という提案はナンセンスですよね。

アメブロテンプレートもうすぐ完成-メイクストーリー-

制作が立て込んでいて更新がおろそかに＞＜

ということで、もうすぐ、テンプレートが完成します。と言っても枠組みが完成するだけなので、しっかりとした製品として完成させるにはもう少し、ブラッシュアップが必要です。

ポイントはパーツを差し替えるだけで雰囲気をガラっと変えることができる、プロ仕様のテンプレート！という点なので、

・あらかじめきれいな背景画像を12点用意します。
・透明感のあるデザインがコンセプトデザインのため、背景をうまく透過させています。
・カラーは6カラー用意しカラーごとにパーツを仕上げます。
これで、ある程度様々な業種のブログに対応することが出来るのではないかなと。

背景の雰囲気をいくつかピックアップしてみましたので御覧ください～。
背景差し替えで、あなただけのプロ仕様ブログに変身！

テンプレートには12種類の背景を同梱。
もちろん、あなたのオリジナル画像を背景に入れることも可能です。
下記はデフォルトで同梱予定の背景を埋め込んだ時のサンプルイメージです。

デモコーディング中の様子はこちらから御覧ください。
http://ameblo.jp/sui-demo-netshop/

アメブロ専用ブログテンプレート「Dynamic Monochrome」を制作中。

嵐の週初めでしたね。。5月に台風って異常気象かしら。。

と前置きはさておき（笑
すいはアメブロ専用のテンプレートの作成を行っています。
完成次第、販売予定ですので乞うご期待！いただければ・・ｗ
今回のコンセプトはダイナミックでシンプルなテンプレート。誰でも使いやすいように考えて作成しております。

そのテンプレートのデザインを是非ご紹介しますね！（作成中です・・・汗）

コンセプト

アメブロ専用テンプレートのDynamic Monochromeは大胆なレイアウトと
分かりやすい行間、文字サイズにこだわった、大胆なテンプレートです。

・ヘッダー画像はオリジナルに差し替え可能。
・素敵な背景を12パターン同梱。お好きな背景を選べます。
・カラーパターンは6種類同梱。お好きなカラーでブログを作れます。
・950ｐｘのゆったりレイアウトで、大きく分かりやすいレイアウト。
・透明感ある素材使った、クリアなデザイン。
・シンプルでどんな業種にも適応可能なデザイン。
・Twitter、FaceBookボタン同梱。
・簡易設置マニュアル同梱。
・別途設置代行も可能。
・別途ヘッダー画像も作成代行可能。
・ブログコメント欄にて無償サポートご提供

以上！です。

気になった方は完成後、メッセージでご連絡しますので、コメントくださいね♪

アメブロカスタム-ページの幅を調整する

デフォルトのページの幅は800pxで作成されています。

現在の普及しているモニターサイズは幅広のものが殆どですので、ＰＣ向けのブログももう少し幅を広げて見やすくすると読者の方にも優しいですね。

ではどのくらいの幅が良いでしょうか？最近のサイトは900px～1000pxの間で作られることが多いようです。

スイのブログは1000pxの幅があるのでかなりゆったり幅広ですね。

その分文字のフォントも大きくし、文字が小さくて呼んでいて疲れないように工夫をしています。

今回はそんなブログの幅をCSSで調整してみましょう。

ブログカスタムをする際、一番初めに行うべき、ブログページ設計の基礎部分になります。

今回は800pxから960pxに広げるカスタムをしてみましょう。

ページ全体の幅調整

元ソース（ページの幅）

#frame {

width: 800px;/*ここの数字がページの幅。値を変えれば幅が変わります。*/

margin: 0 auto;

background-color: white;

text-align: left;

}

#wrap {

width: 800px;/*ページの幅。値を変えれば幅が変わります。*/

}

ソース変更後

#frame {

width: 960px;/*ページの幅。値を変えれば幅が変わります。*/

margin: 0 auto;

background-color: white;

text-align: left;

}

#wrap {

width: 960px;/*ページ内枠の幅。#frameの幅と同じに合わせる。背景がある場合は左右の余白10px分を考慮し940pxに*/

}

次に各レイアウトの幅を調整します。

3カラム（左右サイドバーの場合）

元ソース

#main {

float: right;

width: 610px;/*中央カラムの幅。値を変えれば幅が変わります。*/

margin:0;

padding:0;

}

#sub_a{

width:170px;/*左カラムの幅。値を変えれば幅が変わります。*/

margin:0;

padding: 0;

float: left;

z-index: 1;

}

#sub_b{

display: none;

}

変更後

#main {

float: right;

width: 700px;

margin:0;

padding:0;

}

#sub_a{

width:240px;

margin:0;

padding: 0;

float: left;

z-index: 1;

}

#sub_b{

display: none;

}

2カラム（左右どちらかにサイドバーの場合）

元ソース

#main{

float: left;

width: 420px;/*中央カラムの幅。値を変えれば幅が変わります。*/

margin:0;

padding:0 10px;

}

#sub_a{

float: left;

z-index: 1;

width:170px;/*左カラムの幅。値を変えれば幅が変わります。*/

margin:0;

padding:0 10px 0 0;

}

#sub_b{

float: right;

z-index: 2;

width:170px;/*右カラムの幅。値を変えれば幅が変わります。*/

margin:0;

padding:0;

}

変更後ソース

#main{

float: left;

width: 500px;

margin:0;

padding:0 10px;

}

#sub_a{

float: left;

z-index: 1;

width:210px;

margin:0;

padding:0 10px 0 0;

}

#sub_b{

float: right;

z-index: 2;

width:210px;

margin:0;

padding:0;

}

上記の変更でページの幅が広がり、内部のカラムもそれに合わせて広げることができました。