アメブロ(xhtml版)のカスタマイズ

アメブロ(xhtml版)

ここで紹介するアメブロカスタマイズは以前のアメブロ(xhtml版)の為現在のアメブロ(html5版)には対応していません。それを確認の上記事をご覧ください。

アメーバブログ(アメブロ)はブログを簡単に作成できて動画や限定公開機能が使え携帯(モブログ)にも対応してます。有名人・芸能人のブログも充実していることでも有名な無料で作成できるブログです。

その他無料で使えるブログで有名なのがFc2ブログです。Fc2ブログのカスタマイズは割かし簡単にカスタマイズ出来るんですが、アメブロのcss(スタイルシート)は少し複雑でカスタマイズがしにくいと思います。

アメブロ用の簡素化したcss(スタイルシート)を紹介しておきますのでよかったらご自由にお使いください。

アメブロカスタマイズの準備

まずはカスタマイズする為にカスタマイズ可能なデザインを選びます。デザイン変更で【カスタム可能】ベーシックで3カラムを選びます。

アメブロベーシックデザイン

cssの編集をクリックして、現在使用中のブログデザインCSSを下記の簡素化したアメブロカスタマイズ用CSS(スタイルシート)に書き換えます。但し下記のスタイルシートはサンプルのサイトに合わせてヘッダー、サイドバー、フッターなどの文字の位置やタイトルなどを設定しています。又画像を使って作成していますので画像も自分のサイトに合わせて変更してください。

簡素化したアメブロカスタマイズ用CSS(スタイルシート)

/* 全体
---------------------------------------------------------------------------*/
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS P Gothic", sans-serif;
font-size: 80%;
color: #fff;
line-height: 1.7;
margin: 0px;
background-color: #333333;
}

h1,h2,h3,h4,p,ul,li,dl,dt,dd{
margin: 0px;
padding: 0px;
}

ul{
list-style-type: none;
}

img {
border: none;
}

a {
text-decoration: none;
color: #FF0;
}

a:hover {
color: #666;
text-decoration: underline;
}

/* 全体レイアウト */
#frame {
width: 1100px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/* ヘッダー */
#header {
width: 100%;
float: left;
height: 540px;
margin: 0px;
padding: 0px;
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20101110/18/e5/bf/j/o11000540hieverfreede1289382051559.jpg);
background-repeat: no-repeat;
}

/* ヘッダーレイアウト枠削除 */
#overHeader #userNaviArea{
display:none !important;
}
#header h1 {
padding-top: 430px;
padding-left: 300px;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#header h2 {
margin: 0px;
text-align: left;
font-size: 120%;
padding-left: 300px;
padding-top: 0px;
font-weight: lighter;
}

/* 3カラムを囲む */
#wrap {
width: 1100px;
float: left;
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20101110/18/f1/2f/j/o11000010hieverfreede1289382102741.jpg);
background-repeat: repeat-y;
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
}

/* メインコンテンツ */
#main {
float: left;
width: 500px;
padding: 0px;
text-align: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}

/* 記事のタイトル */
#sub_main h3.title {
margin: 0px;
height: 50px;
width: 400px;
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20101110/19/11/e5/j/o04800060hieverfreede1289385139558.jpg);
color: #CCC;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 80px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
font-size: 120%;
}

/* 各記事のボックス */
.entry {
margin-bottom: 30px;
border: 1px solid #333;
padding: 10px;
}

/* サイドバーa,bボックス */
.mainMenu {
margin-bottom: 30px;
border: 3px dashed #FFF;
padding: 10px;
}

/* サイドバーa */
#sub_a {
padding: 0px;
width: 250px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 60px;
float: left;
}

/* サイドバーaプロフィールタイトル */
#sub_a #profile .menu_title {
font-size: 0px;
background-image: url(http://stat.ameba.jp/user_images/20101111/18/hieverfreede/27/b9/j/t02200048_0230005010853238533.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 50px;
width: 230px;
}
/* サイドバーaプロフィールメニュー */
#sub_a #profile .menu_frame {
padding-left: 40px;
padding-top: 20px;
}

/* サイドバーaカテゴリータイトル */
#theme_list .menu_title {
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20101111/11/82/c0/j/o02300100hieverfreede1289443981377.jpg);
background-repeat: no-repeat;
height: 100px;
width: 230px;
font-size: 0px;
}

/* サイドバーaカテゴリーメニュー */
#theme_list .menu_frame ul li {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #FFF;
}

#sub_a #theme_list .menu_frame ul li a {
background-image: url(http://stat.ameba.jp/user_images/20101111/20/hieverfreede/ab/b3/j/t02200077_0230008010853525877.jpg);
display: block;
background-position: bottom;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
height: 20px;
width: 200px;
background-repeat: no-repeat;
}

#sub_a #theme_list .menu_frame ul li a:hover {
background-image: url(http://stat.ameba.jp/user_images/20101111/20/hieverfreede/ab/b3/j/t02200077_0230008010853525877.jpg);
background-repeat: no-repeat;
background-position: top;
color: #FF0;
text-decoration: none;
}
/* サイドバーaカテゴリーメニュー ここまで*/

/* サイドバーb */
#sub_b {
float: right;
padding: 0px;
margin-top: 0px;
margin-right: 60px;
margin-bottom: 0px;
margin-left: 0px;
width: 190px;
}

/* サイドバーbメニュー */
#sub_b .menu_title {
background-image: url(http://stat.ameba.jp/user_images/20101111/16/hieverfreede/52/33/j/t01700050_0170005010853058304.jpg);
background-repeat: no-repeat;
margin: 0px;
height: 50px;
width: 170px;
padding-top: 5px;
text-align: center;
}

/* コメント */
#comment_module {
margin-top: 50px;
}
#comment_module .each_comment {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #333;
}
#comment_module .each_comment .label {
background-image: url(http://stat.ameba.jp/user_images/20101113/21/hieverfreede/37/38/j/t02200033_0400006010857504571.jpg);
background-repeat: no-repeat;
background-position: 3px 4px;
padding-left: 30px;
}

#comment_show {
background-color: #333;
}
#comment_show h4 {
color: #FF0;
}
#comment_show p {
color: #FFF;
}
#comment_show ul {
margin-left: 10px;
}

/*フッター
-----------------------------------------------------*/
#footerArea{
clear: both;
height: 300px;
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20101110/18/18/46/j/o11000300hieverfreede1289382112185.jpg);
background-repeat: no-repeat;
width: 1100px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/* フッターのボーダー削除 */
div#footerArea {
background-color:transparent !important;
border:none !important;
}

/* フッターAmebaロゴ位置 */
#footerArea a img {
padding-top: 80px;
padding-left: 500px;
}

/* フッターアメーバ会員登録の位置 */
a#register {
margin-top: 200px;
}

引き続きこのスタイルシートを使った完成デザインや詳細などを紹介していきます。

ページ: 1 2

最終更新日: 2013年2月3日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

アメブロ(xhtml版)のカスタマイズの関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*