はりをきば

そこにピカマンがいる限り 私はテイッハットウッをやめない


Caution!!
この日記はバカな私(はりを)が何かを忘れない為に、バカの一つ覚えの如く色んな記事を投稿しています。…が、
あくまでもただの備忘録のひと握りに過ぎず、情報の信憑性や真偽までは保証していません。
極力正しい情報をまとめているつもりですが、万一誤った記事の内容を実行しトラブル等が発生しても
当方は如何なる責任を負いません。自己責任でご利用ください。

以上に同意する方のみ、この雑記帳の閲覧をお願いします。

初めての方はこちらも併せてお読みください。このブログについて (About)


…ちゃ、ちゃんと予防線張ったからな!! ホント何があっても知らねーからな!!!(小学生並の言い訳)

予防線(☢Caution!!☢)の表示
テキスト全般の表示に使うフォント (大抵は「メイリオ」か「ヒラギノ角ゴ ProN W3」) (マルチバイト文字はSource Han Sansと同じ) (マルチバイト文字はNoto Sansと同じ)
ソースコードの表示に使うフォント
ピカマンロケットの効果音

設定を保存キャンセル

はてなブログで定義されてる装飾用CSSクラスまとめ

はてなブログはユーザーCSSの前に共通CSSを読み込んでいる。
f:id:Gutyan:20131213195547p:plain
主に、「記事を書く」や「コメントを書く」、「読者になる」といったシステムで使う部分の装飾なのだが
それ以外にも色々定義しちゃってくれてて
その所為で色々ハマったのでメモしとこうかと思う。



定義されてる装飾用CSSのクラス一覧

全部挙げるとキリがないんで、ユーザー側のクラスと被りそうなやつだけ。

  • display系
    • block
    • inline
    • inline-block
    • nodisplay
  • float系
    • clear
    • clearfix (after付き)
    • left
    • nofloat
    • right
  • font系
    • bold
    • font-default
    • italic
    • nodeco
    • normal
    • underline
  • list系
    • nolist
    • circle
    • disc
  • position系
    • absolute
    • fixed
    • relative
    • static
  • text-align系
    • center
    • textleft
    • textright
  • その他
    • border-box
    • margin0
    • padding0

定義されてるスタイル詳細

display系

block
.block {
	display: block;
}
inline
.inline {
	display: inline;
}
inline-block
.inline-block {
	display: inline-block;
}
nodisplay
.nodisplay {
	display: none;
}

float系

clear
.clear {
	clear: both;
}
clearfix
.clearfix {
	display: block;
	*zoom: 1;
}

.clearfix:after {
	content: ".";
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}
left
.left {
	float: left;
}
nofloat
.nofloat {
	float: none;
}
right
.right {
	float: right;
}

font系

bold
.bold {
	font-weight: bold;
}
font-default
.font-default {
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}
italic
.italic {
	font-style: italic;
}
nodeco
.nodeco {
	text-decoration: none;
}
normal
.normal {
	font-style: normal;
	font-weight: normal;
}
underline
.underline {
	text-decoration: underline;
}

list系

nolist
.nolist {
	list-style-type: none;
}
circle
.circle {
	list-style-type: circle;
}
disc
.disc {
	list-style-type: disc;
}

position系

absolute
.absolute {
	position: absolute;
}
fixed
.fixed {
	position: fixed;
}
relative
.relative {
	position: relative;
}
static
.static {
	position: static;
}

text-align系

center
.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
textleft
.textleft {
	text-align: left;
}
textright
.textright {
	text-align: right;
}

その他

border-box
.border-box {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
margin0
.margin0 {
	margin: 0 !important;
}
padding0
.padding0 {
	padding: 0 !important;
}

見事に初見殺しくらいますた

このブログは、ダッシュボード>デザイン>カスタマイズ>デザインCSSから書けるユーザーCSSから
@importで自鯖にある自作CSSを読み込んでいるのだが
その中で、記事中で使えるようにクラスを定義しまくってる。
その中の一つ、.leftと.right。


私の自作CSSの.leftと.rightはtext-alignなのに対し
ユーザーCSSより先に読み込まれるはてなブログデフォルトCSSではfloatになっている。


この状態で適当な要素に.leftや.rightを付ければどうなるか。
先に読まれた方のスタイルを継承し、後に定義されたスタイルと合成される。


テキストが左(右)に寄り、同時に要素も左(右)に寄り、後の要素が回り込み…
結果、表示が崩れる。




なんでこれアナウンスされてないの?
すっげえ迷惑な仕様なんだけど…