settings - おし怪ポータルサイト

settings

こかむも氏のscrapboxからsettingsをかなり参考にさせていただいております。

大変わかりやすく、参考になりました。ここに敬意を表すがてら、リンクを添付します。

/htmra/

動くグリッド背景の描画 + 動く丸

code:style.css

body:before {

content: '';

width: 250px;

height: 250px;

background: linear-gradient(to bottom, #78b0a0, #efdab9);

position: fixed;

top: -5%;

left: -5%;

animation: float 7s ease-in-out infinite;

display: block;

border-radius: 50%; /* これを追加 */

z-index: -1; /* z-indexを-1に変更 */

filter: blur(9px) brightness(1.2); /* ぼかし効果追加 */

}

body:after {

content: '';

width: 350px;

height: 350px;

background-color: #FFE53B;

background: linear-gradient(to bottom, #f96670, #a9b9d1);

position: fixed;

top: 70%;

left: 80%;

animation: float 5s ease-in-out infinite;

animation-delay: -3s;

display: block;

border-radius: 50%; /* これを追加 */

z-index: -1; /* z-indexを-1に変更 */

filter: blur(30px) brightness(1.3); /* ぼかし効果追加 */

}

@keyframes float {

0% {

transform: translateY(0px) translateX(0px);

}

25% {

transform: translateY(-40px) translateX(30px);

}

50% {

transform: translateY(-70px) translateX(-30px);

}

75% {

transform: translateY(-40px) translateX(30px);

}

100% {

transform: translateY(0px) translateX(0px);

}

@-webkit-keyframes bg-scrolling-reverse {

100% {

background-position: 50px 50px

}

@-moz-keyframes bg-scrolling-reverse {

100% {

background-position: 50px 50px

}

@-o-keyframes bg-scrolling-reverse {

100% {

background-position: 50px 50px

}

@keyframes bg-scrolling-reverse {

100% {

background-position: 50px 50px

}

@-webkit-keyframes bg-scrolling {

0% {

background-position: 150px 150px

}

@-moz-keyframes bg-scrolling {

0% {

background-position: 50px 50px

}

@-o-keyframes bg-scrolling {

0% {

background-position: 50px 50px

}

@keyframes bg-scrolling {

0% {

background-position: 100px 100px

}

body {

color: #fff;

font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC) repeat 0 0;

-webkit-animation: bg-scrolling-reverse 2s infinite;

-o-animation-timing-function: linear;

animation-timing-function: linear

}

-moz-animation:bg-scrolling-reverse 2s infinite;

-o-animation:bg-scrolling-reverse 2s infinite;

animation:bg-scrolling-reverse 2s infinite;

-webkit-animation-timing-function:linear;

-moz-animation-timing-function:linear;

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

Settingsとアイコンを消す、諸々を隠す

code:style.css

li.page-list-item:is(

data-page-title="settings",

data-page-title="oshikai",

data-page-title="備忘録",

data-page-title="よかったペン",

data-page-title="best tweet",

data-page-title="名義の移行",

) { display: none; }

カードのデザイン

code:style.css

/* カードタイトルぶぶん */

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

padding; 8px 10px;

}

/* タイトルの上のBorderを消して背景色を設定 */

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

background: #FFF;

border-top: 3px;

}

/* カード自体の borde-radius を 1 に */

/* アウトラインつける(これは必要なかったので 0 にしている,好きな時に戻せるように) */

/* カードの下にあるシャドウを消す */

.grid li.page-list-item:not(.pin) a {

border: 1px solid #dfdfdf;

border-radius: 0;

box-shadow: none;

}

ピンどめを段落わけする

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

}

ピンどめをタイトルだけにする

code:style.css

.grid li.pin {

height: 7rem;

width: 100%;

}

.grid li.pin a {

background-color: rgb(250, 250, 250);

box-shadow: none !important;

}

.grid li.pin .header {

border-top:none !important;

padding: 6px 5px !important;

}

.grid li.pin .title {

text-align: center !important;

text-decoration: underline;

}

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

border: none;

/*background-color: rgb(240, 240, 240);*/

background: linear-gradient(to bottom, rgb(245, 245, 245),rgb(250, 250, 250) );

}

.page-list-item a .pin {

background: none !important;

}

[-.icon] あるいは [hr.icon] を <hr> に置換

code:style.css

.lines a.icon:is(

href$="/-",

href$="/hr",

) {

display: block;

width: inherit;

pointer-events: none;

border-bottom: dashed 1px #777;

margin-top: 1em;

margin-bottom: -1em;

}

.lines img.icon:is(

title="hr",

title="-",

) { display: none; }

.stream a:is(

href$="/-",

href$="/hr",

) { display: none; }

.grid li.page-list-item a .description img:is(

src$="/-/icon",

src$="/hr/icon",

) { display: none; }

ハッシュタグをボタンの見た目に

code:style.css

atype="hashTag" {

color: var(--page-bg, #fff) !important;

background-color: var(--page-link-color, #41b059);

font-weight: bold;

padding: .1em;

border-radius: 1px;

}

atype="hashTag":hover {

background-color: var(--page-link-hover-color, #3a9d50);

}

#hashtag

アイコンの左右に少し隙間を入れる

code:style.css

.line img.icon:not(.strong-icon):first-child { margin-left: 0.25em; }

.line img.icon:not(.strong-icon):last-child { margin-right: 0.25em; }

code:style.css

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

padding; 8px 10px;

}

/* タイトルの上のBorderを消して背景色を設定 */

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

background: var(--card-title-bg, #f2f2f3);

border-top: 0px;

}

[| ] 画像・テキストをセンタリングする文字装飾記法

code:style.css

.line:not(.cursor-line) .deco-\| {

display: flex;

justify-content: center;

align-items: center;

margin-top: -2em;

margin-bottom: -2em;

flex-wrap: nowrap;

}

/* Youtube 動画に対応 */

.line:not(.cursor-line) .deco-\| iframe.youtube {

width: 100%;

height: inherit;

}

[" ] 画像キャプション記法

code:style.css

/* 中央寄せにする部分, テキスト編集中は無効化 */

.line:not(.cursor-line) .deco-\" {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

margin-top: -2em;

margin-bottom: -2em;

}

/* 文字の見た目の部分 */

.line .deco-\" {

font-style: italic;

color: #999;

font-size: .8em;

}

インデントのドットサイズと色

code:style.css

.line .indent-mark .dot {

height: 5px;

width: 5px;

background-color: var(--tool-color, #848484);

}