settings

code:style.css

body {

}

.page {

width: 90vw;

max-width: 620px;

padding: 0;

background: none;

box-shadow: none;

}

.app {

width: 100vw;

margin: 50px auto;

max-width: 960px;

}

.container {

width: 100%;

padding: 0;

max-width: none;

}

.row-flex {

background-color: white;

padding-top: 20px;

}

.col-page {

width: auto;

max-width: 620px;

background-color: white;

}

.col-page-side {

background-color: white;

}

/* 背景 */

.quick-launch.layout-list {

height: 25vw;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

margin: 0;

}

/* ステータスバー,navbarを消す */

.status-bar.page-list-status-bar,

.flex-item.text-right,

.status-bar {

display: none

}

/* ナビゲートバー調整（タイトル位置の調整） */

.navbar {

position: relative;

margin-bottom: 50px;

margin-top: -40px;

}

.navbar .row {

margin-left: 10px;

margin-right: 10px;

}

nav.navbar.navbar-default {

background: none;

background-color: ;

}

.brand-icon {

width: 150px;

height: 36px;

background-size: 100%;

background-repeat: no-repeat;

}

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

.search-form .form-group,

.search-form .form-group button

{

display: none;

}

.navbar .row .col-menu {

width: auto;

padding-right: 12px;

display: none;

}

.navbar-form .search-form {

position: absolute;

right: 10px;

}

.fa {

display: none;

}

/* 追加ボタンのデザイン変更 */

.new-button {

position: absolute;

right: 0px;

bottom: 0;

}

/* ランダムボタンを消す */

a.random-jump-button.tool-btn.link-btn {

display: none;

}

/* ここはなんていうんだ？？？ */

.quick-launch .flex-box {

justify-content: flex-start;

}

.quick-launch .flex-box .flex-item:first-child {

display: flex;

align-items: flex-end;

position: absolute;

height: 54px;

top: 100px;

}

.quick-launch .project-home::before {

font-size: 14px;

content: "東京学芸大学 ICTセンター 教育情報化研究チーム";

}

.quick-launch .project-home .title {

display: none;

}

/* pinついていない要素は非表示 */

div.clearfix:not(.related-page-list) li.page-list-item.grid-style-item:not(.pin) {

display: none;

}

/* pinマークを非表示 */

div.page-list div.pin {

display: none;

}

/* 一覧 */

.page-list ul.grid {

position: relative;

flex-direction: column-reverse;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

width: 100%;

margin-top: 10px;

}

div.page-list li.page-list-item.grid-style-item {

width: auto;

height: auto;

margin: 0;

padding: 0;

border: none;

}

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

width: 100%;

height: 100px;

margin: 10px 0;

background: none;

box-shadow: none;

transition: background-color 300ms ease;

}

div.page-list .grid li.page-list-item a:hover {

box-shadow: none;

}

div.page-list .grid li.page-list-item a .header {

border: none;

}

div.page-list .grid li.page-list-item a .description {

max-height: 120px;

}

div.page-list li.page-list-item.grid-style-item {

width: 50vw;

max-width: 480px;

min-width: 200px;

}

強調

code:style.css

.line i {

font-style: normal;

font-weight: bold;

}

.level-1 img { width: 16.7%; max-height: none; }

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }

.line img.strong-icon { max-height: 3em; height: auto }

良さげな見出しにする

*を3~5個使って強調すると、左側にマーク付く

code:style.css

.line strong {

width: 100%;

margin: 0.2em 0;

}

.line strong a:link {

text-decoration: none;

}

テーブルタグを見やすくしてみる

table:使うことあるのかな？

f f f

f f f

f

f

改行で行の仕切り、tabキーで列の仕切り

code:style.css

/* セル間に線を入れる */

.table-block .cell {

/* 全てのセル*/

}

リンクをわかりやすくできるかも

code:style.css

/* External links */

/*.line a.link:not(.icon)::after { font-family:'FontAwesome'; content: ' \f08e'; display: inline-block }*/

吹き出し

吹き出し

code:style.css

.deco-\{, .deco-\} {

font-size: 1em;

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

code:style.css

.deco-\{ a,

.deco-\} a {

}

左から

code:style.css

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

}

右から

code:style.css

.deco-\}:after{

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

}

code:style.css

.page-list .grid li:hover {

transition: 0.5s;

transform:scale(1.2);

}

テンプレートアイコン設定

code:style.css

a#Templates.tool-btn:hover { text-decoration: none }

a#Templates.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f067'; font: 21px/46px 'FontAwesome' }

a#Templates.tool-btn img { opacity: 0 }

画像を並べて表示

code:style.css

/* マトリクス記法 */

.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行は不要 */

警告

Warning!!!

code:style.css

.line:not(.cursor-line) .deco-\!.deco-\~ {

padding: 0.5em 0 !important;

}

.line:not(.cursor-line) .deco-\!.deco-\~ a {

}

.line:not(.cursor-line) .deco-\!.deco-\~ a:hover {

opacity: .5;

}

.line:not(.cursor-line) .deco-\!.deco-\~ {

position: absolute;

left: -20px;

right: -20px;

width: auto !important;

max-width: none;

transform: none;

z-index: 300;

text-align: center;

transform: none;

}

@media screen and (min-width: 767px) {

.line:not(.cursor-line) .deco-\!.deco-\~ {

left: -30px;

right: -30px;

}

}

@media screen and (min-width: 991px) {

.line:not(.cursor-line) .deco-\!.deco-\~ {

left: -50px;

right: -50px;

}

}

カーソルをカスタマイズ

同時作業中のユーザのカーソルが点滅しないように設定

code:style.css

/* カーソルの幅と色替え */

.cursor {

width: 1px;

background-color: rgba(0,0,0,.6);

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 0; }

50% { opacity: 0; }

51% { opacity: 1; }

100% { opacity: 1;}

}

/* 同時作業中のユーザのカーソル設定 */

重要な部分を青くする

ヘッダー

code:style.css

.line .deco-\!{

display: inline-block; min-width: 3.2em; padding: .2em .4em; border-radius: .2em;

line-height: 1; vertical-align: unset; text-align: center;

}

.line strong .deco-\! {

padding: .2em 0 !important;

font-size: 100%;

}

.line .deco-\! a {

}

.line .deco-\! a:hover {

opacity: .5;

}

.line strong:not(.level-1):not(.level-2) .deco-\! {

display: inline-block;

width: 100%;

}

.line strong:not(.level-1):not(.level-2) .deco-\!:after {

display: none;

}

code:style.css

/* タグアイコンの共通スタイル (1) */

display: inline-block; width: 0; text-indent: -9999px }

display: inline-block; width: 0; text-indent: -9999px }

/* タグアイコンの共通スタイル (2) */

display: inline-block; min-width: 1.15em; padding-left: 1px;

font: normal 110%/normal;font-family: 'Font Awesome 5 Free'; text-align: center;font-weight: 900; }

display: inline-block; min-width: 1.15em; padding-left: 1px;

font: normal 110%/normal;font-family: 'Font Awesome 5 Free'; text-align: center; font-weight: 900;}

/* ここから各アイコンの設定 */

code:style.css

/* しおり記法 -- しおり箇所のマークやハイライトが不要な場合はこのブロックは消してね */

@media screen {

.app:not(.presentation) .line .deco-\.::after {

position: absolute; top: 3px; left: -1.4em;

content: '\f02e'; font: 1.7rem/1;font-family: 'Font Awesome 5 Free'; color: yellowgreen } }

@media screen and (max-width: 990px) {

.app:not(.presentation) .line .deco-\.::after { position: static; padding-left: .3em } }

マーカー

こんな感じ

code:style.css

.deco-\& {

}