あきやん 's journal

アニメ、ニュース、ソフトとかの備忘録。

覚え書き、強調表示。

このブログは、 普通...はてなブログでのデフォルトね...とは違い、傍点とか括弧を使ったイレギュラーな強調表示にしてるんだけど、そのためにCSSいじってます。

はてなブログでは

見たままモードとか、 マークダウンモードなんてのが有るんだけど、 CSS変更のおかげで、マークダウンモードでは、マークダウン記法での強調表示2種類を傍点とか括弧に表示変更。 見たままモードではボールドやらイタリックやらの装飾ボタンで、括弧での強調や傍点での装飾が出来るように。

具体的には
マークダウンで*こういう書き方をする*強調...
emタグを傍点に変更する場合は以下のCSSで。

em { 
font-size: 80%;
 letter-spacing: 0.2em;
-webkit-text-emphasis-style: "●" ;
-webkit-text-emphasis-color: #ff6699;
-ms-text-emphasis-style: "●" ;
-ms-text-emphasis-color: #ff6699;
-moz-text-emphasis-style: "●" ;
-moz-text-emphasis-color: #ff6699;
-o-text-emphasis-style: "●" ;
-o-text-emphasis-color: #ff6699; 

}

マークダウンで
**こういう書き方をする**強調...
strongタグを括弧に変更する場合は以下で。


strong:before {  color: #ff6699;content:"〝"; } 

strong:after { color: #ff6699;content:"〟";  } 

ブラウザの対応が、どこまでなのか全然分かんないので、当初のベンダープレフィックス付けたままで。なんかサポートしてない場合の為に用意された命令、なんてのが有る...いや、出来たのかな?...みたいだけど、面倒くさいから入れてないです。

追記...

contentの後の""の中が見えなくなっちゃった。 だから括弧内の文字のみをダブルミニュート*1に変更。

この構文カラーリングしてある引用タグ部分は、英文フォントを先にチョークボードに変更してます。

引用タグ部分の枠が可変になる...幅が広くて枠が表示されてしまう場合は、その下が崩れるみたいだから手動で修正かな。

さらに追記

傍点部分(emタグ部分)が...傍点が文字の上に付くので上下の枠に干渉して というか要するに縦幅が大きくなって枠からはみ出てしまうので 文字サイズを80%に変更してたのを、手直しから予めCSSに書き込み。 (font-size: 80%;

で...傍点部分が少し長めな時に ゴチャゴチャして見づらくなったので、そこだけ文字間隔を若干広めに。(letter-spacing: 0.2em;

あ、インラインコード*2のアルファベットはチョークボードの方が見やすいかな。うん。ここも変更。

*1:〝〟

*2:p要素の...普通の文章の中に入れてあるプログラムコード。で良いのかな💦