はてなブログのカスタマイズについて｜CSSやらソースコードやら覚書き

以下はカスタマイズした箇所の覚書き。

①見出しのデザイン

拡張機能＝h2

大見出し＝h3

中見出し＝h4

小見出し＝h5

標準＝p

※拡張機能の製作者さんのURL↓

www.notitle-weblog.com

②文字装飾

蛍光マーカー
※デフォルトでは文字装飾機能のボタンに「アンダーライン」はあっても「マーカー」は無いので、使う頻度が少ない「斜体」に割り当てた
※編集見たままモードでは変化が無いので、文字装飾を斜体+太字にするか、プレビューで都度確認する

　設定 > 詳細設定 > headに要素を追加

<style type="text/css">
  /* 斜体表示を蛍光マーカー（緑）にする */
  article em{
    font-weight:bold;
    font-style: normal;
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#cbe874 !important;
    background:linear-gradient(to bottom, transparent 60%, #cbe874 60%) !important;
  }
  /* iタグは斜体*/
  article i{
    font-style:oblique !important;
  }
</style>

③目次

拡張機能＝h2
- 大見出し＝h3
  - 中見出し＝h4
    - 小見出し＝h5

　デザイン > カスタマイズ > デザインCSS

/*目次のカスタマイズ*/
.table-of-contents:before{
content: "目次";
font-size: 100%;
font-weight: bold;
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: square;
}
ul.table-of-contents {
font-size: 90%;
background: #F3F5F6; /*背景色*/
padding: 10px 10px 10px 25px;
margin: 0;
}
.table-of-contents a:link{
color:#1464b3; /*未訪問リンク色*/
text-decoration: none;
}
.table-of-contents a:visited{
color: #333; /*訪問済みリンク色*/
}
.table-of-contents a:hover{ /*マウスホバー時*/
text-decoration:underline; /*下線をつける*/
}

④吹き出し

拡張機能＞「l-fuki クラス名」：　l-fuki tsuno

拡張機能＞「r-fuki クラス名」：　r-fuki tetsu

　※拡張機能を利用して作れる（↓製作者さんのURL）

www.notitle-weblog.com

⑤ソースコードの表示

【一行ソースコード】

color: red;

HTML編集画面でcodeタグで囲む

<code style="background: #efefef; color: #333; padding: 0 5px; border: 1px solid #eee;">ここにコードを書く</code>

【複数行ソースコード】