fc2共有テンプレートeyecatcherのカスタム用CSS(コピペ→値の調整だけ)

fc2共有テンプレート eyecatcher シリーズのCSSを載せています。カスタムしたい部分のCSSコードを、fc2blog管理画面のCSS編集にコピペし値を調整するだけです。

はじめに

概要

  1. fc2blog管理画面のCSS編集には、CSSコードがありません。別の外部CSSファイルを読み込み、スタイルを適用しています。

  2. カスタムしたい場合にこのページのコードをコピペで追加します。

  3. テンプレートの手動アップデート作業効率化の考え方に基づいています。

メリット

  1. CSSを自分で1から記述する必要はありません。このページに記載しているCSSコードをコピペし、値を調整するだけです。

  2. 通常であれば、時間が経過するとCSSのどの部分をカスタムしたのか忘れてしまいます。しかし、デフォルトではCSS編集内にコードがないのですから、CSS編集にあるコード=自分でカスタムした部分、と一目瞭然で便利です。

  3. デフォルトのCSSコードに不適切な部分があった場合、作者が外部CSSファイルを改訂するだけで済みます。テンプレート利用者さんが改訂部分を手動で変更する作業をかなり省けます。

  4. テンプレート作者はテンプレート自体を時々改訂します。改訂したテンプレートに切り替える場合、今までに追加したCSSコードをそのまま改定したテンプレートに適用できます。ただし、CSS部分の改訂が多いと改訂前後でクラス名などに相違が生じ、必ずしも対応しきれるわけではありません。

3カラムと2カラム

  1. このページではeyecatcher(3カラム)、eyecatcher-2c(2カラム)、dt18_eyecatcher(2カラム)のコードを載せています。

  2. 3カラム用コードにはブルー2カラム用コードにはピンクの枠線で囲っています。3カラムと2カラム共通のコードには枠線はありません。

カスタムのニーズが高い部分

  1. 各固定表示スペースの表示・非表示切り替え

    #sticky            {display:block;} /*HOMEページ上部*/
    #each-category     {display:block;} /*カテゴリーページ別上部*/
    .each-entry-bottom {display:block;} /*各記事内下部*/
    #each-page-bottom  {display:block;} /*各ページ下部*/
    
    /*
    ※ block を none に変更すれば非表示にできます。
    ※ none から block に戻すとまた表示されます。↓コピペ用です。
    ※ http://customtemplate.blog112.fc2.com/blog-entry-41.html
    ※
    ※ 非表示ではなく削除する場合は、HTML編集でそれぞれの部分を直接削除します。
    ※ 初心者の方で固定表示スペースが不要な場合は、とりあえず none に変更して非表示にしておき
    ※ 慣れてきた頃にHTMLの該当部分を削除すればいいかと思います。
    */
  2. 基準となる文字

    body{
    color:       #222;   /*色*/
    font-size:   14px;   /*サイズ*/
    line-height:  1.4;   /*1行の高さ*/
    }
    /*
    ※ font-size:14px、line-height:2の場合で例示します。
    ※ 行の高さは14pxの2倍の28pxになります。
    ※ 行の高さ28pxから文字サイズ14pxを引くと、余白(行間)は14pxになります。
    ※ 14pxの余白を文字の上下で振り分けます。
    ※ 1行につき、文字の上下でそれぞれ7pxの行間ができます。
    */
  3. ハイパーリンク → 参考:記事内ハイパーリンクの文字色,背景色,下線,太さの装飾をCSSで設定

    a:link   {color:#03c; text-decoration:none;}   /*未訪問*/
    a:visited{color:#03c; text-decoration:none;}   /*閲覧済み*/
    a:hover  {color:#f03; text-decoration:none;}   /*カーソルをのせた時*/
    a:active {color:#f03; text-decoration:none;background:#ff3;}/*クリックした瞬間など*/
    
    /*
    ※ colorで色を定義します。「カラーコード」で検索してみてください。
    ※ text-decorationで下線などを定義します。
    */
  4. /*横幅*/

    #page               {width:1234px;}/*ページ全体*/
     #container         {width:947px;} /*記事とサイドバー(左)を内包するディレクトリ*/
      #content          {width:660px;} /*記事*/
      #sidebar,#tbox,
        #tbox-boxes div {width:273px;} /*サイドバー(左)とタブボックス*/
        #tbox-tabs li   {width:38px;}  /*タブボックスのタブ*/
     #sidebar2,#tbox2   {width:273px;} /*サイドバー2(右)*/
    /*
    ※【全体】
    ※ #page ≧ #container + #sidebar2(右) + 10px程度。
    ※ #container ≧ #content + #sidebar(左) + 10px程度。
    ※ それぞれにpadding,margin,borderなどを定義したら
    ※ その分widthを減らしましょう。「カラム落ち」を防げます。
    ※
    ※ #headerや#footerなどは横幅を定義していません。
    ※ 上位ディレクトリである#pageの横幅に依存します。
    ※
    ※【タブボックスとタブ】
    ※ 「サイドバーとタブボックス」のwidthを273px未満にすると、
    ※ タブが2行になります。
    ※ タブ数やタブの横幅の調整で対処できます。
    ※
    ※ {タブ(38px) + 右マージン(1px)} × タブ個数(7) = タブボックスの幅(273px)
    ※ 上記がデフォルト設定です。
    ※
    ※ 「サイドバーとタブボックス」のwidthを250pxにする場合を例示します。
    ※    250px ÷ タブ7こ = 35px 余り5px
    ※ 35pxの内1pxは右マージンなのでタブを34pxにすると2行にならないです。
    ※
    ※ タブボックス自体不要なら、同じ作者の別のテンプレートの方が
    ※ カスタムしやすいです。
    ※ http://customtemplate.blog112.fc2.com/blog-entry-9.html
    */
    #page              {width:958px;}/*ページ全体*/
     #content          {width:660px;}/*記事*/
     #sidebar,
      #tbox,
       #tbox-boxes div {width:273px;}/*サイドバーとタブボックス*/
       #tbox-tabs li   {width:38px;} /*タブボックスのタブ*/
    
    /*
    ※【全体】
    ※ #page ≧ #content + #sidebar + 10px程度。
    ※
    ※ それぞれにpadding,margin,borderなどを定義したら
    ※ その分widthを減らしましょう。「カラム落ち」を防げます。
    ※
    ※ #headerや#footerなどは横幅を定義していません。
    ※ 上位ディレクトリである#pageの横幅に依存します。
    ※
    ※【タブボックスとタブ】
    ※ 「サイドバーとタブボックス」のwidthを273px未満にすると、
    ※ タブが2行になります。
    ※ タブ数やタブの横幅の調整で対処できます。
    ※
    ※ {タブ(38px) + 右マージン(1px)} × タブ個数(7) = タブボックスの幅(273px)
    ※ 上記がデフォルト設定です。
    ※
    ※ 「サイドバーとタブボックス」のwidthを250pxにする場合を例示します。
    ※    250px ÷ タブ7こ = 35px 余り5px
    ※ 35pxの内1pxは右マージンなのでタブを34pxにすると2行にならないです。
    ※
    ※ タブボックス自体不要なら、同じ作者の別のテンプレートの方が
    ※ カスタムしやすいです。
    ※ http://customtemplate.blog112.fc2.com/blog-entry-9.html
    */
  5. 背景色

    body         {background:transparent;}   /*全体(ページ全体+ページ外の余白部分)*/
     #page       {background:transparent;}   /*ページ全体*/
      #header    {background:transparent;}   /*ページ上部*/
      #container {background:transparent;}   /*記事(#content)とサイドバー(左)を内包するディレクトリ*/
       #content  {background:transparent;}   /*記事部分全体*/
        .entry   {background:transparent;}   /*個別の記事部分*/
        #tertiary{background:transparent;}   /*プラグインカテゴリ3*/
       #sidebar  {background:transparent;}   /*サイドバー(左)*/
        #primary {background:transparent;}   /*プラグインカテゴリ1*/
      #sidebar2  {background:transparent;}   /*サイドバー2(右)*/
       #secondary{background:transparent;}   /*プラグインカテゴリ2*/
      #footer    {background:#eee;}          /*ページ下部*/
    
    /*
    ※ 上記デフォルト設定では、フッターを除き背景色はすべて透明(transparent)です。
    ※ グローバルナビゲーション、サイドバーの背後の背景色は下で定義しています。
    ※ 背景色を個別に変更する場合、padding,margin,borderなどを定義して
    ※ 各部分間の境界あたりが自然な感じになるように調整した方がいいでしょう。
    ※ http://customtemplate.blog112.fc2.com/blog-entry-11.html
    */
    body         {background:transparent;}   /*全体(ページ全体+ページ外の余白部分)*/
     #page       {background:transparent;}   /*ページ全体*/
      #header    {background:transparent;}   /*ページ上部*/
      #content   {background:transparent;}   /*記事部分全体*/
       .entry    {background:transparent;}   /*個別の記事部分*/
       #tertiary {background:transparent;}   /*プラグインカテゴリ3*/
      #sidebar   {background:transparent;}   /*サイドバー*/
       #primary  {background:transparent;}   /*プラグインカテゴリ1*/
       #secondary{background:transparent;}   /*プラグインカテゴリ2*/
      #footer    {background:#eee;}          /*ページ下部*/
    
    
    /*
    ※ 上記デフォルト設定では、フッターを除き背景色はすべて透明(transparent)です。
    ※ グローバルナビゲーション、サイドバーの背後の背景色は下で定義しています。
    ※ 背景色を個別に変更する場合、padding,margin,borderなどを定義して
    ※ 各部分間の境界あたりが自然な感じになるように調整した方がいいでしょう。
    ※ http://customtemplate.blog112.fc2.com/blog-entry-11.html
    */
  6. 背景画像

    body{
    background-image:url(http://blog-imgs-44.fc2.com/c/u/s/customtemplate/ec-pawprints.png);
    background-attachment:fixed;
    }
  7. 重なりなど

    #header,#nav,#container,#content,#sidebar,#primary,#sidebar2,#secondary,#footer{position:relative;}
    #page{z-index:10;}
    #header{z-index:100;}
    #content,#footer{z-index:90;}
    #primary,#secondary{z-index:80;}
    #sidebar,#sidebar2{z-index:50;}
    
    /*
    ※ この「重なりなど」はカスタムに不慣れな間は触らない方がいいでしょう。
    */
    #header,#nav,#content,#footer,#sidebar,#primary,#secondary{position:relative;}
    #page{z-index:10;}
    #header{z-index:100;}
    #content,#footer{z-index:90;}
    #primary,#secondary{z-index:80;}
    #sidebar{z-index:50;}
    
    /*
    ※ この「重なりなど」はカスタムに不慣れな間は触らない方がいいでしょう。
    */

テンプレートの構造(根幹)

全体

  1. ページ全体 + ページ外の余白部分

    body{font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS P Gothic",sans-serif;margin:0 auto;text-align:center;}
    
  2. ページ全体

    #page{text-align:left;margin:0 auto;}

ヘッダー

  1. ヘッダー自体

    #header{font-size:85%;}
    #site-title{font-size:150%;}
    #site-title a{display:block;width:99%;height:25px;background:center center url(http://blog-imgs-49.fc2.com/e/y/e/eyecatcher/121004eyecatch.jpg);background-size:cover;text-align:right;padding:275px 1% 0 0;text-shadow:1px 0 0 #ccc,-1px 0 0 #ccc,0 1px 0 #ccc,0 -1px 0 #ccc,1px 1px 0 #ccc,1px -1px 0 #ccc,-1px 1px 0 #ccc,-1px -1px 0 #ccc;letter-spacing:.5em;}
    #site-description{text-align:center;background:#fafafa;margin:14px auto;padding:3px 0;}
    
  2. ヘッダー > カルーセル構造

    #crs-wr{position:relative;margin:14px auto;height:135px;background:#efefef;border-radius:10px;}
    #crs{position:relative;width:100%;height:100%;overflow:hidden;}
    #crs-prev,#crs-next{position:absolute;top:0;width:25px;cursor:pointer;color:#03f;background:transparent;font-size:35px;line-height:135px;text-align:center;border-radius:10px;transition:background .5s;}
    #crs-prev{left:-25px;}
    #crs-next{right:-25px;}
    #crs-prev:hover,#crs-next:hover{color:#f33;background:#ffc;}
    #crs-wr .disable{color:#ccc;cursor:default;background:transparent;}
    
  3. ヘッダー > カルーセル > 最新記事各々

    #crs-ul{height:135px;overflow:hidden}
    #crs-ul li{float:left;list-style:none;width:100px;height:135px;overflow:hidden;transition:background .5s;}
    #crs-ul li:hover{background:#ffc;outline:1px dashed #3cc;}
    #crs-ul a{display:block;height:100%;border-radius:5px 5px 0 0;}
    
  4. ヘッダー > カルーセル > 表示数

    .side300 #crs-wr{width:1200px;}
    #crs-wr,.side250 #crs-wr,.side300.crs11 #crs-wr{width:1100px;}
    .side200 #crs-wr,.crs10 #crs-wr{width:1000px;}
    .crs3 #crs-wr{width:300px;}
    .crs4 #crs-wr{width:400px;}
    .crs5 #crs-wr{width:500px;}
    .crs6 #crs-wr{width:600px;}
    .crs7 #crs-wr{width:700px;}
    .crs8 #crs-wr{width:800px;}
    .crs9 #crs-wr{width:900px;}
    
  5. ヘッダー > グローバルナビゲーション

    #nav-wrapper,#nav-wrapper2{min-height:24px;}
    #nav{background:#fafafa;width:100%;float:left;list-style-type:none;font-size:12px;}
    #nav li{width:136px;float:left;background:#eee;margin:0 0 0 1px;position:relative;list-style-type:none;text-align:center;}
    .nav-auto #nav li{width:auto;padding:0 5px;}
    #nav li:first-child,#nav li li{margin-left:0;}/*ie6/7*/
    .maru #nav>li:first-child{border-radius:10px 0 0 10px;}
    .maru #nav>li:last-child{border-radius:0 10px 10px 0;}
    .kake #nav>li:first-child{border-radius:4px 0 0 4px;}
    .kake #nav>li:last-child{border-radius:0 4px 4px 0;}
    #nav li:hover{background:#ffc;}
    #nav a{display:block;line-height:2;padding:0 1px;
    text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,1px 1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,-1px -1px 0 #fff;
    }
    #nav ul{box-shadow:1px 3px 3px #666;display:none;position:absolute;top:2em;left:0;float:left;width:180px;z-index:99999;}
    #nav ul li{min-width:180px;text-align:left;border-top:1px dotted #777;}
    #nav ul li:first-child{border-top:0;}
    #nav ul ul{left:100%;top:0;}
    #nav ul a{line-height:1em;padding:10px;width:160px;height:auto;}
    #nav li:hover>ul{display:block;}/*ie6は別のcssファイルで対応*/
    /*
    ※ グローバルナビゲーションでの、現在ページへのリンクの背景色は、
    ※ HTML内で定義しています(fc2の変数はHTML内で有効になるため)。
    */
    
  6. ヘッダー > グローバルナビゲーション > 自動更新項目

    .recent-summary{clear:right;padding:10px;}
    .recent-meta{color:#888;font-size:85%;margin:0 0 5px;}
    .recent-meta dt,.recent-meta dd{display:inline;font-weight:400;margin:0;padding-right:.3em;}
    .recent-meta dt:after{content:"\3A";padding-left:.3em;}
    .recent-meta dt:after{content:"\3A";padding-left:.3em;}
    #nav-recent ul a{padding:5px 10px;}
    #nav .recent-meta a{display:inline;padding:0;}
    .recent-opening{border-top:1px dotted #999;padding-top:5px;}
    .recent-opening:before,.recent-opening:after{color:#999;content:" ...以下省略されました";font-size:85%;}
    .recent-opening:before{content:"本文冒頭: ";display:block;}
    #nav-tag li{padding:5px 0;}
    #nav #nav-tag a{display:inline;padding:2px;width:auto;}
    

記事

  1. 記事自体

    #container{clear:left;float:left;}
    .right #container{float:right;}
    #content{padding-top:14px;float:right;}
    .left #content{float:left;}
    
    #content{clear:left;padding-top:14px;float:right;}
    .left #content{float:left;}
  2. HOMEページの固定表示部分

    #sticky{padding:10px;margin-bottom:2em;background:#f2f7fc;box-shadow:3px 3px 5px #777;}
    #sticky p,#sticky ul,#sticky ol,#sticky table{margin:0 0 1.5em;}
    #sticky li{margin-left:1.5em;}
    
  3. カテゴリーページごとの固定表示部分を「一括」定義

    .categories{padding:10px;margin-bottom:1em;background:#f2f7fc;box-shadow:3px 3px 5px #777;}
    .categories p,.categories ul,.categories ol,.categories table{margin:0 0 1.5em;}
    .categories li{margin-left:1.5em;}
    
  4. カテゴリーページごとの固定表示部分を「個別」定義

    #each-category .category-0{background:#9fc;}
    #each-category .category-1{background:#ffc;}
    #each-category .category-2{background:#fcf;}
    /*
    ※ カテゴリーページ3以降も上記コードをコピペで増やし編集することで対応可能です。
    ※ 上記「一括」で定義した方よりも、この「個別」で定義した方が優先されます。
    ※ 個別設定する必要がない場合は、6行上の行から4行上の行まで丸ごと削除します。
    */
    
  5. 各記事を囲っている枠線

    .entry,#sticky,#single .entry:hover{
    border:1px dashed #ddd;
    padding:9px;
    margin:0 0 1em;
    box-shadow:none;
    }
    .entry-hover .entry:hover,.entry-hover #sticky:hover{border:3px dashed #ccc;padding:7px;box-shadow:3px 3px 5px #777;}/*ie6非対応*/
    
  6. パンくずリスト

    #breadcrumbs{padding:5px;background:#fafafa;margin:0 0 1em;}
    .arrow{padding:0 .7em;font-size:85%;color:#888;}
    
  7. タイトル(大見出し)

    #content h1 a{color:#222;cursor:default;}
    #content .entry-title{font-size:180%;margin-bottom:.5em;border:0;text-shadow:2px 2px 5px #777;}
    
  8. 現在日時を基準に○○時間前など表示する部分

    .m-ago,.h-ago,.d-ago{color:red;text-shadow:1px 0 0 #ff0,-1px 0 0 #ff0,0 1px 0 #ff0,0 -1px 0 #ff0,1px 1px 0 #ff0,1px -1px 0 #ff0,-1px 1px 0 #ff0,-1px -1px 0 #ff0;}
    .m-ago,.h-ago{font-weight:700;}
    .how-long-ago{color:#888;}
    .m-ago2,.h-ago2,.d-ago2{color:#888;font-size:70%;}
    .no-some-time-ago .some-time-ago{display:none;}
    
  9. 公開日

    .entry-date,.modified-date{color:#888;font-size:85%;}
    .entry-date :nth-child(3){border-left:1px dotted #aaa;margin-left:.2em;padding-left:.5em;}
    .entry-date dt,.modified-date dt,.entry-date dd,.modified-date dd{display:inline;font-weight:400;margin:0;padding-right:.3em;}
    .entry-date dt:after,.modified-date dt:after{content:"\3A";padding-left:.3em;}
    .no-entry-time .entry-time{display:none;}
    
  10. 各要素

    .entry-content{font-size:1em;}/*記事本文の文字サイズ*/
    .entry-content h2,.entry-content h3,.entry-content h4{margin:1.2em 0;}
    .entry-content h2{font-size:150%;border-bottom:1px solid #aaa;}
    .entry-content h3{font-size:120%;border-bottom:1px dashed #aaa;}
    .entry-content h4{font-size:110%;border-bottom:1px dotted #aaa;}
    .entry-content p,.entry-content ul,.entry-content ol,.entry-content table{margin:0 0 1.5em;}
    .entry-content li{margin-left:3em;}
    .entry-content dl{margin:0 0 1em 1em;}
    .entry-content dt{font-size:110%;}
    .entry-content dd{margin-left:1em;}
    .entry-content pre{background:#f7f7f7;color:#222;padding:.5em;}
    .entry-content code{font-size:90%;}
    .target-blank .entry-content a[target="_blank"]:after,
    .target-blank #sticky a[target="_blank"]:after{content:"\21D7";padding:0 .3em;}
    .target-blank .entry-content .no-target-blank[target="_blank"]:after,
    .target-blank #sticky .no-target-blank[target="_blank"]:after,
    .target-blank .entry-content .no-target-blank a[target="_blank"]:after,
    .target-blank #sticky .no-target-blank a[target="_blank"]:after{content:"";padding:0;}
    .img-outline .entry-content img{outline:3px dotted #ddd;}
    .img-outline .entry-content .no-outline,
    .img-outline .entry-content .no-outline img{outline:0;}
    
  11. table > .odd,.colなど

    .entry-content tr:hover{outline:1px double #3cc;}
    .entry-content th,.entry-content td{border:1px solid #ccc;padding:3px;}
    .entry-content th,.col td:nth-child(1){background:#eee;text-shadow:1px 1px 1px #fff;}
    .odd tr:nth-child(odd){background:rgba(0,0,0,0.03);}
    /*
    ※ table自体はこのCSS下部「デフォルト設定」で定義しています。
    */
    
  12. 「続きを読む」

    .more-link{font-size:120%;display:block;margin-left:1em;}
    .more-link:hover{background:#ffc;}
    .more-link:before{content:"\261B";color:#222;margin-left:-1em;padding-right:.5em;}
    /*
    
    ※ 指マークを変更する場合は次の記事が役立ちます。
    ※ http://customtemplate.blog112.fc2.com/blog-entry-47.html
    */
    

関連記事リストアイキャッチ

  1. 関連記事リストアイキャッチ表示設定

    dl.relate,.relate dd{margin-left:0;}
    .relate ul{margin-bottom:0;}
    .relate li{list-style:none;margin-left:0;width:100px;}
    .relate-entry{display:inline-block;padding:3px;transition:background 0.5s;}/*ie6/7*/
    .relate-entry:hover{background:#ffc;outline:1px dashed #3cc;}
    .relate-entry-now{background:#dff;}
    .gray .relate-entry-now{background:#eee;}
    .relate-entry-lists li{overflow:hidden;}
    .relate-entry-title,.relate-entry-title a{line-height:1.1;height:85px;}
    .relate-entry-title a{display:block;}
    .relate-entry-date{text-align:center;border-top:1px dotted #ccc;height:14px;}
    
  2. 関連記事リストアイキャッチ横長設定

    .kanren-yoko .relate-entry{width:200px;padding:6px;}/*ie6*/
    .kanren-yoko .relate-entry-title,.kanren-yoko .relate-entry-date{float:right;}
    .kanren-yoko .relate-entry-img{float:left;}/*拍手・ソーシャルボタン周囲の枠線非表示設定*/
    .fc2_footer img,.fc2_socialbtn,.fc2_socialbtn td,.fc2_socialbtn tr:hover{border:0;outline:0;}
    
  3. アイキャッチ用画像がない場合の画像

    .ec-ng,.ec-ns{background:url(http://blog-imgs-44.fc2.com/c/u/s/customtemplate/no-image.png);background-size:cover;}
    

記事下部

  1. 拍手・ソーシャルボタン周囲の枠線非表示設定

    .fc2_footer img,.fc2_socialbtn,.fc2_socialbtn td,.fc2_socialbtn tr:hover{border:0;outline:0;}
    
  2. 記事が属するカテゴリーやタグなどの表示

    .entry-utility{clear:both;color:#888;font-size:85%;line-height:1.8;}
    .entry-utility li{display:inline;list-style-type:none;border-left:1px dotted #aaa;margin-left:.2em;padding-left:.5em;}
    .entry-utility li:first-child{border:0;margin:0;}
    .entry-utility dl,.entry-utility dt,.entry-utility dd{display:inline;font-weight:400;margin:0;}
    .entry-utility dt,.entry-utility span{padding-right:.3em;}
    .entry-utility dt:after,.entry-utility span:after{content:"\3A";padding-left:.3em;}
    .entry-utility a{background:#eee;border-radius:5px;padding:0 .2em;}
    
  3. ページ送り

    #pager,#pager2{list-style-type:none;padding:.3em;background:#eee;margin-bottom:14px;}
    #pager a,#pager2 a{display:block;}
    #pager a:hover,#pager2 a:hover{background:#ffc;}
    #pager a:before,#pager2 a:before{padding-right:.5em;}
    #pager-previous a:before,#pager-previous2 a:before{content:"\226A";}
    #pager-next a:before,#pager-next2 a:before{content:"\226B";}
    #pager-cm a:before,#pager-cm2 a:before{content:"\270E";}
    #pager-top a:before,#pager-top2 a:before{content:"\21E7";}
    
  4. 各ページ下部の固定表示部分

    #each-page-bottom{padding:10px;margin-bottom:14px;background:#f2f7fc;box-shadow:3px 3px 5px #777;}
    #each-page-bottom p,#each-page-bottom ul,#each-page-bottom ol,#each-page-bottom table{margin:0 0 1.5em;}
    #each-page-bottom li{margin-left:1.5em;}
    

コメント・トラックバック

  1. コメント・トラックバック

    #commented-title{background:#fff;padding:.3em;font-size:150%;}
    #commented-title:before{content:"\270E";margin-right:.3em;font-size:120%;line-height:1;color:#999;font-weight:400;}
    .aside-title{font-size:1.2em;margin-bottom:1em;font-weight:700;}
    .comments{background:#fafafa;padding:.5em;clear:left;}
    .comments dt,#cm dt,#edit-area dt{margin:7px 14px;font-weight:700;}
    .comments dd,#cm dd,#edit-area dd{margin:0 14px 14px;}
    .comment-title{border-bottom:1px dotted #777;}
    .comment-footer ul{border-top:1px dotted #777;}
    .comment-footer li,.trackback-footer li{display:inline;list-style-type:none;border-left:1px dotted #aaa;margin-left:.2em;padding-left:.5em;}
    .comment-footer li:first-child,.trackback-footer li:first-child{border:0;margin:0;border:0;}
    .comment-no-in-blog{color:#999;font-size:85%;cursor:help;}/*blog全体通番のコメント番号*/
    #edit-area,#cm,#tb{background:#fafafa;margin-bottom:2em;padding:.5em;}
    .form-btn{text-align:center;}
    .emoji{vertical-align:middle;}
    
  2. 記事ごとのコメント番号

    #commented dl{counter-increment:comment;}
    .comment-title:before{content:counter(comment);color:#999;font-size:85%;padding-right:.5em;}
    
  3. コメント吹き出し風装飾

    .fukidashi .comment-title{
    font-size:120%;
    background:#fff;
    padding:5px;
    margin:14px 14px 0;
    border:3px solid #222;
    border-bottom:0;
    border-radius:10px 10px 0 0;
    }
    .fukidashi .comment-body{
    background:#fff;
    margin-bottom:40px;
    padding:5px;
    border:3px solid #222;
    border-top:0;
    border-radius:0 0 10px 10px;
    }
    .fukidashi .comment-body:after{
    left:250px;/*吹き出し先っちょの位置調整*/
    bottom:-36px;
    border-top:30px solid #222;
    border-left:30px solid transparent;
    content:"";position:relative;display:block;width:0;height:0;
    }
    .fukidashi .comment-footer ul{
    border-top:0;
    border-bottom:1px dashed #999;
    }
    
  4. 承認待ちコメント

    .cm--{background:transparent;color:#ccc;}
    .cm-- .comment-title{border:1px dotted #ccc;border-bottom:0;margin-bottom:0;}
    .cm-- .comment-title:before{color:#ccc;}
    .cm-- .comment-body{border:1px dotted #ccc;border-top:0;margin-bottom:0;}
    .cm-- .comment-footer ul{display:none;}
    .cm-- .comment-body:after{border:0;}
    
  5. 既存コメントを残したままコメント投稿フォーム非表示

    #stop-cm dt:before{content:"";}
    

検索結果・サイトマップ

  1. 検索結果・サイトマップ

    #sitemap .entry-title,#search .entry-title{margin-top:0;}
    #search .entry:hover,#sitemap .entry:hover{border:1px dashed #ddd;box-shadow:none;padding:9px;}
    .to-p:hover{font-size:120%;line-height:1;}/*TO this Page*/
    #titlelist>li:nth-child(even){background:rgba(0,0,0,0.03);}
    #titlelist .titlelist-each{list-style:none;margin-left:0;border-top:1px dotted #bbb;overflow:hidden;padding:7px 0;}
    #titlelist .titlelist-each:first-child{border:0;}
    #titlelist dl{margin:0;}
    #titlelist .titlelist-img{display:inline-block;margin:0;vertical-align:top;}/*ie6/7*/
    .titlelist-entry{display:inline-block;vertical-align:top;width:520px;}/*ie6/7*/
    .titlelist-entry .list{line-height:1.8;}
    .titlelist-date,.titlelist-utility{color:#888;font-size:85%;}
    .titlelist-date dt,titlelist-utility dt,.titlelist-date dd,.titlelist-utility dd{display:inline;font-weight:400;margin:0;padding-right:.3em;}
    .titlelist-date dt:after,.titlelist-utility dt:after{content:"\3A";padding-left:.3em;}
    #titlelist .entry-utility{margin-bottom:0;}
    .to-p:hover{font-size:120%;line-height:1;}/*total_pages*/
    

サイドバー・プラグイン

  1. サイドバー・プラグイン

    #sidebar,#sidebar2{font-size:90%;}/*ie6再定義*/
    #sidebar{float:left;}/*サイドバー(左)*/
    .left #sidebar{float:right;}
    #sidebar2{float:right;}/*サイドバー2(右)*/
    .right #sidebar2{float:left;}
    #primary,#secondary{padding:14px 0 1px;}/*最後の1pxは透過防止用、ie6再定義*/
    #sidebar ol,#sidebar2 ol{border:1px solid #eee;background:#fff;margin:0 0 14px;padding:.3em 0;}
    #sidebar li,#sidebar2 li{margin:0 0 3px 1em;padding-bottom:3px;border-bottom:1px dotted #bbb;}
    #sidebar dt,#sidebar2 dt{font-weight:700;}
    #sidebar dd,#sidebar2 dd{margin-left:1em;}
    .plugins{border:1px solid #eee;background:#fdfdfd;box-shadow: 1px 1px 3px #bbb;margin:0 0 14px;padding:.3em;}
    .plugins dt{border-bottom:1px dotted #aaa;margin-bottom:.5em;padding-bottom:.2em;}
    /*
    ※ fc2blogプラグインのタイトルをCSSでカスタムする設定方法
    ※ http://customtemplate.blog112.fc2.com/blog-entry-66.html
    ※
    */
    
    #sidebar{font-size:90%;float:left;}/*ie6再定義*/
    .left #sidebar{float:right;}
    #primary,#secondary{padding:14px 0 1px;}/*最後の1pxは透過防止用、ie6再定義*/
    #sidebar ol{border:1px solid #eee;background:#fff;margin:0 0 14px;padding:.3em 0;}
    #sidebar li{margin:0 0 3px 1em;padding-bottom:3px;border-bottom:1px dotted #bbb;}
    #sidebar dt{font-weight:700;}
    #sidebar dd{margin-left:1em;}
    .plugins{border:1px solid #eee;background:#fdfdfd;box-shadow: 1px 1px 3px #bbb;margin:0 0 14px;padding:.3em;}
    .plugins dt{border-bottom:1px dotted #aaa;margin-bottom:.5em;padding-bottom:.2em;}
    /*
    ※ fc2blogプラグインのタイトルをCSSでカスタムする設定方法
    ※ http://customtemplate.blog112.fc2.com/blog-entry-66.html
    ※
    */
  2. class付け替えでサイドバー横幅一発調整(3カラムのみ)

    .side300 #page{width:1292px;}
    .side300 #container{width:976px;}
    .side300 #sidebar,.side300 #sidebar2,.side300 #tbox,.side300 #tbox-boxes div,.side300 #tbox2{width:302px}
    .side300 #tbox-tabs li{width:42px;}
    .side250 #page{width:1192px;}
    .side250 #container{width:926px;}
    .side250 #sidebar,.side250 #sidebar2,.side250 #tbox,.side250 #tbox-boxes div,.side250 #tbox2{width:252px}
    .side250 #tbox-tabs li{width:35px;}
    .side200 #page{width:1096px;}
    .side200 #container{width:878px;}
    .side200 #sidebar,.side200 #sidebar2,.side200 #tbox,.side200 #tbox-boxes div,.side200 #tbox2{width:203px}
    .side200 #tbox-tabs li{width:28px;}
    
  3. サイドバー用カテゴリリスト(アイキャッチ仕様)

    #plg-c.plg-c-ec li{width:100px;height:100px;list-style:none;float:left;position:relative;margin:0;padding:0;border:0;}
    #plg-c.plg-c-ec img{margin-bottom:-32px;}
    #plg-c.plg-c-ec a .plg-c-name{line-height:1.1;height:28px;display:none;border-radius:3px;padding:1px 5px;transition:all .8s cubic-bezier(0.25,0.1,.25,1);opacity:1;}
    #plg-c.plg-c-ec a:hover .plg-c-name{display:block;background:#000;opacity:.7;}
    
  4. 最新記事にアイキャッチ画像

    #sidebar .eyecatcher li,#sidebar2 .eyecatcher li{margin-left:0;}
    

フッター・便利機能ボタン

  1. フッター

    #footer{font-size:85%;line-height:1.3;text-align:center;clear:both;}
    #fc2ad strong{background:inherit;padding:0;font-weight:400;}
    
  2. 便利機能ボタン

    #up-or-down{font-size:50px;bottom:0;margin-left:-1em;position:fixed;z-index:92;line-height:1;text-align:center;}/*ie6*/
    .y-left #up-or-down{left:0;margin:0;}/*y=yajirushi*/
    .y-right #up-or-down{right:0;margin:0;}
    #up-or-down a{color:#777;display:block;border-radius:30px;}
    #up-or-down a:hover{color:#f03;text-shadow:3px 3px 5px #333;font-weight:700;background:#ffc;cursor:pointer;}
    #up-or-down .active{background:#cff;}
    .kijideka{font-size:125%;}/*文字拡大ボタンクリック時の拡大サイズ*/
    .kijideka2{font-size:150%;}/*同上*/
    .kijideka.kijideka2{font-size:200%;}/*同上*/
    

個別要素やclassなど

各要素

  1. 各要素

    h1,h2,h3,h4,p,ul,ol{margin:0;padding:0;}
    pre,p,blockquote,#urlhere{word-wrap:break-word;}
    blockquote{border:1px outset #777;padding:.5em;box-shadow:5px 5px 5px rgba(0,0,0,0.2);}
    img,tr{border:0;}
    table{border-collapse:collapse;border-spacing:0;}
    table,td,th{border:1px solid #777;}
    em,address{font-style:normal;}
    em{font-weight:700;}
    kbd{border:3px outset #e0e0e0;background:#f0f0f0;padding:0 2px;margin:1px 3px;}/*KeyBoarD*/
    hr{clear:both;height:1px;margin:3em 0;border:0;border-top:1px dashed #bbb;}
    .notice{color:#f44;}
    .pale{color:#ccc}
    
  2. 入力欄

    input,textarea{border:1px solid #aaa;border-radius:4px;}
    input:hover,textarea:hover{border:1px solid #555;}
    input:focus,textarea:focus{background:#ffc;box-shadow:inset 0 1px 2px rgba(0,0,0,0.298);border:1px solid #3cc;}
    
  3. カレンダー

    .calender{width:90%;margin:0 auto;}
    .calender caption{margin-bottom:10px;margin:0 auto;}
    .calender th,.calender td{padding:.1em;border-bottom:1px dotted #ccc;text-align:center;}
    #sun{color:red;}
    #sat{color:#00f;}
    .calender td a:link,.calender td a:visited{color:#fff;display:block;background:#81bbad;}
    .calender td a:focus,.calender td a:hover,.calender td a:active{color:#fff;display:block;background:#f8c594;}
    
  4. 角丸定義(IE8以下は非対応)

    .maru .round,.entry .round,.entry .maru{border-radius:10px;}
    .maru .round-t{border-radius:10px 10px 0 0;}
    .maru .round-l{border-radius:10px 0 0 10px;}
    .maru .round-b{border-radius:0 0 10px 10px;}
    .maru .round-r{border-radius:0 10px 10px 0;}
    .kake .round,.entry .kake,.entry .blunt{border-radius:4px;}
    .kake .round-t{border-radius:4px 4px 0 0;}
    .kake .round-l{border-radius:4px 0 0 4px;}
    .kake .round-b{border-radius:0 0 4px 4px;}
    .kake .round-r{border-radius:0 4px 4px 0;}
    
  5. ボタン風

    .button{background:#eee;border:2px outset #999;padding:0 2px 2px 0;margin:3px;font-size:90%;cursor:pointer;white-space:nowrap;}
    [title].button{border:2px outset #999;cursor:pointer;}
    .button:active{border:2px inset #999;padding:2px 0 0 2px;}
    
  6. Ascii Art

    .aa{font-size:16px;font-family:'MS Pゴシック','IPAMonaPGothic',sans-serif,Osaka,'ヒラギノ角ゴ Pro W3';line-height:1.125em !important;}
    

文字

  1. 文字の大きさ

    .huge{font-size:500%;}
    .big{font-size:200%;}
    .large{font-size:140%;}
    .small{font-size:70%;}
    .tiny{font-size:50%;}
    
  2. 文字の太さ

    b,.bold{font-weight:700;}
    .normal{font-weight:400;}
    
  3. 文字の線

    s,.del{text-decoration:line-through;}
    u,.uline{text-decoration:underline;}
    
  4. 文字の縁取り

    .text-outline{text-shadow:1px 0 0 #222,-1px 0 0 #222,0 1px 0 #222,0 -1px 0 #222,1px 1px 0 #222,1px -1px 0 #222,-1px 1px 0 #222,-1px -1px 0 #222;}
    
  5. 文字その他

    .textc{text-align:center !important;}
    .textr{text-align:right !important;}
    .textl{text-align:left !important;}
    i,.italic{font-style:italic;}
    .nowrap{white-space:nowrap;}
    .shadow{box-shadow:2px 2px 2px #aaa;}
    .hover{color:#03c;cursor:pointer;}
    .hover:hover{color:#f03;}
    

ツールチップ

  1. ツールチップ cf.http://psacake.com/web/jl.asp ie6非対応

    .info{position:relative;border-bottom:1px dotted #666;cursor:help;}
    .info:hover{z-index:50;background:#ffe;}
    .info span{display:none;}
    .info:hover span{
    display:block;
    position:absolute;
    top:3em;left:2em;
    width:20em;
    border:1px solid #666;
    background:#eee;color:#222;
    text-align:left;
    padding:5px;
    box-shadow:5px 5px 2px #aaa;
    }
    

回り込み

  1. 回り込み

    .entry .floatl,#sticky .floatl,.categories .floatl{float:left;padding:0 14px 14px 0;margin:0;}/*.entryは詳細度の関係*/
    .entry .floatr,#sticky .floatr,.categories .floatr{float:right;padding:0 0 14px 14px;margin:0;}
    
  2. 回り込み解除

    .clear{clear:both;}
    .ofh{overflow:hidden;}/*OverFlowHidden*/ /*ie6*/
    

画像

  1. 画像を透過

    a .ec-ok{transition:all .5s cubic-bezier(0.25, 0.1, 0.25, 1);opacity:1;}
    a:hover .ec-ok{opacity:.8;}/*ie6-8*/
    
  2. 画像に角丸

    .img-round .entry-content img,.img-round #site-title a{border-radius:10px;}
    .img-round .ec-ok,.img-round .ec-ng,.img-round .ec-ns,.img-round #sidebar img{border-radius:5px;}/*ns=noscript*/
    
  3. eyecatcher画像位置

    .eyecatcher li{list-style:none;}
    .eyecatcher a{overflow:hidden;}
    .eyecatcher a img{float:left;margin-right:5px;}
    

grayベースの配色

  1. grayベースの配色

    body.gray,.gray #page,.gray #header,.gray #container,.gray #content,.gray #sidebar,.gray #primary,.gray #secondary,.gray #sidebar2{background:#e5e5e5;}
    body.gray,.gray #page,.gray #header,.gray #content,.gray #sidebar,.gray #primary,.gray #secondary{background:#e5e5e5;}
    .gray #crs-wr{background:#909090;}
    .gray #crs-ul li{transition:background 0s;}
    .gray #crs a{color:#fffff0;}
    .gray #crs a:hover{background:#666;color:red;}
    .gray #crs .how-long-ago,.gray #crs .m-ago2,.gray #crs .h-ago2,.gray #crs .d-ago2{color:#fffff0;}
    .gray #nav li{background:#909090;}
    .gray #nav li:hover,.gray #tbox-tabs li:hover{background:#666;}
    .gray #nav a,.gray #nav .recent-meta,.gray #nav .recent-opening{color:#fffff0;text-shadow:0 -1px 1px #aaa,-1px 0 1px #aaa,1px 0 1px #aaa,0 1px 1px #aaa,1px 1px 1px #000;}
    .gray .recent-opening:before,.gray .recent-opening:after{color:#ccccc0;}
    .gray #nav ul li,.gray .recent-opening{border-top-color:#fffff0;}
    .gray #nav a:hover{color:red;text-shadow:1px 1px 1px #000;}
    .gray #nav .how-long-ago,.gray #nav .m-ago2,.gray #nav .h-ago2,.gray #nav .d-ago2{color:#fffff0;}
    .gray .entry{background:#fff;}
    .gray #tbox-tabs li{color:#fff;background:#909090;}
    .gray #tbox-tabs li:active{background:#ff3;}
    .gray #tbox-tabs .active,.gray #up-or-down .active{background:#333;}

自動ナンバリング

  1. h2~h4のナンバリング (bodyのclassに「order」を入れると有効になる)

    .entry-title{counter-reset:h2}
    
    .order .entry-content h2{
    counter-increment:h2;counter-reset:h3;font-size:150%;
    }
    .order .entry-content h3{
    counter-increment:h3;counter-reset:h4;font-size:125%;
    }
    .order .entry-content h4{
    counter-increment:h4;counter-reset:h5;font-size:110%;
    }
    .order .entry-content h2:before{
    content:"\a7" counter(h2) "\a0";color:#999;font-size:120%;line-height:1;
    }
    .order .entry-content h3:before{
    content:"\b6\a0" counter(h2) "\2e" counter(h3) "\a0";color:#999;
    }
    .order .entry-content h4:before{
    content:counter(h2) "\2e" counter(h3) "\2e" counter(h4) "\a0";color:#999;
    }
    #search .entry-content h2:before,#sitemap .entry-content h2:before{content:"";}
    
  2. 段落ごとのナンバリング

    /*
    ※ bodyのclassに「order」を入れ、pの祖先要素に「h3」などのclassを入れると有効になる
    ※ http://customtemplate.blog112.fc2.com/blog-entry-2.html
    */
    .order .h3 p:first-child,.order .h3 .p{
    counter-increment:h3;counter-reset:h4;
    }
    .order .h3 p:first-child:before,.order .h3 .p:before{
    content:counter(h2) "\2e" counter(h3) "\a0";
    }
    .order .h4 p:first-child,.order .h4 .p{
    counter-increment:h4;counter-reset:h5;
    }
    .order .h4 p:first-child:before,.order .h4 .p:before{
    content:counter(h2) "\2e" counter(h3) "\2e" counter(h4) "\a0";
    }
    .order .h5 p:first-child,.order .h5 .p{counter-increment:h5;}
    .order .h5 p:first-child:before,.order .h5 .p:before{
    content:counter(h2) "\2e" counter(h3) "\2e" counter(h4) "\2e" counter(h5) "\a0";
    }
    .order .entry .entry-content .no-before:before{content:"";}
    .order .entry-content dl{margin-left:0;}
    .order .entry-content dd{margin-left:0;}
    
  3. マウスオーバーしている段落のライトアップ

    .h3>li,.h4>li,.h5>li,.lightup>li{margin-bottom:18px;margin-left:0;}
    .h3>li:hover,.h4>li:hover,.h5>li:hover,.lightup>li:hover{
    outline:3px double #3cc;background:#ffe;margin:0 -10px 18px;padding:0 10px;}
    .entry-content .h3,.entry-content .h4,.entry-content .h5,.entry-content .lightup{margin-left:0;list-style:none;}
    .h3 p:before,.h4 p:before,.h5 p:before,.h3 .p:before,.h4 .p:before,.h5 .p:before,.h3 dt:before,.h4 dt:before,.h5 dt:before{color:#999;font-size:70%;}
    

JavaScriptで動的に生成される部分

#tbox (Tab BOX / ie6は非表示)

  1. 構造

    #tbox-tabs li,#tbox-tabs .active{border-radius:10px 10px 0 0;}
    #tbox-tabs li{font-size:24px;height:26px;padding:1px 0;margin:0 1px 0 0;line-height:1.2;float:left;background:#ddd;overflow:hidden;text-align:center;color:#03c;list-style:none;border:0;margin-bottom:0;}
    #tbox-tabs li:hover{color:red;background:#ffc;cursor:pointer;}
    #tbox-tabs li:active{background:#ff3;}
    #tbox-tabs .active{background:#cff;}
    #tbox-boxes{height:100%;position:relative;clear:both;background:#f3f3f3;}
    #tbox-boxes>div{height:98%;margin-right:5px;background:#f9f9f9;float:left;overflow-x:hidden;overflow-y:auto;display:none;}
    #tbox-boxes .active{display:block;}
    #tbox p{margin:0 15px 10px;font-size:90%;}
    .no-tbox #tbox,.no-tbox2 #tbox2{display:none;}
    
  2. 中身

    #tbox-box-tcont{padding-left:1px;}
    #tbox-box-tcont a{display:block;}
    #tbox-box-alink a,#tbox-box-aimg a{margin:5px 10px;display:block;}
    #tbox-box-alink a{border-bottom:1px dotted #999;}
    #tbox-box-aimg a{margin:0 0 10px 5px;display:inline-block;vertical-align:top;}
    #tbox-box-aimg a:hover{outline:2px dashed #3cc;box-shadow:7px 7px 3px #999;}
    #tbox-box-meta dl{padding:0 5px;margin:0;}
    #tbox-box-meta dt{margin-top:3px;}
    #tbox-box-meta dd{margin:0 0 0 10px;}
    #tbox-box-cate p{margin-left:0;}
    #tbox .plugin-first,#tbox .plugin-second{border:0;background:transparent;box-shadow:none;margin-bottom:0;}
    
  3. .tcont (a Table of CONTents:自動生成される目次)

    #entry-tcont{border:1px solid #ccc;padding:10px;display:inline-block;}
    #entry-tcont a{display:block;}
    #entry-tcont .close a,#page .hide-tmp{display:none;}
    .H1entry-title,.H2entry-title{margin:5px;border-bottom:1px dotted #222;}
    .H2:not(.H2entry-title){counter-increment:tcont-h2;}
    .H2{font-size:95%;margin:3px 0 0 5px;counter-reset:tcont-h3;}
    .H3,.DTcomment-title{font-size:90%;margin-left:10px;counter-increment:tcont-h3;counter-reset:tcont-h4;}
    .H4{font-size:90%;margin-left:15px;counter-increment:tcont-h4;}
    .reset,.H2entry-title{counter-reset:tcont-h2;}
    .H2aside-title{border-top:1px dotted #aaa;padding-top:.3em;}
    .H2:before{content:counter(tcont-h2) "\a0";color:#999;}
    .H3:before{content:counter(tcont-h2) "\2e" counter(tcont-h3) "\a0";color:#999;}
    .H2entry-title:before,.H2aside-title:before,.H3aside-title:before{content:"";}
    .DTcomment-title:before{content:counter(tcont-h3) "\a0";color:#999;}
    .H4:before{content:counter(tcont-h2) "\2e" counter(tcont-h3) "\2e" counter(tcont-h4) "\a0";color:#999;}
    #mokuji-on{display:none;}
    #mokuji-off,#comment-title-off,#comment-title-on{font-size:80%;}
    .tcont:target{background:#ff9;border-radius:10px;padding:0 .5em;}
    .tcont:target:before{content:"\279C";color:red;border-radius:10px;padding-right:.5em;}
    #tcont-now{background:#ffe;border:1px dashed #3cc;border-radius:5px;}
    /*
    ※ URLの最後が「blog-entry-数字.html」になっているページは目次が2ヶ所表示されます。
    ※ サイドバー下(背後)の空きスペースと記事本文内の最初のh2の直前です。
    ※ カテゴリーページやHOMEページなどその他のページでは
    ※ サイドバー下(背後)の空きスペースにのみ表示されます。
    */
    
  4. 本文折りたたみ

    .skip-ok:after,.skip-on:after{color:#03c;font-size:60%;font-weight:400;}
    .skip-on{color:#bbb;}
    .skipped-after-H2,.skipped-after-H3,.skipped-after-H4,.skipped{display:none;}
    .skip-ok .s-on,.skip-on .s-ok{display:none;}
    .skip-ok .s-ok,.skip-on .s-on{cursor:pointer;font-size:60%;font-weight:400;margin-left:.5em;}
    
  5. パラパラ漫画風アニメーション

    .ani span,.ani-s span,.ani-f span{display:none;}
    .ani span:first-child,.ani-s span:first-child,.ani-f span:first-child{display:inline;}
    

ピクトグラム

  1. 配置

    /*大きさ(中)*/
    .picto,.picto-l,.picto-s{padding:5px 5px 5px 65px;margin:0 0 20px;overflow:hidden;}/*ie6*/
    .pictogram{float:left;padding:5px 0 0 5px;margin-left:-60px;font-size:50px;font-weight:700;text-align:center;width:50px;}
    
    /*大きさ(大)*/
    .picto-l{padding-left:115px;}/*ie6*/
    .picto-l .pictogram{padding:0 0 0 5px;margin-left:-110px;font-size:100px;width:100px;}
    
    /*大きさ(小)*/
    .picto-s{padding-left:40px;}/*ie6*/
    .picto-s .pictogram{padding:5px 0 0;margin-left:-30px;font-size:25px;width:16px;font-weight:400;}
    
  2. 挿入するピクトグラムの種類

    .memo .pictogram:before{content:"\270D";}
    .check .pictogram:before{content:"\2611";}
    .bikkuri .pictogram:before{content:"\21";}
    .inyo .pictogram:before{content:"\275D";}
    .yubi .pictogram:before{content:"\261E";}
    .vsign .pictogram:before{content:"\270C";}
    .batsu .pictogram:before{content:"\2717";}
    .hone .pictogram:before{content:"\2620";}
    .kaku .pictogram:before{content:"\2622";}
    
  3. 配色(cf.http://www.kanzaki.com/docs/html/htminfo17.html の クラス名の考え方)

    /*青系*/
    .point{background:#eff;border:1px outset #9cf;}
    .point .pictogram{color:#9cf;}
    
    /*ピンク系*/
    .hint{background:#fef;border:1px outset #f9f;}
    .hint .pictogram{color:#f9f;}
    
    /*緑系*/
    .rei{background:#efc;border:1px outset #7f7;}
    .rei .pictogram{color:#7f7;}
    
    /*黒系*/
    .ginga{background:#010101;border:3px dotted #ff5;color:#ff5;}
    .ginga .pictogram{color:#ff0;}
    
    /*黄系*/
    .chui{background:#ff5;border:3px dashed #222;}
    
    /*オレンジ系*/
    .keikoku{background:#fa5;border:3px outset #f03;text-shadow:1px 1px 15px #fff;font-weight:700;}
    .keikoku .pictogram{color:#f03;}
    
    /*赤系*/
    .kiken{background:#f02;border:5px double #ff0;color:#ff1;}
    .kiken .pictogram{color:#ff0;text-decoration:blink;}
    
    /*その他*/
    .valid,.valid .pictogram{background:#55B05A;color:#fff;}
    .invalid, .invalid .pictogram{background:#D23D24;color:#fff;}
    .reverse,.reverse .pictogram{background:navy;color:#fff;}
    .border{border:1px solid #bbb;}
    .blinking{visibility:hidden;}/*jsと組み合わせて意味のあるクラス*/
    

印刷用レイアウト

  1. 印刷用レイアウト

    @media print{
    *{text-shadow:none !important;box-shadow:none !important;}
    body{background:none !important;}
    #page{clear:both !important;display:block !important;float:none !important;position:relative !important;border:0;}
    #single .entry,#sitemap .entry,#search .entry,.fukidashi .comment-title,.fukidashi .comment-body{border:0 !important;}
    #site-title,#site-description{float:none;line-height:1.4em;margin:0;padding:0;}
    #site-title{font-size:13pt;}
    .entry-content{font-size:14pt;line-height:1.6em;}
    .entry-title{font-size:21pt;margin-left:0;}
    #crs-wr,#nav-wrapper,#nav-wrapper2,#nav,#tertiary,#entry-tcont,.s-ok,.s-on,#pager,.page-link,#primary,#secondary,#cm,.comment-edit-link,.edit-link,#pager2,#each-page-bottom,#sidebar,#tbox,#tbox2,#sidebar2,#up-or-down,.categories,#search-area-pager{display:none !important;}
    #page,#header,#container,#content,#footer,.fukidashi .comment-title,.fukidashi .comment-body{margin:0 !important;width:100% !important;}
    .entry-content a[target="_blank"]:after,.fukidashi .comment-body:after{content:"" !important;border:0 !important;}
    .picto,.picto-s,.picto-l,.aa{page-break-inside:avoid;}
    }
    

すべてのCSSコード

  1. カスタムしたい部分が大量にある場合、一つ一つコピペするのではなく右のファイルを開き、まとめてコピペするのもありです。どこをカスタムしたのか分からなくなる可能性が高いので、作者は非推奨です。

  2. すべてのCSSコードをコピペで取り込んだ場合、デフォルトで読み込んでいる外部CSSファイル2つを読み込まないようにします。HTML編集で次のコードを削除します。

    <link rel="stylesheet" type="text/css" media="all" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/customtemplate-3c151-min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/eyecatcher100-min.css" />
    

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)