settings

このページは、共通のUserCSSを設定するためのページです。

こんなことができます。

左寄せ

センタリング

右寄せ

画像は自動的にセンタリングされます。

https://gyazo.com/31a2433969e0f7e1043b96473b11865a

画像は等間隔に並べることができます。

code:style.css

.deco-\# {

padding: 0.1em 0.2em 0.1em 0.2em;

}

.deco-\! { /* 重要な部分は!を付ける */

padding: 0.1em 0.2em 0.1em 0.2em;

}

.deco-\% {

padding: 0.1em 0.2em 0.1em 0.2em;

}

.deco-\~ {

}

/* 中央寄せ */

.deco-\. {

position: absolute;

width: 100%;

text-align: center;

}

/* 右寄せ */

.deco-\> {

position: absolute;

width: 100%;

text-align: right;

}

/* 左寄せ */

.deco-\< {

position: absolute;

width: 100%;

text-align: left;

}

/* なぜかうまく動作しない...orz */

/* 図番号のつくキャプション記法 */

.deco-\+:before {

content: attr(data-caption);

}

/* 画像のセンタリング */

.line img.image {

display: block;

margin: 0 auto;

}

/* 画像を等間隔に並べたい */

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

code: javascript

javascript:(function() {

return;

}

const isKindle = window.location.href.indexOf('-ebook') > 0;

if (title === null) {

return;

}

if (asin === null) {

return;

}

if (image === null) {

return;

}

const titleStr = encodeURIComponent(title.textContent.trim());

+ "\n"

+ "#書籍"

window.open(project + titleStr +'?body=' + bodyStr);

})();

code:script.js

// 対象のエレメントが指定のクラス名を持つか

const isClassOf = (elem, className) => {

const elemClassName = elem.getAttribute('class')

if (elemClassName) {

return elem.getAttribute('class').split(' ').some(c => c.match(new RegExp(className)))

}

return false

}

// 対象のエレメントがカーソルのある行かどうか

const isInCursorLine = elem => {

let parent = elem.parentNode

while (!isClassOf(parent, 'line')) {

parent = parent.parentNode

}

if (isClassOf(parent, 'cursor-line')) {

return true

}

return false

}

// 図のキャプションに図番号を振る

const setFigureNumber = () => {

return index

}

return index + 1;

})

}

setFigureNumber()

document.addEventListener('keydown', setFigureNumber)

document.addEventListener('click', setFigureNumber)

ピン止め

code:style.css

.grid li.page-list-item a .pin {

background-color: transparent;

background-image: none;

}

.grid li.page-list-item a .pin::after {

content: '\f08d';

font-family: "Font Awesome 5 Free";

font-weight: 900;

font-size: 20px;

bottom: 0;

display: inline-block;

transform: rotate(35deg);

}

ハッシュタグの表示

code:style.css

display: inline-block;

padding: 2px 8px;

margin: 0 8px 10px 0;

font-size: 0.8em;

border-radius: 3px;

-webkit-transform: scale(1);

transform: scale(1);

}

}

code:style.css

/* 検索ボタンを消す */

.navbar .kamon {

display: none;

}

/* 新規ボタンを消す */

.new-button {

visibility: hidden;

}

code: style.css

/* テーブルのセルをわかりやすくする */

.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }

.table-block table tr td:nth-child(odd) { padding: .1em; background-color: rgba(0,0,0,0.04) }

.table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */

.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */

.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }

code: style.css

/* 二重括弧による強調をマーカーっぽくする */

}