小粋空間: テンプレートアーカイブ

Top ＞アメーバブログ＞テンプレート [全て開く]

2007年9月19日

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

September 19,2007 2:17 AM
Tag：[Ameba, Template]
Permalink

当サイトの「アメーバブログスキン」をアメーバブログに設定する方法を紹介します。

１．3カラム固定レイアウトの場合

アメーバにログインした後、「アメブロ」タグをクリックし、「デザインの変更」をクリック。

表示されたスキン一覧より、「スタンダード」→「ベーシック」を選択。スキンは何を選択しても構いませんが、スキンによってはカラムレイアウトが制限されるものがあります。

ページ上部の「カラムを変更」より「３コラム-中央」を選択し、「保存」をクリック。

同じページの上部にある「スキンCSSの編集」をクリック。

テキストエリアの内容を全選択。

テキストエリアの内容をすべて削除します。

テキストエリアに、当サイトの「アメーバブログスキン」の内容をペーストして、一番下の「保存」をクリック。

これでスキンがブログに反映されます。

２．2カラム固定レイアウト（左サイドバーまたはサイドバー）の場合

手順は１項の「3カラム固定レイアウト」とほぼ同じですが、「カラムを変更」では「２コラム-右」または「２コラム-左」を選択し、「保存」をクリックしてください。

また、スキンをテキストエリアにペーストした後、スキンの「3カラム固定レイアウト用」のセレクタ（下）を削除（またはコメントアウト）します。この作業はペースト前でも構いません。

/* 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カラム固定レイアウト用のセレクタを有効にします（下の青色部分を追加て、赤色部分を削除）。

/* 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;
}
*/

#frame は左サイドバー・右サイドバー共通ですので有効にしてください。#main は左サイドバー・右サイドバーで有効にするセレクタが異なりますので、どちらか一方のみを有効にしてください。
上は左サイドバー用の #main を有効にした例です。

３．注意事項

「スキンの選択」画面で、カラムレイアウトを変更・保存すると、テキストエリアに貼り付けたスキンが、元のスキンに戻ってしまうので、スキンのバックアップは必ずとっておきましょう。

Comments [0] | Trackbacks [0]

2007年9月18日

アメーバブログスキン

September 18,2007 2:55 AM
Tag：[Ameba, Template]
Permalink

アメーバブログ用のスキンを作りました。サンプルのスクリーンショットは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%;
}

Comments [0] | Trackbacks [1]