- 編集画面にもCSSを反映>Chrome拡張「Stylus」の設定
- h3(大見出し)
- テキスト
- ボックス
- リスト
- 吹き出し
- ボタン
- ラベル
- テーブル
- 画像
- 行間調整
- 画像ギャラリー
- ブログカード(はてなブログ風)
編集画面にもCSSを反映>Chrome拡張「Stylus」の設定
記事編集画面にも独自CSSを反映させるため、Chrome拡張アプリ「Stylus」をインストールする。
h3(大見出し)
h4(中見出し)
h5(小見出し)
仕切り線
テキスト
注)アドオンは使えない。HTMLに直書きする。
<span class="marker-r"></span>
マーカーで強調します。
<span class="marker-y"></span>
マーカーで強調します。
<span class="marker-p"></span>
マーカーで強調します。
<span class="marker-g"></span>
マーカーで強調します。
<span class="wave-black"></span>
波線部分を強調します。
<span class="wave-red"></span>
波線部分を強調します。
<span class="wave-purple"></span>
波線部分を強調します。
<span class="wave-blue"></span>
波線部分を強調します。
ボックス
arasuji(あらすじ)
これは見本です。このように表示されます。これは見本です。このように表示されます。これは見本です。このように表示されます。
box-point,leaf,memo(見出し付きボックス)
注)アドオンは使えない。下記のコードをHTMLに直書きする。
<div class="box-alart">
<span class="box-title">ポイント</span>
<p>ここに文章</p>
</div>
<div class="box-point">
<span class="box-title">ポイント</span>
<p>ここに文章</p>
</div>
<div class="box-leaf">
<span class="box-title">初心者</span>
<p>ここに文章</p>
</div>
<div class="box-memo">
<span class="box-title">メモ</span>
<p>ここに文章</p>
</div>
gaibu(外部リンク)
外部リンクを表示します。
code-writer
注)アドオンは使えない。表示したいソースコードを記述したら、番号付きリストを設定する。さらに、HTML編集で<ol>タグに「class="code-writer"」を設定する。
- p.hatena {
- testdayokoremo
- .testdayo
- }
アコーディオンボックス
ボタンを押して展開&復元できるアコーディオンボックス。
ボタンをクリックすると
アコーディオンが広がり
フルサイズに展開します
もう一度ボタンをクリックすると
元のサイズに戻ります
デフォルト状態の高さ、グラデーション、ボタンのアイコン(Fontawesome)などはCSSで調整可能です。
注)アドオンは使えない。下記のコードを直接記述する。
- <div class="acc-wrap"><input id="acc-button" type="checkbox" /><label for="acc-button"></label>
- <div class="acc-text">
- ここにテキストを記述
- </div></div>
リスト
list-kihon(番号なしリスト)
- 朝ごはん
- 昼ごはん
- 晩ごはん
注)アドオンは使えない。リストを設定したら、HTML編集で<ul>タグに「class="list-kihon"」を設定する。「class="list-kihon ul-short"」とすると横幅を約半分にできる(PC表示のみ)。
- 横幅を短く
nlist-kihon(番号付きリスト)
- 朝ごはん
- 昼ごはん
- 晩ごはん
注)アドオンは使えない。番号付きリストを設定したら、HTML編集で<ol>タグに「class="nlist-kihon"」を設定する。「class="nlist-kihon ol-short"」とすると横幅を約半分にできる(PC表示のみ)。
nindex(連番付き小見出し)
ぶどう
ばなな
さといも
注)アドオンは使えない。HTML編集で<p>タグに「class="nindex"」を設定する。先頭のみ自動付番をリセットするため「class="nindex nindex-reset"」とする。「class="nindex-short"」とすると横幅を約半分にできる(PC表示のみ)。
吹き出し
fukidashi-r
ここが重要なんですよね
fukidashi-g
セカンドバイ
fukidashi-b
コラム
fukidashi-rs
おすすめ
fukidashi-bs
面白い
ボタン
btn-b
注)アドオン使えないので、<a>タグに「class="btn-b"」を設定する。「class="btn-r"」で赤パターン。
「class="btn-b btn-search"」や「class="btn-r btn-link"」でアイコン付き。
「class="btn-bb」と「class="btn-rb」でボーダーデザイン。
「class="btn-bs-gaibu」でミニボタン。
- <a class="btn-bs-gaibu" href="ここにURL">外部リンク</a></p></p>
ラベル
lbl-red,lbl-pink,lbl-orange,lbl-green,lbl-blue,lbl-purple,lbl-grey
推奨 オススメ そこそこ ぼちぼち まあまあ うーん がっかり
lbl-red-off,lbl-pink-off,lbl-orange-off,lbl-green-off,lbl-blue-off,lbl-purple-off,lbl-grey-off
推奨 オススメ そこそこ ぼちぼち まあまあ うーん がっかり
注)アドオンは使えない。スタイルを設定したいテキストを<span>で囲む。
- <span class="lbl-red"></span>
- <span class="lbl-red-off"></span>
テーブル
table-simple(シンプルな上見出し)
規格 | 容量 | 年代 |
---|---|---|
SD | ~2GB | 2000 |
SDXC | ~2TB | 2010 |
注)アドオンは使えない。下記のコードをHTMLに直書きする。
- <table class="table-simple"><tbody><tr>
- <th></th>
- <th></th>
- </tr>
- <tr>
- <td></td>
- <td></td>
- </tr></tbody></table>
table-cross(クロス見出し)
規格 | 容量 | 年代 |
SD | ~2GB | 2000 |
SDXC | ~2TB | 2010 |
注)アドオンは使えない。下記のコードをHTMLに直書きする。
- <table class="table-cross"><tbody><tr>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- </tr></tbody></table>
table-left(左見出し)
規格 | 容量 | 年代 |
SD | ~2GB | 2000 |
SDXC | ~2TB | 2010 |
注)アドオンは使えない。下記のコードをHTMLに直書きする。
- <table class="table-left"><tbody><tr>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- </tr></tbody></table>
横スクロール
規格 | 容量 |
---|---|
SD | ~2GB |
SDXC | ~2TB |
注)アドオンは使えない。下記のコードをHTMLに直書きする。
- <div class="table-scroll js-scrollable">
- <table class="table-simple" style="width:800px"><tbody><tr>
- <th width="400px"></th>
- <th width="400px"></th>
- </tr>
- <tr>
- <td></td>
- <td></td>
- </tr></tbody></table>
- </div>
《解説》
- <div class="table-scroll js-scrollable">でtableタグを囲む。js-scrollableはスクロールヒントの表示用。
- th(又はtd)タグを固定幅にする。はてなブログでは合計が650px(列数によっては690pxまでOK?)を超えると、PC画面でも横スクロールになる。
- tableタグを固定幅にする。th(又はtd)の合計幅にそろえる。※スマホ画面で横スクロールさせるために必要な設定
画像
img-shadow(画像に影で縁取り)
注)アドオンは使えない。画像を掲載したら、HTML編集で<p>タグに「class="img-shadow"」を設定する。
img-waku(画像に枠で縁取り)
注)アドオンは使えない。画像を掲載したら、HTML編集で<p>タグに「class="img-waku"」を設定する。
行間調整
gyoukan-t(上部に50pxあけ)
上の文章
この文章にgyoukan-tを設定
下の文章
gyoukan-ts(上部をややツメ)
上の文章
この文章にgyoukan-tsを設定
下の文章
gyoukan-both(上下に50pxあけ)
上の文章
この文章にgyoukan-bothを設定
下の文章
画像ギャラリー
ショーケース風
アドオンは使えないのでHTMLに直書きする。画像は縦幅160pxに最適化している。
- <ul><li class="showcase-list">
- <div class="showcase-pict"><a href="★★ここに商品リンク★★" target="_blank"><img src="★★ここに画像リンク★★" border="0" /></a></div>
- <a href="★★ここに商品リンク★★" target="_blank" class="showcase-btn-a">amazon</a>
- <a href="★★ここに楽天リンク★★" target="_blank" class="showcase-btn-r">楽天</a>
- <a href="★★ここにヤフーリンク★★" target="_blank" class="showcase-btn-y">Yahoo</a>
- </li></ul>
<li></li>の部分はプラグイン等で取得すると便利。
Amazonのみのシンプルバージョン。上記コードから楽天とヤフーを削除するのみ。
Swiper(スワイパー)
Swiperを使った画像ギャラリー。アドオンは使えないのでHTMLに直書きする。
画像は縦幅160pxに最適化している。
【重要】画像がリンク付きの場合、画像末尾の</a>タグは取ること!
- <!-- Swiper START -->
- <div class="swiper-container"><!-- メイン表示部分 -->
- <div class="swiper-wrapper"><!-- 各スライド -->
- <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
- <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
- <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
- <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
- </div>
- <div class="swiper-button-prev"> </div>
- <div class="swiper-button-next"> </div>
- <div class="swiper-pagination"> </div>
- </div>
- <script>// <![CDATA[
- var mySwiper = new Swiper('.swiper-container', { slidesPerView: 3, loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true }, breakpoints:{543:{ slidesPerView:2}} });
- // ]]></script>
- <!-- Swiper END -->
ブログカード(はてなブログ風)
WordPressにはてなブログ風のリンクカードを設置する。詳しくは下記リンクにて。サンプルCSSをカスタマイズし、ボックスの横幅を470pxに、inline-heightでテキストの行間を1.6em程度に設定すると、はてな風の見た目により近づきます。
ブックマークレットをドラッグ・アンド・ドロップで登録し、サンプルCSSをコピペするだけで使えるので簡単かつ便利!
以上