settings
じぇねらる
code:style.css
/* 全体的な調整 */
body {
}
.text, .cell-text {
font-family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
}
.cell-text {
font-size: 88%;
}
.line {
font-size: 108%;
}
.page-list-item .description img.inline-icon { height: 100%; width: 100%; }
@media screen and (max-width: 670px) {
.line {
font-size: 100%;
}
}
.line a.page-link {
}
ナビゲーションバー
code:style.css
.navbar-default {
/* background-color: #336; */ }
バッジ風リンク
code:style.css
/* バッジ風リンク */
display: inline-block; min-width: 3.2em; border-radius: .2em;
padding-left: .5em; padding-right: .5em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF; text-decoration: none; }
ラベル風味ハッシュタグ
code:style.css
/* ＃で始まるタグをラベル風にする */
.deco-\# {
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.9em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
リンクにアイコン
code:style.css
/* 別タブ開くリンクをわかりやすくする
.line a.link:not(.icon)::before {
font-family:'Font Awesome 5 Free';
content: ' \f14c';
display: inline-block
}
*/
カーソルハイライト
code:style.css
/* カーソルのある行の背景色と下線を薄いグレーにする */
.cursor-line {
background-color: rgba(0, 100, 100, 0.10);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 100, 0.5);
}
引用記法
code:style.css
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'Font Awesome 5 Free'; content: '\f10d'; vertical-align: super } 吹き出し
code:style.css
/* 吹き出しの枠 */
.deco-\{, .deco-\} {
font-weight: 600;
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;
}
}
/* 右吹き出しのツノ */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-200%) translateY(calc(0.2em - 0%));
width: 0;
content: "";
border-width: 0 0 .6em .6em;
border-style: solid;
}
/* 左吹き出しのツノ */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(100%) translateY(calc(0.2rem - 0%));
width: 0;
content: "";
border-width: 0 .6em .6em 0;
border-style: solid;
}
.icon {
border-radius: 30%;
}
ページタイトル設定
code:style.css
/* タイトル */
.quick-launch .project-home {
border-radius: 0;
letter-spacing: 0.05em;
font-family: 'Righteous', sans-serif;
font-size: 180%;
font-weight: 400;
}
.quick-launch:hover .project-home:hover{
border-radius: 0;
}
a.project-home {
}
.line.line-title {
border-bottom: solid 2px #ccc; line-height: 1.4;
margin-bottom: .9em;
}
/* */
.line.line-title .text {
font-size: 1.2em;
padding-bottom: .5em;
font-family: Righteous, 'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
}
/* スマホ表示用に調整 */
@media screen and (max-width: 670px) {
.line.line-title .text {
font-size: 1.8rem;
}
}
強調・見出し
code:style.css
/* 太字の太さを変更 */
font-weight: 400;
}
/* 通常太字 */
background:linear-gradient(#ffffff 30%,#FDE42D 80%);
font-family: 'Righteous';
font-weight: 400;
}
/* 小見出し用 */
.deco-\! {
font-weight: bold;
font-size: 110%;
border-bottom: solid 2px #Fcc; padding-bottom: .2rem;
font-family: 'Righteous';
font-weight: 400;
}
/* アスタリスク4つの強調文字 */
.line strong.level-4 {
/* font-weight: bold; */
line-height: 3em;
border-bottom: solid .2rem #eee; padding: 1.5rem;
font-family: 'Righteous';
font-weight: 400;
}
/* アスタリスク2つの強調文字 */
.line strong.level-2 {
font-size: 1.3em;
border-left: solid .4rem #ddd; background: linear-gradient( transparent 90%, #F0D1C2 0% ); line-height: 3;
padding: .8rem;
padding-left: 1rem;
font-family: 'Righteous';
font-weight: 400;
}
/* スマホ表示を調整 */
@media screen and (max-width: 768px) {
.line strong.level-4 {
font-size: 120%;
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%;
}
}
◆ピンの表示を変更
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-size: 20px;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
}
*/
こういうやつ
code:style.css
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } } /* 太字記法との組み合わせでスタイルを変える場合 */
.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 }