Minerva themeでほかのmoduleを追加するときの方法
他言語版
 閉じる

 ページ情報

基本情報

表示されるページ名 Minerva themeでほかのmoduleを追加するときの方法
ページの長さ 33323272
ページ本文の言語 jp - 日本語
本文ページとして数える はい

編集履歴

ページの作成者 R74 (会話 | 投稿記録)
ページの作成日時 20 Jul 2020 13:07
最終編集者 RTa_sub(会話 | 投稿記録)
最終編集日時 25 Jul 2020 13:32
総編集回数 12
最近の投稿者数 0

Minerva themeでほかのmoduleを追加するときの方法

このページの問題点

ページノート

close

Search is temporarily unavailable, we are working to bring it online!
    • _
    コードを開くコードを閉じる
    [[div id="u-issue"]]
[[div class="issue"]]
[[a href="#e" style="color: #54595d;"]][[span class="fa fa-times fa-2x"]]@<&nbsp;>@[[/span]][[/a]][[size x-large]]ページの問題点[[/size]]
ここに
 
追加したいモジュールを
 
いれます
[[/div]]
[[/div]]
 
[[module css]]
#u-issue {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.issue p{
    text-align: left;
}
.issue {
    width: 70%;
    background: #fff;
    padding: 0 20px;
    text-align: center;
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 4rem 0 0 4rem;
}
 
#u-issue:not(:target) {
    opacity: 0;
    visibility: hidden;
}
 
#u-issue:target {
    opacity: 1;
    visibility: visible;
    z-index: 100;
 
}
.i-option,.i-interwiki  {
    top: 177px;
}
 
@media (min-width: 768px) and (max-width: 979px) {
    .i-option,.i-interwiki  {
        top: 190px;
    }
}
@media (min-width: 480px) and (max-width: 767px){
    .i-option,.i-interwiki  {
        top: 177px;
    }
}
@media (max-width: 480px) {
    .i-option,.i-interwiki  {
        top: 170px;
    }
}
.issue{
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;  
}
.issue::-webkit-scrollbar {
    display: none;
}
[[/module]]
    • _
    解説 module cssの中身閉じる

    1.

    #u-issue {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.issue p{
    text-align: left;
}
.issue {
    width: 70%;
    background: #fff;
    padding: 0 20px;
    text-align: center;
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 4rem 0 0 4rem;
}
 
#u-issue:not(:target) {
    opacity: 0;
    visibility: hidden;
}
 
#u-issue:target {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

    ここは、このページの問題点をクリックした場合に表示される部分になります。
    このページの問題点をクリックすることで、ページのURLに#u-issueという文字列が付きます。
    これにより、 
    #u-issue:target {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

    が反応し、表示されます。

    2.

    .i-option,.i-interwiki  {
    top: 177px;
}
 
@media (min-width: 768px) and (max-width: 979px) {
    .i-option,.i-interwiki  {
        top: 190px;
    }
}
@media (min-width: 480px) and (max-width: 767px){
    .i-option,.i-interwiki  {
        top: 177px;
    }
}
@media (max-width: 480px) {
    .i-option,.i-interwiki  {
        top: 170px;
    }
}

    ここはissue=1にしたときに一行追加されるのでそれの補正用です。

    3.

    .issue{
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;  
}
.issue::-webkit-scrollbar {
    display: none;
}

    issueで切り替えた画面が、もし、画面外に飛び出ていた時にスクロールできるように。
    ただし、スクロールバーは表示しないようにする用です。

解説 追加点

[[div id="u-issue"]]
[[div class="issue"]]
[[a href="#e" style="color: #54595d;"]][[span class="fa fa-times fa-2x"]] [[/span]][[/a]][[size x-large]]ページの問題点[[/size]]
ここにモジュールを追加してください。
[[/div]]
[[/div]]

赤文字の部分は絶対に変更しないでください。動かなくなります。
ここにモジュールを追加してください。の部分にモジュールを入れてください。
そして、[[module css]]の中身をいれてください。

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License