アメブロテンプレート1500円均一!2月末まで

現在リリースしているアメブロテンプレートの販売価格が1500円均一に!
2月末までの特別価格でご購入いただけます。
この機会に是非アメブロテンプレートで素早く手軽にあなたのアメブロをリニューアルしてください。
きっと、購入価格以上の価値がココにあります。

アメブロ記事下(フッター)に定型文を表示

アメブロの記事下(フッター)に定型文を設置する方法。
アメブロの記事を書くごとに同じ定型文や画象を入れたいと思うことがあります。
例えば読者登録ボタンやペタボタンを記事のフッターに入れることでブログを見に来たユーザーにアクションを起こしてもらうことができるようになります。

準備その(1)

jqueryをフリープラグインに設定する。

/*フリープラグインの一番上に設置*/

/*フリープラグインの好きな場所に設置*/

準備その(2)

フリースペースに定型文を設定する
※改行をせずにフリースペースに記載してください。

定型文のテキスト(HTMLタグも使えます)

準備その(3)

CSSで記事下に入れたい定型文の位置を設定します。

#ArticleFooter {
margin-top:20px;/*記事下からの距離*/
text-align:center;/*定型文の位置*/
}

<サンプル>

-読者登録ボタンを定型文下(フッター)に設置する-
準備その(2)の設定を下記のように行います。
アメブロIDはあなたのIDに置き換えてください。
読者登録ボタンのURLはあなたのボタン画象のURLに置き換えてください。

是非お試しください。

背景に関するCSS構造を知る

アメブロのデザインをする上で全体の背景関連をコントロールしているのがCSSの.skinBodyというclassです。
.skinBodyは3つ用意されていて.skinBody .skinBody2 .skinBody3の3つのclassが用意されています。
この3つのclassを駆使することで3重に背景を重ねて表示することができます。

例えば

  • 全体の背景
  • コンテンツ部分の背景
  • ワンポイントで入れる背景
  • などを設定することができます。

    下記基本編集可能CSSに用意されているので設定をしてみてください。

    
    /* (3-1) ボディ(全体)
    --------------------------------------------*/
    /* skinBody ボディ */
    .skinBody{}/* ←ブログ全体に背景を敷きたいとき */
    .skinBody2{}
    .skinBody3{}
    

    例えば下記のように設定することで背景を一枚入れることができます。

    .skinBody{
    background:url(http://背景画像のURL);
    }
    

    背景をリピートさせたくない場合は

    .skinBody{
    background:url(http://背景画像のURL)no-repeat;
    }
    

    ※裏技テクニック
    用意されたclassで背景を設定する場合3重に重ねることができますが、bodyタグに背景を設定すると4重に背景を設定できます。

    基本CSS[skin.css]構造

    アメブロのCSSには編集できるユーザーごとのCSSの他に、隠れたCSSファイルが適応されています。
    その名も[skin.css
    この[skin.css]が基本のデザインを構成しています。
    このCSS自体を管理画面から直接書き換える事はできませんので、編集可能CSSファイルで
    このskin.cssを上書きしてあげることでデザインを変更することが出来るようになります。

    CSSを書き換える上でデフォルトのskin.cssを下記に記録しました。参考にしてください。

    
    @charset "utf-8";
    /*--------------------------------------------------
    skin.css
    $Id: skin.css,v 1.3 2011/08/01 09:45:10 oyama_yuichi Exp $
    --------------------------------------------------*/
    
    /*TOC===============================================
    
    カラー設定
    	A 基本カラー設定
    	B 記事/メッセージ カラー設定
    	C サイドバー カラー設定
    	D 枠の外の配色
    ボタンのスタイル
    ブロックごとのスタイル
    
    ==================================================*/
    
    /*==============================================
    
     カラー設定
    
    ==============================================*/
    
    /* 【A 基本カラー設定】
    ============================================*/
    
    /* テキスト色
    --------------------------------------------*/
    
    /* 地色テキスト */
    .skinTextColor,
    .skinBaseTextColor,
    .skinBlock,
    body{
    color:#333;			/* 【CSS規則】colorのみ指定可能 */
    }
    
    /* リンク色(基本) */
    .skinAnchorColor,
    .skinBaseAnchorColor,
    .skinBlock a,
    a{
    color:#06c;			/* 【CSS規則】colorのみ指定可能 */
    }
    
    /* リンク色(visited) */
    .skinAnchorVisitedColor,
    .skinBaseAnchorVisitedColor,
    .skinBlock a:visited,
    a:visited{
    color:#969;			/* 【CSS規則】colorのみ指定可能 */
    }
    
    /* リンク色(hover) */
    .skinAnchorHoverColor,
    .skinBaseAnchorHoverColor,
    .skinBlock a:focus,
    .skinBlock a:hover,
    a:focus,
    a:hover{
    color:#f36;			/* 【CSS規則】colorのみ指定可能 */
    }
    
    /* 淡 テキスト色 */
    .skinWeakColor,
    .skinBaseWeakColor{
    color:#999;			/* 【CSS規則】colorのみ指定可能 */
    }
    
    /* 強調 テキスト色 */
    .skinStrongColor,
    .skinBaseStrongColor{
    color:#f39;			/* 【CSS規則】colorのみ指定可能 */
    }
    
    /* 背景色
    --------------------------------------------*/
    /* 背景色 */
    .skinBgColor,
    .skinBaseBgColor,
    .skinBlock{
    background-color:#fff;		/* 【CSS規則】background-colorのみ指定可能 */
    }
    
    /* 淡 背景色 */
    .skinWeakBgColor,
    .skinBaseWeakBgColor{
    background-color:#f7f7f7;	/* 【CSS規則】background-colorのみ指定可能 */
    }
    
    /* 強調 背景色 */
    .skinStrongBgColor,
    .skinBaseStrongBgColor{
    background-color:#f7f7f7;	/* 【CSS規則】background-colorのみ指定可能 */
    }
    
    /* 枠線色(一覧ページの枠線色など)
    --------------------------------------------*/
    .skinBorderColor,
    .skinBaseBorderColor,
    .skinBlock{
    border-color:#ddd;		/* 【CSS規則】border-colorのみ指定可能 */
    }
    
    /* リスト境界線色(メインカラム一覧ページのリストなど ※サイドバー内のリスト境界線色は別)
    --------------------------------------------*/
    .skinBorderHr,
    .skinBorderList li{
    border-color:#b3b3b3;	/* 【CSS規則】border-colorのみ指定可能 */
    }
    
    /* 【B 記事/メッセージ カラー設定】
    ============================================*/
    /*
     *
     * ※基本カラー設定と配色を変える箇所のみ指定
     * ※テキストの色のみ
     *
     */
    
    /*
    .skinMainArea,
    .skinMainArea .skinTextColor,
    .skinArticleTextColor,
    .skinArticleBlock{}
    
    .skinMainArea .skinAnchorColor,
    .skinArticleAnchorColor,
    .skinMainArea a,
    .skinArticleBlock a{}
    
    .skinMainArea .skinAnchorVisitedColor,
    .skinArticleAnchorVisitedColor,
    .skinMainArea a:visited,
    .skinArticleBlock a:visited{}
    
    .skinMainArea .skinAnchorHoverColor,
    .skinArticleAnchorHoverColor,
    .skinMainArea a:focus,
    .skinMainArea a:hover,
    .skinArticleBlock a:focus,
    .skinArticleBlock a:hover{}
    
    .skinMainArea .skinWeakColor,
    .skinArticleWeakColor{}
    
    .skinMainArea .skinStrongColor,
    .skinArticleStrongColor{}
    */
    
    /* 【C サイドバー カラー設定】
    ============================================*/
    /*
     *
     * ※基本カラー設定と配色を変える箇所のみ指定
     * ※テキストの色のみ
     *
     */
    
    /*
    .skinSubArea,
    .skinSubArea .skinTextColor,
    .skinSubTextColor,
    .skinSubBlock{}
    
    .skinSubArea a,
    .skinSubArea .skinAnchorColor,
    .skinSubAnchorColor,
    .skinSubBlock a{}
    
    .skinSubArea a:visited,
    .skinSubArea .skinAnchorVisitedColor,
    .skinSubAnchorVisitedColor,
    .skinSubBlock a:visited{}
    
    .skinSubArea a:focus,
    .skinSubArea a:hover,
    .skinSubArea .skinAnchorHoverColor,
    .skinSubAnchorHoverColor,
    .skinSubBlock a:focus,
    .skinSubBlock a:hover{}
    
    .skinSubArea .skinWeakColor,
    .skinSubWeakColor{}
    
    .skinSubArea .skinStrongColor,
    .skinSubStrongColor{}
    */
    
    /* 【D 枠の外の配色 】
    ============================================*/
    /*
     *
     * 記事やサイドが枠で囲われているデザインで、
     * 枠の外の文字の可読性が低い場合に文字の色か、文字の背景を指定する
     *
    
    .skinFieldBlock a,
    .skinFieldBlock a:visited,
    .skinFieldBlock a:focus,
    .skinFieldBlock a:hover,
    .skinFieldBlock {}
    
     */
    
    /*==============================================
    
     ボタンのスタイル
    
    ==============================================*/
    
    /* skinImgBtn 読者になるなどのボタン
    --------------------------------------------*/
    
    /* skinImgBtnM (180px) */
    .skinImgBtnM{
    background-image:url(../img/skin_btn_m.png);
    }
    .skinImgBtnM:hover span,
    .skinImgBtnM:focus span,
    .skinImgBtnM span{
    color:#333;
    }
    
    /* skinImgBtnS (128px) */
    .skinImgBtnS{
    background-image:url(../img/skin_btn_s.png);
    }
    .skinImgBtnS:hover span,
    .skinImgBtnS:focus span,
    .skinImgBtnS span{
    background-image:url(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png);/* アイコン画像を指定 */
    color:#333;
    }
    /*
    ボタンのアイコン画像
    
    menu_icons_pastel.png
    menu_icons_gray.png
    menu_icons_black.png
    menu_icons_white.png
    */
    
    /* skinSimpleBtn ページングの次へ、前へボタン
    --------------------------------------------*/
    
    .skinSimpleBtn,
    .skinSimpleBtn:visited,
    .skinSimpleBtn:hover,
    .skinSimpleBtn:focus{
    border:1px solid #ddd;
    background:#fff;
    color:#06c;
    }
    .skinSimpleBtn:hover,
    .skinSimpleBtn:focus{
    background:#f7f7f7;
    }
    
    /*==============================================
    
     ブロックごとのスタイル
    
    ==============================================*/
    
    /* ボディ 【CSS規則】bodyタグ自体にはスタイルをあてない
    --------------------------------------------*/
    
    /* skinBody bodyの代わり */
    .skinBody{/* 【簡単カスタム対象】 */
    }
    .skinBody2{}
    .skinBody3{}
    
    /* skinFrame 横幅を指定したいときなどに使うフレーム */
    .skinFrame{}
    
    /* ヘッダー
    --------------------------------------------*/
    
    /*
     * .headerBnrArea 広告が出力されるエリア
     * 広告が出力されないときも、高さを維持したい時に使う
     *
     */
    .headerBnrArea{
    /* 注 blog.cssにpadding-bottom:15px;記述有り */
    padding-bottom:15px;
    }
    
    /* skinHeaderFrame 広告もブログタイトルも囲う横幅のないヘッダーフレーム */
    .skinHeaderFrame{}
    
    /* skinHeaderArea ブログヘッダー */
    .skinHeaderArea{/*【簡単カスタム対象】*/
    /* 注 blog.cssにwidth:980px;の記述有り */
    /* 【簡単カスタム対象】注 margin,paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
    }
    .skinHeaderArea2{
    /* 【簡単カスタム対象】注 margin,paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
    }
    
    /* skinBlogHeadingGroupArea 【簡単カスタム対象】*/
    .skinBlogHeadingGroupArea{
    /* 【簡単カスタム対象】ブログタイトルと説明のpaddingのみ指定可能 */
    padding: 20px 0 30px;
    }
    
    /* skinTitleArea ブログタイトルのブロック */
    .skinTitleArea{/*【簡単カスタム対象】*/
    padding-bottom:4px;
    }
    
    /* skinTitle ブログタイトル文字 */
    .skinTitle,
    .skinTitle:visited,
    .skinTitle:hover,
    .skinTitle:focus{
    color:#000;
    font-weight:bold;
    font-size:2.11em;
    }
    
    /* skinDescription ブログの説明ブロック */
    .skinDescriptionArea{/*【簡単カスタム対象】*/
    }
    
    /* skinDescription ブログの説明文字 */
    .skinDescription{
    color:#333;
    }
    
    /* コンテンツエリア
    --------------------------------------------*/
    
    /* skinContentsFrame コンテンツを囲う横幅の無いフレーム */
    .skinContentsFrame{}
    
    /* skinContentsArea コンテンツ980pxブロック */
    .skinContentsArea{
    /* 注 blog.cssにwidth:980px;の記述有り */
    }
    
    /* メインエリア
    --------------------------------------------*/
    
    .skinMainArea{}
    
    /* メッセージボード
    --------------------------------------------*/
    
    .skinMessageBoard{
    /* 注 blog.cssに margin-bottom の記述有り */
    border-top:1px dotted #979797;
    border-bottom:1px dotted #979797;
    background:#fff;
    }
    .skinMessageBoard2{}
    .skinMessageBoard3{
    padding:16px 30px;
    }
    
    /* カラム別の記述
    .columnA .skinMessageBoard,
    .columnB .skinMessageBoard{}
    
    .columnC .skinMessageBoard,
    .columnD .skinMessageBoard,
    .columnE .skinMessageBoard{}
    */
    
    /* 記事
    --------------------------------------------*/
    
    /* skinArticle 記事ブロック */
    .skinArticle{
    /* 注 blog.cssに margin-bottom の記述有り */
    padding:16px 0;
    border:1px solid #ddd;
    background:#fff;
    }
    .skinArticle2{}
    .skinArticle3{}
    
    /* カラム別の記述
    .columnA .skinArticle,
    .columnB .skinArticle{}
    
    .columnC .skinArticle,
    .columnD .skinArticle,
    .columnE .skinArticle{}
    */
    
    /* skinArticleHeader 記事ヘッダーブロック */
    .skinArticleHeader{
    margin:0 29px;
    padding:2px 10px;
    border-left:5px solid #e4e4e4;
    }
    .skinArticleHeader2{}
    
    /* skinArticleTitle 記事ヘッダー文字 */
    .skinArticleTitle,
    .skinArticleTitle:hover,
    .skinArticleTitle:focus,
    .skinArticleTitle:visited{
    font-size:1.31em;
    font-weight:bold;
    color:#06c;
    }
    
    /* skinArticleBody 記事本文ブロック */
    /*
     * 【デザイン規則】記事の中身の横幅は 2カラム 605px、3カラム 410pxになるように
     */
    .skinArticleBody{}
    .skinArticleBody2{
    margin:0 29px;
    }
    
    /* skinArticleFooter 記事フッターブロック */
    .skinArticleFooter{
    margin:10px 29px 0;
    border-top:1px dotted #949494;
    }
    
    /* サイドエリア
    --------------------------------------------*/
    
    .skinSubArea {}/* 共通 */
    .skinSubA{}/* (300px) */
    .skinSubB{}/* (180px) */
    
    /* サイド メニュー
    --------------------------------------------*/
    
    /* skinMenu サイドメニューのブロック */
    .skinMenu{
    /* 注 blog.cssに margin-bottom の記述有り */
    margin-bottom:10px;
    background:#f7f7f7;
    }
    .skinMenu2{}
    
    /* subA subB別の記述
    .skinSubA .skinMenu{}
    .skinSubB .skinMenu{}
    */
    
    /* skinMenuHeader サイドメニューヘッダー */
    .skinMenuHeader{
    padding:5px 10px;
    background:#e4e4e4;
    }
    
    /* skinMenuTitle サイドメニュータイトル文字 */
    .skinMenuTitle{}
    
    /* skinMenuBody サイドメニュー本文ブロック */
    /*
     * 【デザイン規則】サイドバーの中身の横幅は subA 260px、subB 140px
     */
    .skinMenuBody{
    margin:10px;
    padding:10px;
    background:#fff;
    }
    
    /* サイドバーのリスト、境界線
    --------------------------------------------*/
    /*
     * 【CSS規則】
     * ・要素の下に表示すること
     * ・境界線が持つ余白(margin-bottom, padding-bottom)も設定すること
     *
     */
    .skinSubHr,
    .skinSubList li{
    margin-bottom:3px;
    padding-bottom:3px;
    border-bottom:1px dotted #b3b3b3;
    }
    
    /* skinSubA skinSubBで違う場合
    .skinSubA .skinSubHr,
    .skinSubA .skinSubList li{}
    
    .skinSubB .skinSubHr,
    .skinSubB .skinSubList li{}
    */
    

    アメブロCSSタイトルを消す

    ブログのタイトルは通常テキストで出ていますが、これをデザイン的に消したいという方のために簡単にCSSで消すことができます。

    下記のソースをCSSに追加で貼りつけします。

    /* ブログタイトルを消す */
    .skinTitle{
    display:none;
    }
    /* ブログ説明を消す */
    .skinDescription{
    display:none;
    }
    

    ワンポイント!
    追加する箇所はどこでもCSS内であればOKですがわかりやすくするためには下記の箇所が良いでしょう。

    /* (3-2) ブログヘッダー
    --------------------------------------------*/
    

    ブログタイトルを消すとトップにもどるリンクがなくなりますのでご注意ください。

    ブログヘッダー画像を設置

    ブログのヘッダーに画象を設置したい場合は下記のやり方がスタンダードです。
    .skinHeaderAreaというCSSを使い調整します。

    CSSで下記の箇所を見つけてください。

    /* skinHeaderArea ブログヘッダー980pxエリア */
    .skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
    

    下記のように書き換えてみます。
    幅と高さの数字はあなたの画像サイズに合わせて変更してください。

    .skinHeaderArea {
    width: 1100px;/* ←変更したい画象の幅を入れる */
    height: 450px;/* ←変更したい画象の高さを入れる */
    background: url(http://画象URLをココに入れる)no-repeat;
    }
    

    これでヘッダー画象が設置されました!