はてなブログに自分用 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 というサービスが良いらしい。
これで、ようやくはてなブログの執筆が再開できそうだ。でも、次回の投稿には、けっこうインターバルが空くと思う。。。