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

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 | アメブロスキン（アメーバブログスキン）設定方法 »

アメブロスキン（アメーバブログスキン）設定方法

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

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

トラックバック

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

Tracked on October 10, 2007 1:31 AM

≫ テンプレート変更 from showryのアメーバ日記
どうも使いづらいのでブログのテンプレートを変更しました。以前からお世話になっている『小粋空間』さまのテンプレートを適応... [続きを読む]

Tracked on June 21, 2009 4:38 PM

はじめまして。アメブロのスキンを利用させていただきました。ありがとうございます。
教えていただきたく、書き込みさせていただきました。
コメントを書き込む欄を表示しますと、コメント欄が2つ表示されます。
この場合の対処方法がお分かりになりましたら是非教えてください。
また1ページに5つの記事を表示で3つ目ほどの記事の表示が崩れてしまいます。
こちらに付きましてもアドバイスいただければ幸いです。どうぞ宜しくお願いいたします。

[1] Posted by ユカチ : January 27, 2009 12:41 AM

＞ユカチさん
こんにちは。
ご返事遅くなり申し訳ありません。
スキンご利用ありがとうございます。
すいませんが不具合が発生しているページのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro

: February 4, 2009 12:30 PM

お世話になっております。
お返事をありがとうございました。
コメント欄等、不具合ではないことが理解できました。
ご迷惑をおかけいたしました。
こちらの書き込みもご判断で削除していただければと思います。
スキンは大変理想的なもので感謝しております。ありがとうございました。

[3] Posted by ユカチ : February 12, 2009 10:53 PM

＞ユカチさん
こんばんは。
ご連絡ありがとうございました。
気に入って頂けているようで、大変光栄です。
ではでは！

[4] Posted by yujiro

: February 13, 2009 12:53 AM

はじめまして。
アメブロテンプレートをご利用させていただいてます。

そこで質問なのですが、アメブロ独自の高さ１センチ
くらいの検索フォーム付きのバーとヘッダー画像の
間にある高さ２～３センチくらいの空白スペースを
ＣＳＳのどこを編集すればよいのでしょうか？

よろしくお願いします。

[5] Posted by 結斗ママ : May 2, 2009 7:18 PM

すみません。
先程の質問ですが、解決することができました。
今後ともよろしくお願いいたします。

[6] Posted by 結斗ママ : May 3, 2009 1:52 AM

＞結斗ママさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件、無事に解決したようでよかったです。
あと、勝手ながらBlogPeopleに登録させて頂きました。
ではでは！

[7] Posted by yujiro

: May 3, 2009 3:10 AM

こんにちは、初めまして。
こちらのアメブロ用のテンプレートをお借りしています。
何点か教えて頂きたい事がありまして。。。

①ブログテーマ一覧のカテゴリ名の左にある○←この丸を画像にするのは可能ですか？

②左右両サイドにある余白!?をなしにするには？

③上部のユーザー名（この場合*rikky*）などの部分を表示させないように出来ますか？

質問した内容が、サポート対象外でしたらスルーして下さい(≧≦)
よろしくお願いします。

[8] Posted by rikky : May 25, 2009 1:07 PM

＞rikkyさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、

①可能です。スタイルシートに下記のような内容を追加してください。

#theme_list .menu_frame ul {
    marging-left: 3px;
    padding-left: 3px;
}
#theme_list .menu_frame ul li {
    padding-left: 16px;
    list-style: none;
    background: url(画像ファイルのURL) no-repeat;
}

「#theme_list」は「ブログテーマ一覧」でのみ有効にするためのものです。これをはずすと、すべてのリストに対して有効になってしまうので気をつけてください。

②現状はリキッドレイアウト（左右の余白をなしにするレイアウト）に対応していません。別途動作確認し、うまくできそうであればエントリーします。

③スタイルシートに下記を追加してください。

#userNaviArea {
  display: none;
}

それではよろしくお願い致します。

[9] Posted by yujiro

: May 29, 2009 3:15 PM

初めまして。アメブロで記事を書く際、顔文字・絵文字・画像がUPできなくなりました。ステータスバーにはページにエラーが発生しました。と出ます。今は記事すらUPできない状態です。解決策があれば教えて頂けますか？PCに詳しくないのでよろしくお願いします。

[10] Posted by Bon : October 17, 2009 6:21 PM

＞Bonさん
こんばんは。
ご質問の件ですが、もしブラウザにIEをお使いであれば、Firefox など、他のブラウザを利用してみてください（解決できるかどうかは不明です）。
それではよろしくお願い致します。

[11] Posted by yujiro

: October 22, 2009 2:07 AM

小粋空間を拝見し、アメーバブログのテンプレートを使わせていただきます。まだ駆け出しのためいろいろ勉強中です。商業利用ではありません。末永くつかわせていただきます。ありがとうございます。当ブログで小粋空間のリンクを掲載いたします。これからもよろしくお願いします。

[12] Posted by tokuhain1957（虎之助） : December 1, 2011 11:43 PM

＞虎之助さん
こんにちは。
テンプレートご利用＆ご連絡ありがとうございます。
こちらこそ今後ともよろしくお願い致します。
ではでは！

[13] Posted by yujiro

: December 3, 2011 10:43 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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