settings
https://gyazo.com/de3fa5e17658ccb2c384fa66124b9450
思ったように動かないときは・・・ふて寝。
ポートフォリオ公開のための CSS 特別仕様
記載、情報整理、情報収集、思考のための設定　と　見せるための設定は異なる。
公開時は　ReadOnlyMode を使う！
code:style.css
@import url("https://scrapbox.io/api/code/StudioSpica/settings/ReadOnlyMode.css");
編集時は、myPage(Green)でRUNすれば、制限解錠モードになる！
◆ ページ内編集領域でのマウスイベントは無効にする。
ただしリンクとハッシュタグは残す。　閲覧者のリンクジャンプは妨げない。
また、画像の拡大（Gyazo)も有効にしておく。　
重要　コードブロック内もマウスイベント効くようにしておかないと・・・settingで変更できなくなる。　（泣）
これを残しておけば、マウスイベントが効かないだけで、キーボードイベントは活きてるから、コードブロック内から出て編集できる（裏技？）。
code:style.css
.editor {
pointer-events: none;
}
.editor a.link,
.editor .line code,
atype="hashTag",
.editor .line span.code-block,
.image {
pointer-events: auto;
}
code:style.css
.page {
background-color: #666;
}
◆ トップページでピン留めアイコン付けない　 一覧のアイコンの右上に折り返したような三角がつくのをやめる。
code:style.css
div .pin {
background: none !important; /*既存の端を折ったスタイルの無効化*/
}
◆ PIN留めしてないページをトップに出さない。　関連ページリスト（末尾）の方は表示あり！
これで、公開ページと非公開ページを分けることになる。
code:style.css
.page-list .grid li:not(.pin) {
display: none;
}
➢ トップページで、ピン留めしたものとしてないもの　段を分けて表示。
UnPin ページを表示したときだけ働く。
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code:ReadOnlyMode.css
.page-list .grid li:not(.pin) {
display: none;
}
.navbar-form {
display: none;
}
.new-button {
display: none;
}
.full-content-modal .modal-body .toolbar {
display: none;
}
.quick-launch .right-box {
display: none;
}
.quick-launch .flex-box {
display: none;
}
.kamon {
display: none;
}
.page-menu .tool-btn {
display: auto;
}
#translation-menu,
/*　#page-edit-menu,　*/
#page-info-menu {
display: none;
}
.editor {
pointer-events: none;
}
◆ ページソートメニュー ランダムジャンプ　を表示しない。
code:style.css
.page-sort-menu
{
display: none;
}
a.random-jump-button.tool-btn.link-btn
{
display: none;
}
◆ 翻訳ボタンを無しにする。
code:style.css
#translation-menu,
.page-list-translation-menu .tool-btn {
display: none;
}
◆ ページメニューを表示しない。
code:style.css
.page-menu {
display: none;
}
◆ ナビバーすら出さない！
code:style.css
.navbar-form {
display: none;
}
.new-button {
display: none;
}
.kamon {
display: none;
}
◆ 外部リンク表示しない。
code:style.css
div.project-links-1-hop {
display: none;
}
◆ ２ホップリンクを消す
code:style.css
.links-2-hop {
display: none;
}
◆ 未定義リンク先（末尾のNewLinkｓ）を表示しない
code:style.css
.empy-links {
display: none;
}
◆ 関連リンクサーチバーは表示しない
code:style.css
.related-page-list .toolbar .related-page-list-search {
display: none !important;
}
◆ プロジェクトのタイトル小さめにしとく方がいいか？
code:style.css
.quick-launch .project-home .title {
font-size: 12px;
line-height: 1.5;
max-width: none;
}
.quick-launch .project-home, .quick-launch .project-home .title {
overflow: visible;
}
◆ 検索ボックスを右側へずらす。中央にドカンと出すのをやめる。
code:style.css
.navbar-form {
position: absolute;
right: 0;
margin-right: 60px;
}
◆ New Page ボタン　サーチ虫眼鏡アイコン　を薄っすらと
code:style.css
a.new-button,
.btn-search {
opacity: 0.15;
}
◆ テロメアを表示しない。
code:style.css
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border {
border-width: 0 0 0 0px !important;
}
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread {
border-width: 0 0 0 0px !important;
}
◆ Scrapboxでページ横幅を広げる　ウィンドウ枠に追従する
code:style.css
.col-page {
max-width: none;
}
.col-page-side {
width: 0;
}
➢ エントリページリストのタイトルを小さく表示。
code:style.css
.grid li.page-list-item a .header .title {
font-size: 12px;
}
'Takao' いろはにほへと　　mgMg　　αβγμ　0123　　全角ローマ字が良いので！
◆ 読みやすいフォントに変える。 　フォントよって日本語の斜体指定が効かない場合がある。
code:style.css
.editor, .stream, .line .section-0 {
font-family: 'Takao pゴシック','Noto Sans JP','Noto Sans CJK JP',sans-serif;
line-height:2.1em !important; /* やや広めの行間 */
}
◆ 中央に拡大して配置して画像に影枠をつける ギャラリー展示用
サイズ調整　 横画像用　(# 　　 縦画像用　(&
特殊用途の画像装飾なので、2文字で指定している。
・ FF14SSの原画サイズ　　2560×1440 px
・ 縦画像がスクロール無しで全面見えるように縮小する　＝　だいたい　幅 42％
・ 横画像が同じスケールで見えるように　2560：1440＝ｘ：42　　　ｘ＝74.6
◆ 横画像のサイズ調整 75%幅
code:style.css
.line class="deco-\( deco-#" img.image {
display: block;
margin: 0 auto;
box-shadow: 0px 0px 30px 0px #000;
max-height: none !important;
max-width: 75% !important;
}
◆ 縦画像のサイズ調整　　42％幅
code:style.css
.line class="deco-\( deco-\&" img.image {
display: block;
margin: 0 auto;
box-shadow: 0px 0px 30px 0px #000;
max-height: none !important;
max-width: 42% !important;
}
◆囲んだ範囲をBOX表示してセンターに出す。
ボックスの中に書き込む
code:style.css
.line .deco > .empty-char-index {
display: none;
}
@media screen and (min-width: 1092px) {
:root {
--col-page-width: 960px;
--wordbox-width: calc(var(--col-page-width) * 0.7);
}
}
@media screen and (min-width: 768px) and (max-width: 1091px) {
:root {
--col-page-width: calc(100vw - 132px);
--wordbox-width: calc(var(--col-page-width) * 0.7);
}
}
@media screen and (max-width: 767px) {
:root {
--wordbox-width: 90%;
}
}
.line class^="deco-\, deco-\+" {
display: block;
width: var(--wordbox-width);
max-width: 100%;
border: 2px solid rgba(255,255,255,0.4);
/* box-shadow: 2px 2px 2px rgba(0,0,0,0.4); */
margin: 10px auto;
padding: 10px;
text-align: center;
}
タイトルを上部に固定。プロジェクトのトップページでも有効化される。
code:style.css
@media (min-width: 1200px) {
/* PC版（長い方） */
div.left-box {
display: flex;
align-items: center;
position: fixed;
top: 0;
margin-left: 52px;
z-index: 1000;
flex-wrap: nowrap;
width: 268px;
}
a.navbar-brand {
/* justify-content: flex-end;*/
}
}
@media (min-width: 768px) and (max-width: 1199.9px) {
/* PC版（狭いほう） */
@media (min-width: 992px) {
a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 90px;
}
}
@media (max-width: 991.9px) {
a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 74px;
}
}
}
@media (max-width: 768px) {
/* スマホ版 */
ul.global-menu-for-user {
margin: 0 0 0 auto;
right: 0;
}
a.project-home {
margin-left: 34px;
width: calc((100% - 30px - 110px));
}
div.expandable-menu {
/* .expandable-menuが被らないようにずらす */
top: 40px;
max-width: 100%;
}
}
@media (max-width: 1199.9px) {
/* PC版（狭いほう）とスマホ版 */
a.project-home {
position: fixed;
top: 0;
z-index: 1000;
text-align: left;
}
}
セクション区切りは、空行に続く先頭文字 で定義される。
◆ セクション区切りに線を引く
code:style.css
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: 108%;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-top: 1px lightgray solid;
}
◆ 行頭の中黒：ビュレットマークを消す （インデントは有効！）
code:style.css
.line .dot {
display: none !important;
}
◆ タグに青枠つける TAG
code:style.css
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #EEE;
font-size: 0.9em;
border: 1px solid #00F;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
◆ 画像の配置
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.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) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
◆ 行の右寄せとセンタリング。　 次行がオーバーラップする副作用あり。
code:style.css
/* 中央寄せ */
.deco-\% {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
/* 左寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: left;
}
◆ プレゼンモードでのページタイトルを小さく
code:style.css
.presentation .line.section-title {
color: #309940; /* green */
font-size: 50px !important;
}
◆ 　引用ブロック　　（プレゼンモードではタイトル行に使っている）
code:style.css
.line .quote {
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
display: block;
border-left: solid 0px #a0a0a0;　　　　 /*　ブロック左の線を付けない　*/
padding-left: 4px;
}
◆ 付箋 　　　　付箋をつける！
code:style.css
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 30%; /* 長くてもWindow幅の４０％まで */
padding: .9rem 2rem;
border-right: 1rem solid #04B2D9;
background-color: #f9f8f6;
font-size: 0.8em; /* 付箋の文字は本文より少し小さい */
color: black;
line-height: 1.5em; /* 狭めの行間 */
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } }
/* 太字記法との組み合わせでスタイルを変える場合 */
/* カラーパレット→ https://color.adobe.com/Softie-color-theme-2233237/ */
.line .level-2 .deco-\~ { border-right-color: #009175 }
.line .level-3 .deco-\~ { border-right-color: #EFBB33 }
.line .level-4 .deco-\~ { border-right-color: #F23E2E }
/* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
◆ 張り込み画像に影枠をつける
code:style.css
.deco-\/ img{
box-shadow: 0px 0px 30px 0px #fff;
}
code:style.css
.line class="deco-\/ deco-\#" img.image {
display: block;
box-shadow: 0px 0px 30px 0px #000;
max-height: none !important;
max-width: 90.0% !important;
}
code:style.css
.line class="deco-\/ deco-\&" img.image {
display: block;
box-shadow: 0px 0px 30px 0px #000;
max-height: none !important;
max-width: 51.0% !important;
}
◆ 注釈を付けるための小さい付箋
ルビの表記と併用するとよいかも知れない。
code:style.css
.line class="deco-\> deco-\<" {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
font-size: 1.1rem;
min-width: 20ch;
max-width: 25ch;
padding: 0.08rem 0.0rem 0.0rem 2.5rem;
border-right: 0.7rem solid #9AD49A;
background-color: #DFEADF;
transform: rotate(-0.8deg);
box-shadow: 4px 1px 3px rgba(0,0,0,.2)
}
◆ ルビ 改訂版
ルビがNewLinks に扱われてしまうふ ぐ あ い不具合があった。 　
他の装飾に割り込んで書くことができる。
本文の文字列位置やルビ文字列の幅はスペースを挟むことで調整する。
ルビひょうじ表示を も じ文字おく送りなしのうえ つ上付けちい小さい も じ文字で じつげん実 現 している！
code:style.css
:not(.cursor-line) > .text class="deco-\(" {
/* display: block; */
margin-top: -4px;
/*width: 50px;*/
height: 14px;
font-size: 10px !important; /* ブラウザの最小表示フォントサイズに制限を受ける */
line-height: 12px;
padding: 0px 1px;
white-space: pre; /* 連続する半角スペース、タブ、改行をそのまま表示し自動的な折り返しは行わない。 */
justify-content: space-around;
position: absolute;
z-index: 101;
}