風 山 堂

(foussin's diary)

はてなブログに自分用 css を追加

備忘、メモ

 自分用の css を適用する方法が、やっと分かった。

副題:h1.my

大見出し:h2.my

中見出し:h3.my

小見出し:h4.my

コラム的な見出し

テキスト図形

                             ******                ***
                           **      **                 ***
                         **          **                  *
                        *             *                   **
                       *               *                   *
                       *                *                   *
                      *                 *                   *
                      *                 *                    *
                     *                   *                   *
                     *                   *                   *
                     *                   *                   *
                     *                   *                   *
                     *                   *                   *
                     *                    *                 *
                      *                   *                 *
                      *                   *                *
                       *                   *               *
                       **                   *             *
                         *                  **          **
                          ***                 **      **
         ******              *****              ******
       **      **                 ***
     **          **                  *
    *             *                   **
   *               *                   *
   *                *                   *
  *                 *                   *
  *                 *                    *
 *                   *                   *
 *                   *                   *
 *                   *                   *
 *                   *                   *
 *                   *                   *
 *                    *                 *
  *                   *                 *
  *                   *                *
   *                   *               *
   **                   *             *
     *                  **          **
      ***                 **      **
         ***                ******

pre.my-code

pre.my-code { /* Code Block */
    background-color: white;
    border: 1px solid grey;
    padding: 4px;
    margin: 4px;
    white-space: pre;
}

div.my-block

div.my-block { /* Block要素 */ background-color: #dddddd; border: 1px solid black; padding: 4px; margin: 4px; }

my-indent (pre)

.my-indent { margin: 0em 0em 1em 2em; } /* 上右下左(時計回り) */

上記は、次の css で表記した。

/* はてなブログCSS: my.css: by foussin             */
/*                                                      */
/* インポートで読み込む                                 */
/*                         (初版:2012.06.21 Thu 22:21) */
/*                         (改版:2012.06.23 Sat 14:42) */
/* メインサイトや dropbox 等に置いて使用する            */
/*                                                      */
/* クラス名     :先頭に『my-』を付けてみた(衝突回避)   */
/* 文字コード   :utf8                                  */
/*                                                      */
/* はてなブログのデザイン設定(css) ↓                   */
/*                                                      */
/* @import "/css/theme/report/report.css";              */
/* @import "http://host/uid/path/my.css";  ←これを追記 */
/*                                                      */

/* 背景色 */
.my-bg-grey { background-color: #dddddd; }
.my-bgblack { background-color: black; }
.my-bgdarkred   { background-color: #440000; }
.my-bgdarkgreen { background-color: #003300; }
.my-bgdarkblue  { background-color: #000033; }

/* 前景色(文字色) */
.my-violet { color: #9900cc; }
.my-yellow { color: yellow; }
.my-blue   { color: #6666ff; }
.my-red    { color: red; }
.my-orange { color: #ff6633; }
.my-gryellow { color: #cccc99; }    /* グレイッシュyellow   */
.my-white  {                        /* 黒地に文字白抜き     */
    color: white;
    background-color: black;
}

h1.my {
    font-size: 12pt;
    font-weight: bold;
}

h2.my {
    color: black;
    border-top: 1px solid black;
/*    padding: 3px 3px 3px 0px; */  /* 上右下左(時計回り) */
    font-size: 16pt;
    font-weight: bold;
}

h3.my {
    border-left: solid 6px #ccccff;
    padding: 2px;
    font-size: 14pt;
    font-weight: bold;
}

h4.my {
    border-left: solid 6px #ccccff;
    padding: 2px;
    font-size: 11pt;
    font-weight: bold;
}

.my-sub-title {                 /* コラム用(のつもり) */
    border-left: solid 6px #660000;
    background: #997777;
    color: white;
    font-size: 10pt;
    font-weight: bold;
    padding: 2px;
    text-align: left;
}

div.my-block {                  /* Block要素 */
    background-color: #dddddd;
    border: 1px solid black;
    padding: 4px;
    margin: 4px;
}

pre.my-code {                   /* Code Block */
    background-color: white;
    border: 1px solid grey;
    padding: 4px;
    margin: 4px;
    white-space: pre;
}

.my-indent {
    margin: 0em 0em 1em 2em;    /* 上右下左(時計回り) */
}

.my-size18 {
    font-size: 18pt;
}
.my-size15 { font-size: 15pt; }
.my-size13 { font-size: 13pt; }
.my-size11 {
    font-size: 11pt;
    line-height: 13pt;
}
.my-size-1 { font-size: 82%; }     /* <font size="-1"> の代用 */
.my-size-2 { font-size: 61%; }     /* <font size="-2"> の代用 */
.my-center { text-align: center; } /* センター揃え */
.my-right  { text-align: right; }

/* テキスト図形(txt_draw.pl)用の css */
.my-prompt {
    color: #99aaff;
    background-color: #112233;
}
.my-asc-10pt {
    font-size: 10pt;
    line-height: 5pt;  /* 行間を空けない */
}
.my-asc-8pt {
    font-size: 8pt;
    line-height: 4pt;  /* 行間を空けない */
}
.my-asc-6pt {
    font-size: 6pt;
    line-height: 3pt;  /* 行間を空けない */
}

.my-zen-10pt {
    font-size: 10pt;
    line-height: 10pt;  /* 行間ベタ:全角文字用 */
}
.my-zen-8pt {
    font-size: 8pt;
    line-height: 8pt;  /* 行間ベタ:全角文字用 */
}
.my-zen-6pt {
    font-size: 6pt;
    line-height: 6pt;  /* 行間ベタ:全角文字用 */
}

 HTML編集なので、はてな記法は使えず、ソースの色分け表示は諦めた…

 ソースのコメントに書いたように、@import で css を読み込んで使う。そのため、css ファイルの置き場所が必要になる。

 メインサイトがある人は、ホームページスペースに css を置けば良い。ホームページが無い人は、dropbox というサービスが良いらしい。

 これで、ようやくはてなブログの執筆が再開できそうだ。でも、次回の投稿には、けっこうインターバルが空くと思う。。。