Top > CMS・ブログ > アメーバブログ > テンプレート > 2007年9月
2007年9月19日

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

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

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

1.3カラム固定レイアウトの場合

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

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

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

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

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

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

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

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

2.2カラム固定レイアウト(左サイドバーまたはサイドバー)の場合

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

また、スキンをテキストエリアにペーストした後、スキンの「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 を有効にした例です。

3.注意事項

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

Comments [12] | Trackbacks [1]
2007年9月18日

アメブロ スキン(アメーバブログ スキン)

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

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

1.動作確認環境

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

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

2.利用規定

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

3.カラムレイアウト

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

  • 3カラム固定レイアウト
  • 2カラム固定レイアウト(右サイドバー)
  • 2カラム固定レイアウト(左サイドバー)

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

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

4.その他

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

5.スキン

Comments [13] | Trackbacks [2]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3