ねかつちう。

お金や節約に敏感な20代30代のための物欲系雑記ブログ

(備忘)独自CSSの一覧

h3(大見出し)

h4(中見出し)

h5(小見出し)

仕切り線


テキスト

注)アドオンは使えない。HTMLに直書きする。

<span class="marker-r"></span>

マーカーで強調します。

<span class="marker-y"></span>

マーカーで強調します。

<span class="marker-p"></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"」を設定する。

  1. p.hatena {
  2. testdayokoremo
  3. .testdayo
  4. }

アコーディオンボックス

ボタンを押して展開&復元できるアコーディオンボックス。

ボタンをクリックすると

アコーディオンが広がり

フルサイズに展開します

もう一度ボタンをクリックすると

元のサイズに戻ります

デフォルト状態の高さ、グラデーション、ボタンのアイコン(Fontawesome)などはCSSで調整可能です。

注)アドオンは使えない。下記のコードを直接記述する。

  1. <div class="acc-wrap"><input id="acc-button" type="checkbox" /><label for="acc-button"></label>
  2. <div class="acc-text">
  3. ここにテキストを記述
  4. </div></div>

リスト

list-kihon(番号なしリスト)

  • 朝ごはん
  • 昼ごはん
  • 晩ごはん

注)アドオンは使えない。リストを設定したら、HTML編集で<ul>タグに「class="list-kihon"」を設定する。「class="list-kihon ul-short"」とすると横幅を約半分にできる(PC表示のみ)。

  • 横幅を短く

nlist-kihon(番号付きリスト)

  1. 朝ごはん
  2. 昼ごはん
  3. 晩ごはん

注)アドオンは使えない。番号付きリストを設定したら、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-search"」や「class="btn-b-gaibu"」でアイコン付き。

こちらで詳しく こちらで詳しく

「class="btn-bb」と「class="btn-rb」でボーダーデザイン。

こちらで詳しく こちらで詳しく

「class="btn-bs-gaibu」でミニボタン。

外部リンク

  1. <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>で囲む。

  1. <span class="lbl-red"></span>
  2. <span class="lbl-red-off"></span>

テーブル

table-simple(シンプルな上見出し)

規格 容量 年代
SD ~2GB 2000
SDXC ~2TB 2010

注)アドオンは使えない。下記のコードをHTMLに直書きする。

  1. <table class="table-simple"><tbody><tr>
  2. <th></th>
  3. <th></th>
  4. </tr>
  5. <tr>
  6. <td></td>
  7. <td></td>
  8. </tr></tbody></table> 

table-cross(クロス見出し)

規格 容量 年代
SD ~2GB 2000
SDXC ~2TB 2010

注)アドオンは使えない。下記のコードをHTMLに直書きする。

  1. <table class="table-cross"><tbody><tr>
  2. <td></td>
  3. <td></td>
  4. </tr>
  5. <tr>
  6. <td></td>
  7. <td></td>
  8. </tr></tbody></table> 

table-left(左見出し)

規格 容量 年代
SD ~2GB 2000
SDXC ~2TB 2010

注)アドオンは使えない。下記のコードをHTMLに直書きする。

  1. <table class="table-left"><tbody><tr>
  2. <td></td>
  3. <td></td>
  4. </tr>
  5. <tr>
  6. <td></td>
  7. <td></td>
  8. </tr></tbody></table> 

横スクロール

規格 容量
SD ~2GB
SDXC ~2TB

注)アドオンは使えない。下記のコードをHTMLに直書きする。

  1. <div class="table-scroll js-scrollable">
  2. <table class="table-simple" style="width:800px"><tbody><tr>
  3. <th width="400px"></th>
  4. <th width="400px"></th>
  5. </tr>
  6. <tr>
  7. <td></td>
  8. <td></td>
  9. </tr></tbody></table> 
  10. </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"」を設定する。

f:id:nekatsu:20190611052139p:plain

img-waku(画像に枠で縁取り)

注)アドオンは使えない。画像を掲載したら、HTML編集で<p>タグに「class="img-waku"」を設定する。

f:id:nekatsu:20190611052139p:plain

行間調整

gyoukan-t(上部に50pxあけ)

上の文章

この文章にgyoukan-tを設定

下の文章

gyoukan-ts(上部をややツメ)

上の文章

この文章にgyoukan-tsを設定

下の文章

gyoukan-both(上下に50pxあけ)

上の文章

この文章にgyoukan-bothを設定

下の文章

画像ギャラリー

ショーケース風

アドオンは使えないのでHTMLに直書きする。画像は縦幅160pxに最適化している。

  1. <ul><li class="showcase-list">
  2. <div class="showcase-pict"><a href="★★ここに商品リンク★★" target="_blank"><img src="★★ここに画像リンク★★" border="0" /></a></div>
  3. <a href="★★ここに商品リンク★★" target="_blank" class="showcase-btn-a">amazon</a>
  4. <a href="★★ここに楽天リンク★★" target="_blank" class="showcase-btn-r">楽天</a>
  5. <a href="★★ここにヤフーリンク★★" target="_blank" class="showcase-btn-y">Yahoo</a>
  6. </li></ul>

<li></li>の部分はプラグイン等で取得すると便利。

Amazonのみのシンプルバージョン。上記コードから楽天とヤフーを削除するのみ。

Swiper(スワイパー)

Swiperを使った画像ギャラリー。アドオンは使えないのでHTMLに直書きする。

画像は縦幅160pxに最適化している。

【重要】画像がリンク付きの場合、画像末尾の</a>タグは取ること!

  1. <!-- Swiper START -->
  2. <div class="swiper-container"><!-- メイン表示部分 -->
  3. <div class="swiper-wrapper"><!-- 各スライド -->
  4. <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
  5. <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
  6. <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
  7. <div class="swiper-slide">★★ここに画像★★<span class="lbl-swiper">mazon</span></a></div>
  8. </div>
  9. <div class="swiper-button-prev"> </div>
  10. <div class="swiper-button-next"> </div>
  11. <div class="swiper-pagination"> </div>
  12. </div>
  13. <script>// <![CDATA[
  14. 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}} });
  15. // ]]></script>
  16. <!-- Swiper END -->

ブログカード(はてなブログ風)

WordPressにはてなブログ風のリンクカードを設置する。詳しくは下記リンクにて。サンプルCSSをカスタマイズし、ボックスの横幅を470pxに、inline-heightでテキストの行間を1.6em程度に設定すると、はてな風の見た目により近づきます。

ブックマークレットをドラッグ・アンド・ドロップで登録し、サンプルCSSをコピペするだけで使えるので簡単かつ便利!

以上