考えすぎてしまう人のブログ

いつも考えすぎてしまう僕の脳内を垂れ流します

はてなブログにマーカーっぽい文字装飾を追加する

f:id:sesere:20170714110829p:plain

はてなブログは文字装飾の種類が非常に少ないため、太字をもうちょっとアピールできないかなーとその方法を考えていました

そんな時にほかのブログを見ていたらなにやらおしゃれなものを発見

itbenricho.com

こちらを参考に導入させてもらいます

strong(もしくは b)を置き換えちゃう

本来なら<strong class='marker'>text</strong>といった感じでclassを指定してやる必要があるのですが毎回クラス書くのめんどくさいし<strong>=マーカーでもういいよね……と大雑把指定してしまいます

他とバッティングする人は気をつけましょう

デザインの設定

ダッシュボードから「デザイン」を選択

f:id:sesere:20170714111110p:plain

デザインCSSをクリック

f:id:sesere:20170714111157p:plain

最後にこれを追加

.entry-content strong{
background: linear-gradient(transparent 60%, #66FFCC 60%);
}

マークダウン以外の方法で太字を使っている場合

マークダウンで太字を設定すると**テキスト**これが<strong>テキスト</strong>に展開されます

しかし上にある「B」ボタンをクリックすると<b></b>が挿入されるので普段上のボタンを使っている人は

.entry-content b{
background: linear-gradient(transparent 60%, #66FFCC 60%);
}

こっちを使って下さいstrongbこれだけです

参考にしたサイト

CSSは上で紹介したIT便利帳さんから使わせて頂きました

thank you :)

こんな感じになります

普段と変わらずRailsで開発を行っていたせせり。しかしその時気づいてしまったのだ。「あ、これブランチ切ってない」作業開始から2時間後の事だった。

はてなブログさんは装飾関連がちょっと弱いので方法を考えていきたいですね