settings
https://gyazo.com/a26d31b9a34eb09151bbf008cce4bd8e
Porin.iconCSSのカスタマイズ用ページ
使いながら少しずつ改良を重ね中(Last Updated 2018/12)Porin.icon
使用上の注意
Porin.icon自分の環境に最適化しているのでデバイスによってはいびつな表示になります
◆目次
▼Settingページの説明
▼カスタマイズ内容
https://gyazo.com/ea38e8d40023a4d62a667463b859b1d4
Settingページの説明
◆作成する際参考にしたページ
◆このページのCSSを他ののScrapboxプロジェクトでも適用するには？
▼参考にしたページ
▼設定方法
①「settings」というタイトルのページを作成する]
このページと同様にScrapboxにsettingページを作成する
②スタイルシートをインポートする
「style.css」というタイトルのコードブロックを作り、以下のように記載
"インポートしたいスタイルシートのURL"」部分を「"/api/code/Porin-Room/settings/style.css"」にするとこのページのcssをインポートできる
code:style.css
@import "インポートしたいスタイルシートのURL";
③ページを再読み込み
あとはページを再読み込みすれば、CSSが適用されて同じデザインが使える...はず
その他の詳しい内容
https://gyazo.com/ea38e8d40023a4d62a667463b859b1d4
2. カスタマイズ内容
Porin.iconリンクから該当箇所に飛べる
Porin.iconここからカスタマイズ用コードの始まりだよ〜
1. コードブロック
◆コードブロックに行番号を表示
code:style.css
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline
}
body:not(.presentation) .code-block code > span:not(class)::before { content: counter(codeline);
position: absolute;
display: inline-block;
left: -4rem;
z-index: 10;
min-width: 50px;
text-align: right;
vertical-align: bottom;
}
/* 行番号の色 */
/* カーソル選択時の行番号の色 */
.cursor-line .code-block code > span:not(class)::before { font-weight: bolder ;
}
◆コードブロックの背景や文字
追記
(2018/8/6)こちらを参考に、ちょっと手直しした
code: style.css
/* コード全体のCSS */
.line code {
}
.line span.code-block {
background-color: black;
/* code blockのフォントを小さくする設定 */
line-height: 1.4;
font-size: 100%;
}
.page-list-item .description code,
.line code,
.line span.code-block {
font-family: "MyricaM M", "Ricty Discord", "Ricty Diminished Discord", "Ricty", "Ricty Diminished", monospace ;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
code:style.css
/* コードブロックのタイトルの文字色 */
.line span.code-block .code-block-start { color: #342d9c; } code:style.css
/* 各セレクタやプロパティの色を変更 */
.hljs-title,
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link,
.hljs-attribute {
}
.hljs,
.hljs-subst {
}
.hljs-name,
.hljs-meta {
}
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable,
.hljs-params,
.hljs-built_in {
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
}
.hljs-class .hljs-title,
.hljs-literal,
.hljs-number {
}
.hljs-emphasis {
font-style: italic;
}
.hljs-selector-id,
.hljs-selector-attr,
.hljs-keyword,
.hljs-selector-pseudo {
}
.hljs-selector-class,
.hljs-regexp {
}
◆キャレット（カーソル）の色を変える
Porin.iconコードブロックをダークモードっぽくしたら、カーソルを見失ってしまう事案が発生したので色をつけることに
code:style.css
/* デフォルトのままだと背景を暗くしたコードブロック内でカーソルが見えなくなるので、色や太さを変更 */
.cursor { width: 3px; background-color: #ccc } ▼こんな感じ
https://gyazo.com/b8ae139f112b2b216adce60ca7ae3288
Porin.icon黒い背景でもカーソルが見えるように
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
2. セリフ用の吹き出し
◆吹き出しの枠
code:style.css
.deco-\{, .deco-\} {
font-weight: bold;
padding: 1.2rem;
border-radius: .5rem;
margin: auto 1rem;
display: inline-block;
max-width: calc(100% - 100px); /* 長いセリフの折り返しをいい感じにする */
vertical-align: top;
}
/* 吹き出し内のリンク色 */
.deco-\{ a,
.deco-\} a {
}
/* スマホ画面 */
@media screen and (max-width: 768px) {
.deco-\{, .deco-\} {
padding: 1rem;
}
}
◆右吹き出しのツノ
code:style.css
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-200%) translateY(calc(1em - 0%));
width: 0;
content: "";
border-width: 0 0 .6em .6em;
border-style: solid;
}
◆左吹き出しのツノ
code:style.css
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(100%) translateY(calc(2rem - 0%));
width: 0;
content: "";
border-width: 0 .6em .6em 0;
border-style: solid;
}
▼こんな感じに
Porin.icon 右吹き出しだよん
左吹き出しPorin.icon
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
強調文字
◆太字の表示
code:style.css
/* 太字の太さを変更 */
font-weight: bold;
}
/* 通常太字 */
.line strong:not(class) { }
/* 小見出し用 */
.deco-\# {
font-weight: bold;
font-size: 110%;
border-bottom: solid 2px #ccc; padding-bottom: .2rem;
}
/* アスタリスク4つの強調文字 */
.line strong.level-4 {
font-weight: bold;
line-height: 2;
border-bottom: solid .2rem #ccc; padding: 1.5rem;
}
/* アスタリスク4つの強調文字 */
.line strong.level-2 {
font-size: 1.3em;
background: linear-gradient( transparent 90%, #AD6464 0% ); line-height: 1.5;
padding: .8rem;
padding-left: 1rem;
}
/* スマホ表示を調整 */
@media screen and (max-width: 768px) {
.line strong.level-4 {
font-size: 130%;
line-height: 1.8;
font-weight: bold;
padding: .7rem;
}
.line strong.level-2 {
font-size: 110%;
font-weight: bold;
line-height: 2;
}
.deco-\# {
font-size: 100%;
}
}
▼表示結果と記法
アスタリスク4つ
書き方：[**** アスタリスク4つ]
表示：アスタリスク4つ
アスタリスク二つ
書き方：[** アスタリスク2つ]
表示：アスタリスク2つ
小見出し用
書き方[# 小見出し]
表示：小見出し
通常の太字
書き方：[[通常の太字]]
表示：通常の太字
◆重要な部分を強調
code:style.css
/* 赤背景に白文字 */
.deco-\! {
border-radius: .4em;
padding: .3em;
border-bottom: none;
}
/* 赤線 */
.deco-\% {
font-weight: bold;
background: linear-gradient( transparent 65%, #ee6666 0% ) }
▼表示結果と記法
赤背景に白文字
書き方[! 赤背景に白文字]
表示：赤背景に白文字
黒文字に赤線
書き方：[% 黒文字に赤線]
表示：黒太字に赤線
◆タイトル
code:style.css
.line.line-title {
font-weight: bold;
border-bottom: solid 3px #ccc; line-height: 1.4;
color: white;
}
.line.line-title .text {
font-size: 1.2em;
padding-bottom: .5em;
}
/* スマホ表示用に調整 */
@media screen and (max-width: 670px) {
.line.line-title .text {
font-size: 1.8rem;
}
}
▼こんな感じになる
https://gyazo.com/4f36d4cee70988ae1e0d7596b5ebaada
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
3. 基本の文字表示
◆通常テキスト
code:style.css
/* フォント */
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 100 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 200 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 300 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 400 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Bold") ;
font-weight: bold ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 100 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 200 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 300 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 400 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Bold") ;
font-weight: bold ;
}
@font-face {
font-family: "Apple Fallback" ;
src: local("-apple-system"), local("BlinkMacSystemFont") ;
}
@font-face {
font-family: "Windows Fallback" ;
src: local("Meiryo");
}
@font-face {
font-family: "Unix Fallback" ;
src: local("TakaoPGothic"),local("VL PGothic") ;
}
html, body, .editor, .grid li {
font-family:
"YakuHanJP", "Noto Sans CJK JP", "Source Hans Sans Japanese", "Yu Gothic", "YuGothic",
"Noto Sans CJK", "Source Hans Sans", "Apple Fallback", "Windows Fallback", "Unix Fallback", sans-serif ;
-moz-font-feature-settings: "lnum", "pnum" ,"plat" ;
-webkit-font-feature-settings: "lnum", "pnum", "plat" ;
font-feature-settings: "lnum", "pnum", "plat" ;
}
code:style.css
/* PC表示ではデフォルトより大きめに表示 */
.line {
font-size: 110%;
line-height: 1.7;
color: white;
}
/* スマホ表示ではより小さめに表示する */
@media screen and (max-width: 670px) {
.line {
font-size: 100%;
}
.line span.code-block { font-size: 80%; }
body:not(.presentation) .code-block code > span:not(class)::before { left: -4em;
}
}
◆リンク
code:style.css
/* 空のリンクの色を通常リンクと同じにする */
.line a.empty-page-link {
}
/* 別タブ開くリンクをわかりやすくする */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block
}
/* ページ内リンクには別のアイコンをつける */
.line a.page-link {
}
.line a.page-link::before {
font-family:'FontAwesome';
content: ' \f0f6';
display: inline-block;
margin-right: .2rem;
}
▼こんな感じ
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
4. 各記法のアレンジ
◆リスト
code:style.css
.line .indent-mark .dot {
border-radius : 1px ;
background-color: transparent ;
border: 3px double #ccc ; }
◆引用文
code:style.css
.line .quote {
font-style: normal;
padding: .1rem 1em;
}
こんな感じに表示される
◆テーブル記法
▼テーブル記法とは？
code:style.css
.table-block-row .cell:nth-child(even) {
color: black;
background-color: gray;
}
.table-block-row .cell:nth-child(odd) {
color: black;
}
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
5. 画像
◆画像の周りに影をつける
▼参考
▼コード
code:style.css
.deco-\| img{
box-shadow: 0px 0px 10px 0px #000; }
▼書き方
[| [画像URL]]
▼表示
Before
https://gyazo.com/c7828159ee4d92847d8df20c8a02043b
After
https://gyazo.com/c7828159ee4d92847d8df20c8a02043b
◆アイコンを円でくり抜く
code:style.css
.icon {
border-radius: 50%;
}
Porin.iconアイコンの枠が四角いのずっと気になってたから話すアイコンぽくしたった
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
6. 背景
▼コード
code:style.css
Porin.icon背景色をデフォルトから変更
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
7. ヘッダー
◆ヘッダーメニューを固定する
code:style.css
/* PC画面 */
@media screen and (min-height: 600px) and (min-width: 768px) {
.app:not(.presentation) {
padding-top: 90px;
padding-right: 0 !important
}
.app:not(.presentation) .page-menu {
position: fixed;
top: 90px
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset
}
.dropdown.open .dropdown-menu {
position: absolute;
left: auto;
top: auto;
max-height: calc(100vh - 100px);
overflow-y: auto
}
.dropdown.open .dropdown-menu.global-menu {
left: 0;
top: 54px
}
.page-menu .dropdown.open .dropdown-menu {
position:
absolute;
top: 0
}
}
/* スマホ向け */
@media screen and (orientation: portrait) and (min-height: 600px) and (max-width: 768px) {
.app:not(.presentation) { padding-top: 90px }
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset
}
.dropdown.open .dropdown-menu {
max-height: calc(100vh - 130px);
overflow-y: auto
}
}
◆ヘッダーの見た目
code:style.css
/* 不要な要素を隠す */
a.new-button {
display: none;
}
.navbar-default {
}
https://gyazo.com/df6f63b2c228614b9f42903f61208bde
8. トップページ
◆トップページのレイアウト
code:style.css
/* 不要なメニューを消す */
input.grid-size-range {
display: none;
}
/* タイトル */
.quick-launch .project-home {
border-radius: 0;
}
a.project-home {
}
/* ページカード */
.page-list .grid li {
width: 18rem;
height: 18rem;
margin: 0 2.5rem 2.5rem 0;
}
.grid li.page-list-item a {
border-radius: .5rem;
border: solid #555 .1rem; }
/* ページタイトル */
.grid li.page-list-item a .header {
border-top: none;
padding: 1.3rem 1.5rem;
color: white;
}
.grid li.page-list-item a .title {
height: 8rem;
font-weight: bold;
}
font-weight: bold;
}
/* サムネ画像をフィットさせる */
.grid li.page-list-item a .icon {
position: relative;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 90px;
max-width: 90%;
vertical-align: middle;
border-radius: 5px;
position: absolute;
top: calc(50% + 40px);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* スマホ画面 */
@media screen and (max-width: 768px) {
.page-list .grid li {
width: 15.8rem;
height: 15.8rem;
margin: 0 .7rem 1rem 0;
}
.grid li.page-list-item a .header {
padding: 1rem .8rem;
}
.grid li.page-list-item a .title {
height: 5.3rem;
line-height: 1.3
}
.grid li.page-list-item a .icon img {
top: calc(100% + 3.3rem);
}
}
▼表示はこんな感じに
https://gyazo.com/019a09d4c22c967ffdc978feb82ea22a
◆ピンアイテムの表示を変更
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: 'FontAwesome';
font-size: 20px;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
}
◆ページカードをホバー時の色を変える
code:style.css
/* マウスを乗せた時 */
.grid li.page-list-item a .hover {
}
▼表示はこんな感じ
https://gyazo.com/7cda7e531dd650fc2ee2f1187cb16d60
（了）
Porin.icon読んでて気づいたこと、間違いの指摘、もっとこういう方法もあるよなどのアドバイス、その他感想あったら、気軽に@ijumihoのDMなどで連絡くださいな〜 Porin.icon最後に。アフィよりも投げ銭の方が好き派なのでKyashの投げ銭リンクを貼り付けています
Kyashについてはこちら
▼ 39円送金してThank Youを送れます
Porin.icon送金すると可愛いThank Youアニメーションが見れるよ
ここからKyashの送金画面に飛べます
https://gyazo.com/577c6c4bed5072aaaa19e788d6836ad5
Porin.iconここから送金すると見れるThank youアニメーション可愛いです。ほっこり癒されます
▼QRコード（Kyashアプリで読み込んでね）
Porin.icon39以外を投げたいよという方はこちらから
https://gyazo.com/df6e75970533e6c281b196aff4ba4ca9