settings - hitsujimochi-note

settings

https://gyazo.com/6903cf9c79d6ceea619b5042cf14efe6

リスト上のブログに枠を付けてわかりやすくする

.grid li.page-list-item[data-page-title="ページタイトル"] a{outline: 3px solid #efefef;}

/noratetsu/●UserCSSでページ一覧でのカードの見た目を変えるためのタイトル指定方法

code:style.css

.grid li.page-list-itemdata-page-title="" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="知識0からChatGPTだけで速読ソフトを作った" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="引っ越ししたので、ストレスレストーキョーを買った" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="BRINGの服が正解すぎて、服を20枚くらい捨てた" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="ダークモードをやめてパァっと明るくしてみた" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="買ってよかったもの 2022" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="ずんだもんに休憩時間を教えてもらおう" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="ワールドトリガー25巻を読んで、感想を書き連ねたくなった" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="6000円払ってストレングスファインダーをやってみた 2022" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="老後にドミニオンをやる人生" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="トレードオフだと思うバイアス" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="このブログのデザインを考えるにあたって" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="画像生成AIが結構楽しい" a{outline: 3px solid #a1a3a6;}

.grid li.page-list-itemdata-page-title="ここはどんな場所？" a{outline: 3px solid #e9a09b;}

ホバー時にグリットにアウトラインをつける/work4ai/settings#6417bcf4e2dacc0000ded287

code:style.css

/* --- アウトライン --- */

.grid li.page-list-item a{outline: 3px solid #e7e8e4;}

.grid li.page-list-item a:hover{outline: 3px solid #a7c19e;}

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

position: relative;

padding: 0;

margin: auto;

}

タイトル

code:style.css

@media screen {

/* ページタイトルのフォント設定と罫線 */

.app:not(.presentation) .line.line-title .text {

font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important; padding: 8% 0;

border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem } }

最初の画像をトップに

code:style.css

.lines{

display: flex;

flex-direction: column;

}

.line:nth-of-type(2){order:1}

.line.line-title{

order:2;

}

.line:not(:first-of-type):not(:nth-of-type(2)){order:3}

/road2noma/settings

画像中央揃え/シャドウ

code:style.css

.line img.image {

display : block;

position: relative;

margin : 0 auto 0.25em;

top: 1.5em;

}

https://gyazo.com/6903cf9c79d6ceea619b5042cf14efe6

四角の下に謎の隙間があったので消す

code:style.css

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

height: 100%;

}

/madobes/settings

code:style.css

/* 白っぽくするためのスタイル定義 */

body, .page { background-color: #f9f9f9; box-shadow: unset }

.navbar-default { background-color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(0,0,0,.067) }

.navbar-default:hover { background-color: rgba(245,245,245,.9) }

.navbar .navbar-brand .icon-arrow-down { display: none }

.search-form .form-group input { border: 1px solid rgba(0,0,0,.13) }

.search-form .form-group button { color: rgba(0,0,0,.13) }

.navbar-default .visible-xs .navbar-form { border-color: rgba(0,0,0,.067) }

.navbar .navbar-menu>li>a.mobile-search-toggle { color: rgba(0,0,0,.33) }

code:style.css

/* アイコンを表示する */

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

margin-top : 2px;

color : #000;

display : inline-block;

font-family: 'Font Awesome 5 Free';

font-weight: bold;

content : '\f015';

text-align : center;

width : 40px;

}

code:style.css

/* プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動 */

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

.quick-launch .project-home {

position: fixed; top: 0; left: calc((100% - 1000px)/2); z-index: 1001 }

.page { padding-top: 0 } }

@media screen and (min-width: 768px) and (max-width: 1200px) {

.quick-launch { left: 80px } }

/* テロメアとページメニューを脇に寄せて本文を広く見せる */

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

.line .telomere .telomere-border { left: calc((100% - 960px)/2 - 120px) }

.app:not(.presentation) .page-menu { text-align: right; width: calc(100% - 20px) } }

code:style.css

/* 検索ボックスを右寄せにする仕掛け */

/* .navbar .row .col-menu { width: unset } */

/* 検索ボックスを小洒落た感じに */

.search-form .form-group input {

background-color: rgba(255, 255, 255, 1.0);

border: 1px solid #dfe1e5;

border-color: rgba(223,225,229,0);

border-radius: 24px;

box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);

color: #555;

padding: 0 15px;

}

.search-form .form-group button .kamon{

fill: #222;

color: #555;

margin-right: 8px;

}

.search-form .form-group input:focus {

border: 1px solid #dfe1e5;

}

見出し

code:style.css

/* 拡張装飾記法見出しっぽい太字テキスト */

.level .deco-\# {

border-left: .6em solid #7FA280;

font-size: 1.5em;

padding-left: .7rem }

全体が白くなる設定

code:style.css

body {

margin: 0px 30px 0px 30px;

background-color: #f9f9f9;

}

フォントをNoto sans に

code:style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

html, body,

#editor,

.grid li {

font-family: 'Noto Sans JP', sans-serif;

}

ページ・テキスト

code:style.css

/* Disable shadow */

.page {

line-height: 36px;

background-color: #f9f9f9;

box-shadow: 0 1px 0 rgba(0,0,0,0.16);

}

.text {

color: #08131A;

font-size: 100%;

letter-spacing: 0.05em;

font-family: "Noto Sans JP","sans-serif","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",'游ゴシック','Yu Gothic', sans-serif;

}

https://gyazo.com/4f7f7ab7f9542d7549ad0c1c48afd68f

引用（行頭に>を書くと引用になります）

ああ

いいい

code:style.css

.line .quote {

font-style: normal ;

font-size: 100% ;

padding-left: 50px ;

padding-right: 50px ;

padding-top: 1px ;

padding-bottom: 1px ;

border-color: #f1f4f6 ;

border-width: thin ;

background-color: #f1f4f6 ;

}

.line .quote .c-0 {

visibility: hidden ;

}

.line .quote .c-0 + a:last-child {

float: right ;

margin-right: 1em ;

}

修飾強調

びっくり

マーカー

code:style.css

/* ! で蛍光ライン */

.deco-\! {

color:#08131A;

background:linear-gradient(#f9f9f9 80%,#7FA280 90%)

}

via /scrasobox/のびのびドロップダウン

code:style.css

.navbar-form .dropdown.open .dropdown-menu {

min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }

グリッド

code:style.css

.grid li.page-list-item {

margin-bottom: 0.7em ;

font-family:"Noto Sans JP","sans-serif", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",'游ゴシック','Yu Gothic', sans-serif;

}

.grid li.page-list-item .text{

}

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

text-align: left;

}

.grid li.page-list-item a,

.grid.grid-md li.page-list-item a,

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

background-color: #fff ;

box-shadow: 7px 7px 15px 0px rgba(0,0,0,0.02);

border-radius: 7px ;

}

.grid li.page-list-item a:hover,

.grid.grid-md li.page-list-item a:hover,

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

background: #f9f9f9 ;

box-shadow: 7px 7px 15px 0px rgba(0,0,0,0.02);

}

.grid li.page-list-item a::before,

.grid li.page-list-item a::after {

display: block ;

content: '' ;

position: absolute ;

width: 13em ;

}

.grid li.page-list-item a::before {

}

.grid li.page-list-item a::after {

}

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

border-top: 0 ;

}

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

clear: both;

}

Scrapbox 何もない

code:style.css

/* リンク・空リンクの色を変えるUserCSS */

atype="link".page-link{

text-decoration: underline;

}

atype="link".page-link:hover{

text-decoration: underline;

}

atype="link".empty-page-link{

color: #08131A ;

text-decoration: underline;

}

atype="link".empty-page-link:hover{

color: #08131A ;

text-decoration: underline;

opacity: 0.5 ;

}

#ヒツジモチ #何もない

code:style.css

/* ＃で始まるタグをラベル風にする */

/* ハッシュタグ (リンクあり) */

atype="hashTag".page-link {

padding: 3px 3px 3px 3px;

background: #57b367;

border: 1px solid #57b367;

border-radius: 3px;

font-size: 1em;

font-family: "Noto Sans JP","sans-serif","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",'游ゴシック','Yu Gothic', sans-serif;

color: white;

font-weight: bold;

}

atype="hashTag".page-link:hover{

background: #f9f9f9;

border: 1px solid #858b8e;

color: white;

}

/* ハッシュタグ (リンクなし) */

atype="hashTag".empty-page-link {

padding: 3px 3px 3px 3px;

background: #8c9196;

border: 1px solid #8c9196;

border-radius: 3px;

font-size: 1em;

font-family: "Noto Sans JP","sans-serif","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",'游ゴシック','Yu Gothic', sans-serif;

color: white;

font-weight: bold;

}

atype="hashTag".empty-page-link:hover{

background: #f9f9f9;

border: 1px solid #858b8e;

color: white;

}

/error403info/settings

夏の海 | ColorMagic | AI Color Palette Generator

外部リンクを自動判別・無料webフォントを引っ張り出してくる

code:style.css

/* 外部リンクにiconをつける */

.line span:not(.modal-image) > a.link:not(.icon)::before {

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 600;

display: inline-block;

padding: 0 0.5em 0 0;

}

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: ' \f0c6'; font-family: 'Font Awesome 5 Free';

font-weight: 900; font-size: 20px; color: #729173; bottom: 0;

position: absolute;

top: 10%;

left: 0%;

transform: rotate(-15deg)

}

テロメアの色を変える

code:style.css

/* telomere */

.telomere-border {

border-color: #f9f9f9 !important;

}

.telomere-border.unread {

border-color: #829cc0 !important;

}

行間を広くする

code:style.css

.line {

line-height: 37px;

}

選択した文字の背景色

code:style.css

.selection {

background: #b4b8bc !important;

}

あhitsujimochi.icon

あ

い

行頭のドットを加工

code:style.css

.line .indent-mark .dot {

display: block;

position: absolute;

right: 10px;

top: 15px;

color: #08131A;

}

リンク

code:style.css

.page-list-item .description img.inline-icon {

height: 100%;

width: 100%

}

code:style.css

/* ポップアップメニューの修飾ボタンをアイコン化 */

.popup-menu .button-container .button.strong-button > strong,

.popup-menu .button-container .button.italic-button > i,

.popup-menu .button-container .button.strike-button > strike {

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

.popup-menu .button-container .button.link-button::after,

.popup-menu .button-container .button.strong-button::after,

.popup-menu .button-container .button.italic-button::after,

.popup-menu .button-container .button.strike-button::after {

font-family:"Font Awesome 5 Free"; font-weight: 900;

display: inline-block; min-width: 16px; text-align: center }

.popup-menu .button-container .button.strong-button::after { content: '\f032' }

.popup-menu .button-container .button.italic-button::after { content: '\f033' }

.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }

/* ポップアップメニューのボタン周りの線を消す */

.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }

https://gyazo.com/7deb724cf1d6f116fbe319cbdc3f4bbf

キャプションこれはTwitterのアイコンです

code:style.css

/* キャプション用テキスト中央揃え */

.deco-\" {

position: absolute;

top: -40%;

left: 50%;

font-size: 0.9em;

transform: translateX(-50%);

}

/* 文字が二列になると表示が崩れるため対策。尚要修正 */

.line strong.level-3 {

white-space: nowrap;

}

文字カウンター

code:style.css

/* カウンターのスタイル */

#__charCounter__ span {

cursor: pointer; font: 88%/1 monospace;

opacity: .35; /* ←マウスを乗せてないときの濃さ 35% */

transition: opacity .2s ease-out }

#__charCounter__ span:hover { opacity: 1 } /* ←マウスを乗せたときの濃さ 100% */

#__charCounter__ { z-index: 1000; position: fixed; bottom:25px; right: 30px; text-align: right }

/* ポップアップのスタイル */

#__charCounterPopup__ {

z-index: 1000; position: absolute; bottom: 2em; right: -1em;

border-radius: .25em; border: 1px solid #ddd; box-shadow: 0 0 8px 1px rgba(8,8,8,.1);

padding: .8em; background-color: azure; color: #5F9EA0; font: 13.5px/1.4 monospace;

transition: opacity .3s ease-out }

/* プレゼンモードのときは非表示にする */

.presentation #__charCounter__,

.presentation #__charCounterPopup__ { display: none }

/scrasobox/チェックボックスになるタグ 2

code:style.css

/* チェックボックスになるタグ v2 Font Awesome版 */

.line:not(.cursor-line) ahref$='/o':not(.icon) span,

.line:not(.cursor-line) ahref$='/v':not(.icon) span {

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

.line:not(.cursor-line) ahref$='/o':not(.icon)::after,

.line:not(.cursor-line) ahref$='/v':not(.icon)::after {

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

font-family: 'Font Awesome 5 Free'; font-weight: 400;

font-size: 120%; text-align: center; vertical-align: middle }

.line:not(.cursor-line) ahref$='/o':not(.icon)::after { content: '\f0c8'; color: #08BDBD }

.line:not(.cursor-line) ahref$='/v':not(.icon)::after { content: '\f14a'; color: #2489C5 }

/customize/テーブルを派手めに表示するUserCSS

table:test

A B C

b よいもう少しまぁまぁ

c もう少しよいまぁまぁ

code:style.css

/* ボーダーの色 */

.table-block .cell {

border-right: solid 1px #08131A;

border-bottom: solid 1px #08131A;

}

.table-block .cell:first-child {

border-left: solid 1px #08131A;

}

.section-title + .line .table-block .cell {

border-top: solid 1px #08131A;

}

.section-title + .line .table-block .cell {

font-weight: bolder;

text-align: center;

}

/* 背景の色 */

.table-block .cell:nth-child(2n){

background-color:#f6f8f9 ;

}

.table-block .cell:nth-child(2n+1){

background-color: #f9f9f9;

}

.section-title + .line .table-block .cell:nth-child(2n) {

background-color:#f6f8f9;

}

.section-title + .line .table-block .cell:nth-child(2n+1) {

background-color: #f9f9f9;

}

--------------ブログ専用-----------

/road2noma/settings

サムネの画像小さく、真ん中にあと文字パディングとサイズ変更

code:style.css

/* サムネ画像をフィットさせる */

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

position: relative;

}

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

padding: 0;

margin: auto;

}

.grid li.page-list-item a .icon img {

display: table-cell;

width: auto;

max-height: 90px;

max-width: 100%;

vertical-align: middle;

border-radius: 5px;

}

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

padding; 8px 10px;

}

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

font-size: 13px;

}

flexカラム逆にあとノートの色

code:style.css

/* ノートの色 */

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

flex-direction: column-reverse;

background: #fff

}

.grid li.page-list-item a{

background-color: transparent;

}

画像クリック時のURL非表示

code:style.css

.full-content-modal .modal-dialog .modal-content .modal-body a.link .text {

display: none;

}

マウスホバーで影消し

code:style.css

.page-list .grid li:hover{

box-shadow: none;

transition: all 0.3s ease 0s;

}

リストからsettingsを消す

code:style.css

.grid li.page-list-item > ahref^="/hitsujimochi-note/settings" {

display: none;

}

リストからヒツジモチを消す

code:style.css

.grid li.page-list-item > ahref^="/hitsujimochi-note/hitsujimochi" {

display: none;

}

ホームから用語解説ページを消す

/code:style.css

.grid li.page-list-item > ahref^="/hitsujimochi-note/%E4%B8%8D%E5%AE%8C%E5%85%A8%E6%83%85%E5%A0%B1%E3%82%B2%E3%83%BC%E3%83%A0" {

display: none;

}

.grid li.page-list-item > ahref^="/hitsujimochi-note/%E3%82%AD%E3%83%A2%E3%81%8F%E3%81%A6%E3%82%AB%E3%83%8D%E3%81%8C%E3%81%AA%E3%81%84%E3%81%8A%E3%81%A3%E3%81%95%E3%82%93%E5%95%8F%E9%A1%8C" {

display: none;

}

.grid li.page-list-item > ahref^="/hitsujimochi-note/%E5%88%B6%E7%B4%84%E3%81%A8%E8%AA%93%E7%B4%84" {

display: none;

}

.grid li.page-list-item > ahref^="/hitsujimochi-note/%E3%83%A2%E3%83%87%E3%83%AB" {

display: none;

}

.grid li.page-list-item > ahref^="/hitsujimochi-note/%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88" {

display: none;

}

.grid li.page-list-item > ahref^="/hitsujimochi-note/%E3%81%84%E3%82%89%E3%81%99%E3%81%A8%E3%82%84" {

display: none;

}

下部new link 非表示

code:style.css

.empy-links{

display:none;

}

code:style.css

.brand-icon {

display: none;

}

code:style.css

.navbar .kamon {

display: none;

}

ページリストで内容を非表示

code:style.css

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

display: none;

}

ページメニュー

code:style.css

.page-sort-menu {

opacity: 0.1;

transition: opacity 0.3s;

}

.page-sort-menu:hover {

opacity: 1;

}