小粋空間: アメーバブログスキン

Top ＞アメーバブログ＞テンプレート＞アメーバブログスキン

2007年9月18日

アメーバブログスキン

Posted at September 18,2007 2:55 AM
Category：[テンプレート]
Tag：[Ameba, Template]

アメーバブログ用のスキンを作りました。サンプルのスクリーンショットは3カラムですが、2カラムも用意しております。カラムレイアウトの変更方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

OS：Windows2000/XP
ブラウザ：IE6/IE7/Firefox2/Opera9/Safari3
アメーバブログ：http://ameblo.jp/youjiroh/

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．カラムレイアウト

このスキンではカラムレイアウトのバリエーションとして、

3カラム固定レイアウト
2カラム固定レイアウト（右サイドバー）
2カラム固定レイアウト（左サイドバー）

の計3種類を用意しています。カラム幅はデフォルトで設定されたものよりやや広くなっています。
リキッドレイアウトについては現在確認中です。

カラムレイアウト変更については、管理ページの「スキンの選択」およびテンプレートの後方にあるカラムレイアウト用のセレクタをコメントアウトで切り替えることで実施してください。デフォルトでは3カラム固定レイアウトが有効になる状態で配布しています。
設定の詳細については本エントリーあるいは別エントリーで別途お知らせ致します。

４．その他

基本的な動作は確認したつもりですが、アメーバブログの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

５．スキン

/*
 * File      : css
 * Version   : 0.01
 * Update    :
 * 0.01 2007.09.18: Initial version.
 *
 * Copyright (C) 2005-2007 www.koikikukan.com All rights reserved.
 */

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}

body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* リンク */
a,
a:link,
a:visited {
    color: #006699;
    text-decoration: none;
}
a:hover {
    color: #006699;
    text-decoration: underline;
}
a:active {}

/* リンクつき画像 */
a img {
    border: 0;
}

/* 段落 */
p {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 順序なしリスト */
ul {
    padding-left: 16px;
}
ul li {
    list-style-type: circle;
}

/* 定義リスト */
dl {}
dt {}
dd {
    padding-left: 8px;
}

/* フォーム */
form {
    margin: 0px;
}
input {
    padding: 1px;
    font-size: 12px;
}
.searchbox {
    width: 140px;
    height: 15px;
}

/* タイトルバナー */
#header {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}

#header a,
#header a:link,
#header a:visited {
    color: #ffffff;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}

/* タイトルバナー下の説明 */
#header h2 {
    color: #ffffff;
    font-size: 12px;
}

/* エントリー全体 */
#sub_main {
    margin: 15px;
    background: none;
    width:0%!impotant;
    overflow:none!important;
}

/* エントリー日付 */
.entry_head {
    padding-left: 8px;
    color: #fff;
    background: #8fabbe;
    font-size: 83.3%;
    font-weight: bold;
    line-height: 2.0;
}

/* エントリー日付・コメントタイトル・トラックバックタイトルの配色 */
.entry_head,
#comment_module h3.title,
#comment_show h4,
#trackback h3.title,
.comments-header,
.comments-open-header {
    color: #ffffff;
    background: #8fabbe;
}

/* エントリータイトル */
#sub_main div.entry h3.title {
    margin: 15px 0 10px;
    padding-left: 5px;
    border-left: 3px solid #999;
    font-size: 100%;
    font-weight: bold;
}

/* エントリー */
.contents {
    width: auto;
    margin: 0 0 15px;
    color: #36414d;
    background: #ffffff;
    font-size: 83.3%;
    line-height:1.5;
    word-break: break-all;
}
.contents a:active {}
.contents img {
    margin-right: 8px;
    margin-bottom: 5px;
}

/* エントリーのテキストエリア可変長指定 */
.contents textarea {
    width: 97%;
}

/* 追記 */
.contents.extended {}

/* 投稿者 */
.foot,
.comment_footer {
    margin: 10px 0 10px;
    padding-top: 3px;
    border-top: 1px dotted #36414d;
    text-align: right;
}
.foot {
    font-size: 75%;
}
#comment_module div.comment_footer {
    font-size: 83.3%;
}

/* アーカイブページの前後リンク */
.content-nav {
    margin: 10px;
    text-align: center;
    font-size: 12px;
}

/* 引用 */
blockquote {
    width: auto;
    margin: 15px 20px 0 20px;
    padding: 10px;
    border: 1px solid #666666;
    background: #f6f6f6;
    font-size: 10px;
    line-height: 150%;
}
.quotetitle { /* 引用文タイトル */
    font-size: 10px;
    border-bottom: 1px solid #666666;
    padding: 3px;
}

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #f6f6f6;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}
html>body pre {
    width: 87%;
}

/* カレンダー */
#calendar {
    text-align: center;
    color: #444444;
    background: none;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar caption {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 10px;
    font-weight: normal;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}

/* サイドメニュータイトル */
h4.menu_title {
    margin-top: 3px;
    border: 1px solid #666;
    color: #333;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}

#ameblo ul {
    padding: 0;
}
#ameblo ul li {
    list-style-type: none;
}

/* サイドメニュー */
.menu_frame {
    margin: 3px 0 20px;
    background: none;
    color: #333;
    font-size: 75%;
    line-height: 1.5;
}

/* カウンター */
.counter {
    margin: 8px 0 25px;
    padding: 2px;
    background: none;
    font-size: 9px;
}

/* RSSフィード */
.syndicate {
    margin-bottom: 5px;
    text-align: left;
    color: #666666;
    font-size: 9px;
    line-height: 150%;
}

/* クレジットバナー */
.powered {
    margin-top: 50px;
    text-align: left;
    color: #666666;
    font-size: 9px;
    line-height: 150%;
}
.powered img {
    margin-top: 3px;
}

.clear {
    clear: both;
}

/* コメント・トラックバック */
#comments-open-data p {
    margin-bottom: 10px;
}

#comment-post {
   font-weight: bold;
}

#comment-author, #comment-email, #comment-url, #comment-text {
   width: 220px;
}

#comment-text {
    width: 266px;
}

#comment-bake-cookie {
   margin-left: 2px;
   vertical-align: middle;
}

#comments-open-footer {
    text-align: center;
}

.trackbacks,
.comments {
    margin: 10px 5px;
    color: #36414d;
}

#comment_module h3.title,
#comment_show h4,
#trackback h3.title,
.comments-header,
.comments-open-header {
margin: 15px 0;
    padding-left: 8px;
    color: #fff;
    background: #8fabbe;
    font-size: 83.3%;
    font-weight: bold;
    line-height: 2.0;
}

#trackbacks-info,
.each_comment,
#comment_show p,
#comment_module p.list,
p.tr_ping_URL,
p.tr_URL {
    margin: 0;
    padding: 0;
    font-size: 83.3%;
    line-height: 150%;
    word-break: break-all;
}

.trackback-content p,
.each_comment p {
    margin-top: 10px;
    margin-bottom: 5px;
}

.trackback-footer,
.comment-footer {
    font-size: 9px;
    border-top: 1px dotted #36414d;
    text-align: right;
    padding-top: 3px;
    margin-right: 2px;
}

.comments-open label {
    display: block;
}

.comments-head {
    font-size: 11px;
    color: #ffffff;
    background: #8fabbe;
    padding: 2px 0 2px 5px;
    margin: 15px 0;
}

/* カラム切り替え */
#wrap {
    margin-top:0;
}

#firstContentsArea {
    margin: 0;
    padding: 0;
}

#subFirstContentsArea {
    margin: 0;
    padding: 0;
}

#sub_main{
    width: 478px!important;
    overflow: hidden;
}

#mainIndex {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
#container {
    margin-bottom: 10px;
}
/* 3カラム固定レイアウト用 */
#frame {
    width: 880px!important;
    margin-right: auto!important;
    margin-left: auto!important;
    padding: 0 0 15px 0!important;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

/* 3カラム固定レイアウト用 */
#main {
    float: left;
    width: 508px!important;
    _width: 478px!important;
    margin: 0 0 10px 0!important;
    padding: 0!important;
    border-bottom: 1px solid #666699!important;
    border-left: 1px solid #666699!important;
    border-right: 1px solid #666699!important;
}

/* 2カラム固定レイアウト用 
#frame {
    width: 695px!important;
    margin-right: auto!important;
    margin-left: auto!important;
    padding: 0 0 15px 0!important;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
*/

/* 2カラム固定レイアウト（左サイドバー）用
#main {
    float: left;
    width: 508px!important;
    _width: 478px!important;
    margin: 0 0 10px 0!important;
    border-bottom: 1px solid #666699!important;
    border-left: 1px solid #666699!important;
}
*/

/* 2カラム固定レイアウト（右サイドバー）用
#main {
    float: left;
    width: 508px!important;
    _width: 478px!important;
    margin: 0 0 10px 0!important;
    border-bottom: 1px solid #666699!important;
    border-right: 1px solid #666699!important;
}
*/

/* 固定レイアウト用サイドバー */
#sub_a,
#sub_b {
    float: left!important;
    width: 155px!important;
}
#sub_a,
#sub_b {
    margin: 0!important;
    padding: 15px 15px 0!important;
    color: #444444;
}

/* 3カラム(リキッドレイアウト)
#main {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
#sub_a {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
#sub_b {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
*/

/* 2カラム(リキッドレイアウト：右サイドバー)
#main {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
#sub_b {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
*/

/* 2カラム(リキッドレイアウト：左サイドバー)
#main {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
#sub_a {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
*/

#subFrame:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#person ul,
#person li {
   list-style: none;
   margin: 0;
   padding: 0;
}

input,textarea {
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif;
}

.entry .theme{
    margin-bottom:10px;
    display:block;
    font-size: 10px;
}
.page {
    text-align: center;
    margin-bottom: 5px;
}

.tr_ping_URL {
    margin-bottom: 0;
}

#trackback h3 .title {
    margin-top: 15px;
}

#footer_ad ul li {
    font-size: 83.3%;
}

Posted by yujiro

« この蟹は | Main | アメーバブログスキン設定方法 »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ アメブロカスタマイズ　文字サイズ変更 from KINOKO Weblog@群馬
ブログのタイトルと記事の大きさを大きくしてみました。 CSSの部分はこんな感じにして一応効いています(笑) /*エ... [続きを読む]

Tracked on October 10, 2007 1:31 AM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）