settings
interface
code:style.css
/* 設定ページの非表示 */
display: none !important;
}
.page-filter-menu {
display: none;
}
/* 背景色と点線の非表示 */
.line.dot { display: none !important; }
/* リンクのスタイル */
a, .page-list-item .description .link {
font-weight: 400;
}
.line a.page-link, .line a.link {
text-decoration: none;
}
.line a.link .image {
border-style: none;
}
.grid li.relation-label.links .arrow, .grid li.relation-label.project-links .arrow {
display: none;
}
grid li.page-list-item a .description .line {
display: flex!important;
}
/* グリッドページのホバー効果 */
.grid li.page-list-item a {
position: relative; /* 親要素を相対位置に設定 */
}
.grid li.page-list-item a .hover {
background-color: rgba(0, 0, 0, 1) !important; /* ホバー時の色を変更 */
transition: .1s;
height: 2px; /* 幅を79%に変更 */
position: absolute; /* 絶対位置に設定 */
top: 50%; /* 垂直方向の中央に配置 */
left: 50%; /* 水平方向の中央に配置 */
transform: translate(-50%, -50%); /* 位置を中央に揃える */
pointer-events: none; /* ホバー効果が他の要素の操作を妨げないようにする */
width: 100%; /* 高さを親要素に合わせる */
box-sizing: border-box; /* ボックスのサイズを適切に計算する */
}
/* コンテンツ内の画像の幅と高さを90%に縮小し、中央に揃える */
.grid li.page-list-item a .icon {
display: flex;
justify-content: center;
align-items: center;
}
.grid li.page-list-item a .icon img {
width: auto !important; /* 幅を自動調整 */
height: 100% !important; /* 高さを100%に変更 */
margin: auto; /* 中央に配置 */
object-fit: cover;
}
/* ピンのカスタマイズ */
.page-list-item.grid-style-item.pin {
height: 50px !important; /* 高さを強制的に設定 */
width: 100% !important;
margin-bottom: 0px !important;
}
.page-list-item.grid-style-item.pin a {
background-color: var(--card-bg) !important;
margin: none !important;
box-shadow: none !important;
display: flex !important;
justify-content: center !important; /* 水平方向に中央揃え */
align-items: center !important; /* 垂直方向に中央揃え */
text-align: center !important; /* テキストの中央揃え */
}
.page-list-item.grid-style-item.pin a .content :is(.description, .icon) {
display: none !important;
}
.page-list-item.grid-style-item.pin a .pin {
background: none !important;
width: 100% !important; /* 幅を100%に設定 */
height: 100% !important; /* 高さを100%に設定 */
}
/* ピンされた要素内の画像を非表示にする */
.page-list-item.grid-style-item.pin a img {
display: none !important;
}
/* より具体的なセレクタを使用してピンされた文字のスタイルを変更 */
.page-list-item.grid-style-item.pin a .pin {
font-size: 20px !important; /* フォントサイズを設定 */
font-weight: 400 !important; /* フォントウェイトを設定 */
color: #333 !important; /* 文字の色を設定 */ margin-top: 4px !important; /* 文字の位置を下げる */
}
.page-list-item.grid-style-item.pin a .title {
font-size: 20px !important; /* フォントサイズを設定 */
font-weight: 400 !important; /* フォントウェイトを設定 */
color: #333 !important; /* 文字の色を設定 */ margin-top: 4px !important; /* 文字の位置を下げる */
}
/* スマートフォン用の高さ調整 */
@media (max-width: 650px) {
.page-list-item.grid-style-item.pin {
height: 75px !important; /* 高さを自動調整 */
min-height: 30px !important; /* 必要に応じて最小高さを設定 */
padding: 10px !important; /* コンテンツのパディングを追加して調整 */
}
.page-list-item.grid-style-item.pin a {
display: flex !important;
flex-direction: column !important; /* 縦方向に揃える */
align-items: center !important; /* 垂直方向に中央揃え */
justify-content: center !important; /* 水平方向に中央揃え */
}
.page-list-item.grid-style-item.pin a .pin {
font-size: 14px !important; /* フォントサイズを調整 */
line-height: 1.2 !important; /* 行間を調整 */
}
/* ホームボタンをセンター揃えにするスタイル */
.navbar .left {
justify-content: center !important; /* 左揃えから中央揃えに変更 */
display: flex;
width: 100%;
}
.navbar .left .project-home {
margin-left: 0 !important; /* マージンをリセット */
}
}
/* .contentクラスの幅と高さの比率を1:√2に設定 */
.flex-box {
width: calc(1 * 0.707); /* 幅を指定 */
height: 1; /* 高さを1に設定 */
}
/* リストの幅を0.707に設定し高さを1に */
.list {
width: calc(1 * 0.707);
height: 1;
}
/* グリッドサイズ */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* カラムの設定 */
gap: 20px; /* コンテンツ間の距離を広げる */
}
/* ピンされた要素を新しい行に移動 */
.grid .page-list-item:not(.pin) {
grid-column: span 1; /* 元のカラム設定に戻す */
}
.grid .page-list-item.pin + .page-list-item:not(.pin) {
grid-column: 1 / -1; /* ピンされた要素の直後の要素は新しい行から開始 */
}
.page, .grid li.page-list-item a, .grid.grid-md li.page-list-item a, .grid.grid-lg li.page-list-item a {
border-top: solid 0px;
}
/* グリッドのカラム数の調整 */
.page-list ul.grid, .related-page-list ul.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 最小幅200px、最大1fr */
gap: 20px; /* コンテンツ間の距離を広げる */
}
@media (min-width: 1200px) {
.page-list ul.grid, .related-page-list ul.grid {
grid-template-columns: repeat(4, 1fr); /* 最大4カラム */
}
}
@media (max-width: 1200px) and (min-width: 901px) {
.page-list ul.grid, .related-page-list ul.grid {
grid-template-columns: repeat(4, 1fr); /* 4カラム */
}
}
@media (max-width: 900px) and (min-width: 651px) {
.page-list ul.grid, .related-page-list ul.grid {
grid-template-columns: repeat(2, 1fr); /* 最大2カラム */
}
}
@media (max-width: 650px) {
.page-list ul.grid, .related-page-list ul.grid {
grid-template-columns: 1fr; /* 1カラム */
}
}
/* 新しいボタン */
.new-button {
background-color: #fff; /* 色 */ padding: 10px;
border-radius: 50%;
}
/* ナビゲーションバーのカスタマイズ */
.navbar {
border-bottom: none;
background: transparentr!important; /* 色 */
position: inherit;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.navbar .col-search, .navbar .col-menu, .navbar .left .col-brand {
display: none !important;
}
.navbar .row {
grid-template-columns: auto 1fr !important; /* 左側に自動幅の列を追加 */
height: auto;
}
.navbar .left {
justify-content: flex-start; /* 左揃えに変更 */
}
a.project-home {
height: auto !important;
padding: 10px 0;
margin-left: 60px; /* 左にマージンを追加して位置調整 */
color: transparent!important;
}
.project-home span {
font-size: 10rem;
color: transparent!important;
height:10rem;
width:10rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform 0.7s ease; /* transformのトランジションを追加 */
}
/* ホームボタンのホバー効果 */
a.project-home:hover {
background-color: transparent !important; /* ホバー時の背景色 */
}
a.project-home span:hover {
background-color: transparent !important; /* ホバー時の背景色 */
transform: scale(1.1); /* ホバー時の拡大効果 */
}
a.project-home:active {
background-color: transparent!important; /* クリック時の背景色 */
transform: scale(); /* クリック時の縮小効果 */
}
/* スマホ */
@media (max-width: 650px) {
a.project-home {
height: auto !important;
color: transparent!important;
}
.project-home span {
justify-content: center; /* 中央に変更 */
font-size: 10rem;
color: transparent!important;
height:10rem;
width:10rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
/* フッターの非表示 */
.footer .status-bar {
display: none;
}
/* リストサイズの設定 */
input.grid-size-range { display: none; }
a#dropdownMenuSort.tool-btn.dropdown-toggle { display: none; }
div.page-list {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
width: calc(1 * 0.707) !important;
height: 1 !important; /* 高さを1に設定 */
margin-bottom: 30px; /* コンテンツ間の距離を広げる */
}
@media (max-width: 650px) {
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
height: auto !important;
}
}
/* カードのカスタマイズ */
.grid li.page-list-item {
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
border-radius: 0px;
overflow: hidden;
}
.grid li.page-list-item a {
box-shadow: 0 0px 0 rgba(0,0,0,0);
}
.grid li.page-list-item a .content {
height: 100%;
}
.grid li.page-list-item a .header {
border-top: none;
}
.grid li.page-list-item a:hover {
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0) !important;
}
.grid li.page-list-item a .icon img {
display: block;
width: auto;
height: 100%;
margin: 0 auto;
object-fit: cover;
}
.page-list .grid li.page-list-item:not(.pin) .content .header {
display: none;
}
.grid li.page-list-item a .title {
font-optical-sizing: auto;
font-style: normal;
}
/* ハッシュタグのスタイル */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* テロメアの非表示 */
.line .telomere .telomere-border {
border-width: 0px 0px 0px 0px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none;
}
/* ヘッダーのカスタマイズ */
.navbar-default {
}
.navbar-default .navbar-nav>li>a {
}
form {
}
.container {
padding: 50px;
padding-left: 20rem;
max-width: 1260px;
}
.project-home {
padding-left: 0;
padding-right: 0;
justify-content: flex-start;
}
.span.title {
padding-left: 0;
padding-right: 0;
align-content: left;
}
/* ページ全体のカスタマイズ */
.page {
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0); /* ページ全体のドロップシャドウを変更 */
}
.line {
font-family: 'Yu Gothic', 'acumin-pro, sans-serif', Arial, sans-serif;
font-size: 13.5px;
font-weight: 400;
line-height: 2;
}
/* .lineクラス内のimg.imageに適用されるスタイル */
.line img.image {
display: block; /* 画像をブロック要素にし、次の要素が改行されるようにする */
margin: 0 auto; /* 画像を左右中央に配置する */
width: 70%; /* 画像の幅を親要素の幅に合わせる */
height: 70%; /* 画像の高さを親要素の高さに合わせる */
max-height: 60%; /* 画像の最大高さを親要素の高さに制限する */
}
@media (max-width: 650px) {
.line img.image {
display: block; /* 画像をブロック要素にし、次の要素が改行されるようにする */
margin: 0 auto; /* 画像を左右中央に配置する */
width: 100%; /* 画像の幅を親要素の幅に合わせる */
height: 100%; /* 画像の高さを親要素の高さに合わせる */
max-height: 60%; /* 画像の最大高さを親要素の高さに制限する */
}
.container {
padding: 20px;
}
.navbar .left {
justify-content: center;
}
a.project-home {
height: auto !important;
padding: 10px 0;
margin-left: 0px; /* 左にマージンを追加して位置調整 */
}
}
/* マーカー1のスタイル */
.level-1 {
font-size: 13.5px;
font-weight: 400;
line-height: 2.25;
}
/* タイトルがABCのコンテンツの画像を非表示にする */
display: none !important; /* 画像を非表示にする */
}
/* タイトルがABCのコンテンツのクリックとホバーを無効にする */
pointer-events: none; /* クリックを無効にする */
cursor: default; /* ポインタを通常の矢印にする */
}
/* タイトルがABCのコンテンツのホバー効果を無効にする */
background-color: inherit !important; /* ホバー時の背景色を無効にする */
box-shadow: none !important; /* ホバー時のシャドウ効果を無効にする */
}
/* タイトルがABCのコンテンツの文字を透明にする */
color: rgba(0, 0, 0, 0) !important; /* 文字を透明にする */
}
/* ホームコンテンツ内の画像のスタイルを上書きする */
.home-content img {
width: auto !important; /* 幅を自動調整 */
height: 100% !important; /* 高さを100%に変更 */
object-fit: cover !important; /* 画像のフィットをカバーに設定 */
position: absolute; /* 画像を絶対位置に設定 */
top: 50%; /* 画像の中心をコンテナの中心に */
left: 50%; /* 画像の中心をコンテナの中心に
transform: translate(-50%, -50%); /* 画像を中央に配置 */
}
/* デフォルトのスタイル */
.home-content {
margin: 20px; /* 通常のマージン */
}
/* スマホ用スタイル */
@media (max-width: 650px) {
.home-content {
margin: 100px; /* スマホでの表示時に広いマージンを適用 */
}
}
.navbar-default {
background-color: transparent!important;
}
.page-menu{
display:none;
}
.related-page-list .toolbar .related-page-list-search {
display:none;
}
.grid li.page-list-item {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
![https://i.gyazo.com/b424dadfad265981f3a1013a26c8ac15.gif");](https://i.gyazo.com/b424dadfad265981f3a1013a26c8ac15.gif");){kind=link}