settings
#HashTag #vue
https://gyazo.com/9d3277b23dcde2e013eadf16c075c8df
/help-jp/文字装飾記法
*や/だけでなく、!"#%&'()*+,-./{|}<>_~などの記号も使用できます
code:style.css
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Roboto');
body{
font-family: 'Roboto', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
font-feature-settings: "palt";
}
.line {
font-weight:100;
font-family: 'Roboto', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
font-feature-settings: "palt";
}
.deco-\! {
color: #ff0000;
}
.hidden-span {
color: transparent;
border-bottom: 2px solid red;
}
.deco-\# {
color: #eee;
margin-left: 20px;
border-left: 4px solid #5bc0de;
background-color: #eee;
display: block;
}
.deco-\#:hover{
color: #454545;
text-decoration: none;
}
.deco-\_{
display: inline-flex;
align-items: center;
text-decoration: none;
}
.deco-\_ img{
border-radius: 8px;
height: 64px;
width: 64px;
display: inline !important;
margin: 0 !important;
padding-top: 4px !important;
}
/* Bookmarkを含むアイテムを強調する */
ahref *="Bookmark" .header {
border-top: #43A047 solid 10px !important;
}
ahref *="Bookmark" {
border-left: solid 3px #43A047;
border-right: solid 3px #43A047;
border-bottom: solid 3px #43A047;
}
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
Heading7
Heading8
Heading9
Heading10
Heading4～10を変更
code:style.css
.level-4,
.level-5,
.level-6,
.level-7,
.level-8,
.level-9,
.level-10 {
line-height: 24px !important;
}
.level-4 > .deco-\*,
.level-5 > .deco-\*,
.level-6 > .deco-\*,
.level-7 > .deco-\*,
.level-8 > .deco-\*,
.level-9 > .deco-\*,
.level-10 > .deco-\*
{
display: block;
font-size: 2.4rem !important;
line-height: 24px !important;
padding: 10px 0 10px 20px;
margin: 0;
border: 2px solid #00d1cd;
border-left: 8px solid #00d1cd;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
}
.level-4 > .deco-\* {
border: 2px solid #1F74FF;
border-left: 8px solid #1F74FF;
}
.level-5 > .deco-\* {
border: 2px solid #46C93A;
border-left: 8px solid #46C93A;
}
.level-6 > .deco-\* {
border: 2px solid #f30067;
border-left: 8px solid #f30067;
}
.level-7 > .deco-\* {
border: 2px solid #FFEA00;
border-left: 8px solid #FFEA00;
}
.level-8 > .deco-\* {
border: 2px solid #00faac;
border-left: 8px solid #00faac;
}
.level-9 > .deco-\* {
border: 2px solid #FF9800;
border-left: 8px solid #FF9800;
}
.level-10 > .deco-\* {
border: 2px solid #621e81;
border-left: 8px solid #621e81;
}
参考：memoooooさんのScrapbox
code:style.css
/* imgをセンタリング */
.line img.image{
display: block;
margin: 0 auto;
}
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #EFEBE9;
color: #6D4C41;
font-size: 0.8em;
border: 1px solid #4E342E;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
参考：memoooooさんのScrapbox
imgを並べて表示
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
.level-1 > .deco-\~ ,
.level-2 > .deco-\~ ,
.level-3 > .deco-\~ ,
.level-4 > .deco-\~ ,
.level-5 > .deco-\~ ,
.level-6 > .deco-\~ ,
.level-7 > .deco-\~ ,
.level-8 > .deco-\~ ,
.level-9 > .deco-\~
{
color: #6dd5ed;
display: block;
font-size: 2.4rem !important;
line-height: 32px !important;
padding-left: 20px;
/* デフォルト（上で設定されているCSSを打ち消す） */
border: none;
border-radius: 0px;
}
.level-1 > .deco-\~ {
color: #EF5350;
border-left: 8px solid #EF5350;
border-bottom: 2px dashed #EF5350;
}
.level-2 > .deco-\~ {
color: #916eff;
border-left: 8px solid #916eff;
border-bottom: 4px dotted #916eff;
}
.level-3 > .deco-\~ {
color: #f30067;
border-bottom: 4px solid #f30067;
}
.level-4 > .deco-\~ {
color: #212121;
border-bottom: 4px solid #f30067;
}
.level-4 > .deco-\~:first-letter {
font-size: 1.5em;
color: #f30067;
}
.level-5 > .deco-\~ {
border-bottom: 4px solid #EF6C00;
color: #FB8C00;
background: #FFF3E0;
}
.level-6 > .deco-\~ {
border-bottom: 4px solid #2E7D32;
color: #43A047;
background: #E8F5E9;
}
.level-6 > .deco-\~:first-letter {
font-size: 1.5em;
color: #43A047;
}
.level-7 > .deco-\~ {
border-left: 8px solid #2E7D32;
color: #43A047;
background: #E8F5E9;
}
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
Heading7
Heading8
Heading9
Heading10
色はMaterialDesignを参考にした ${number} は各パレットのカラーナンバー
The color system - Material Design
border-left: 8px solid ${800};
color: ${600};
background: ${50};
code:style.css
.level-1 > .deco-\{ ,
.level-2 > .deco-\{ ,
.level-3 > .deco-\{ ,
.level-4 > .deco-\{ ,
.level-5 > .deco-\{ ,
.level-6 > .deco-\{ ,
.level-7 > .deco-\{ ,
.level-8 > .deco-\{ ,
.level-9 > .deco-\{ ,
.level-10 > .deco-\{
{
display: block;
font-size: 2.4rem !important;
line-height: 32px !important;
padding: 10px 0 10px 20px;
/* デフォルト（上で設定されているCSSを打ち消す） */
border: none;
border-radius: 0px;
}
.level-1 > .deco-\{ {
border-left: 8px solid #C62828;
color: #E53935;
background: #FFEBEE;
}
.level-2 > .deco-\{ {
border-left: 8px solid #6A1B9A;
color: #8E24AA;
background: #F3E5F5;
}
.level-3 > .deco-\{ {
border-left: 8px solid #283593;
color: #3949AB;
background: #E8EAF6;
}
.level-4 > .deco-\{ {
border-left: 8px solid #0277BD;
color: #039BE5;
background: #E0F2F1;
}
.level-5 > .deco-\{ {
border-left: 8px solid #00695C;
color: #00897B;
background: #E8F5E9;
}
.level-6 > .deco-\{ {
border-left: 8px solid #558B2F;
color: #7CB342;
background: #F1F8E9;
}
.level-7 > .deco-\{ {
border-left: 8px solid #F9A825;
color: #FDD835;
background: #FFFDE7;
}
.level-8 > .deco-\{ {
border-left: 8px solid #EF6C00;
color: #FB8C00;
background: #FFF3E0;
}
.level-9 > .deco-\{ {
border-left: 8px solid #4E342E;
color: #6D4C41;
background: #EFEBE9;
}
.level-10 > .deco-\{ {
border-left: 8px solid #37474F;
color: #546E7A;
background: #ECEFF1;
}
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
Heading7
Heading8
Heading9
Heading10
code:style.css
.level-1 > .deco-\},
.level-2 > .deco-\},
.level-3 > .deco-\},
.level-4 > .deco-\},
.level-5 > .deco-\},
.level-6 > .deco-\},
.level-7 > .deco-\},
.level-8 > .deco-\},
.level-9 > .deco-\},
.level-10 > .deco-\} {
display: block;
font-size: 2.4rem !important;
line-height: 32px !important;
padding: 10px 0 10px 20px;
color: #212121;
/* デフォルト（上で設定されているCSSを打ち消す） */
border: none;
border-radius: 0px;
}
.level-1 > .deco-\} {
border-bottom: 4px solid #e53935;
}
.level-1 > .deco-\}:first-letter {
font-size: 1.5em;
color: #e53935;
}
.level-2 > .deco-\} {
border-bottom: 4px solid #8e24aa;
}
.level-2 > .deco-\}:first-letter {
font-size: 1.5em;
color: #8e24aa;
}
.level-3 > .deco-\} {
border-bottom: 4px solid #3949ab;
}
.level-3 > .deco-\}:first-letter {
font-size: 1.5em;
color: #3949ab;
}
.level-4 > .deco-\} {
border-bottom: 4px solid #039be5;
}
.level-4 > .deco-\}:first-letter {
font-size: 1.5em;
color: #039be5;
}
.level-5 > .deco-\} {
border-bottom: 4px solid #00897b;
}
.level-5 > .deco-\}:first-letter {
font-size: 1.5em;
color: #00897b;
}
.level-6 > .deco-\} {
border-bottom: 4px solid #7cb342;
}
.level-6 > .deco-\}:first-letter {
font-size: 1.5em;
color: #7cb342;
}
.level-7 > .deco-\} {
border-bottom: 4px solid #fdd835;
}
.level-7 > .deco-\}:first-letter {
font-size: 1.5em;
color: #fdd835;
}
.level-8 > .deco-\} {
border-bottom: 4px solid #fb8c00;
}
.level-8 > .deco-\}:first-letter {
font-size: 1.5em;
color: #fb8c00;
}
.level-9 > .deco-\} {
border-bottom: 4px solid #6d4c41;
}
.level-9 > .deco-\}:first-letter {
font-size: 1.5em;
color: #6d4c41;
}
.level-10 > .deco-\} {
border-bottom: 4px solid #546e7a;
}
.level-10 > .deco-\}:first-letter {
font-size: 1.5em;
color: #546e7a;
}