超人気の『Simplicity2』の後継『Cocoon』のデモサイトを兼ねています。

Gutenberg考察

   古い順 | 新着順に戻す

Gutenberg考察

Classic Editor 削除

今のところ、Cocoonテーマのサイトに限ってですが、随時「プラグイン:Classic Editor」を削除しまくっています。 なぜなら、C...
Gutenberg考察

無料サーバーもバッチリ

前回紹介した無料サーバーでの不具合ですが、、、。 WordPress導入時期が新旧切り替えの狭間だったために起こった模様です。 2018年1...
Gutenberg考察

無料サーバー不具合

先日、思うところ有って、無料サーバーのXFREEとStarServer Freeに登録してみました。 「このサイトは安全ではありません」攻...
Gutenberg考察

Cocoon と Gutenberg

Cocoon設定>エディター 他のテーマではまた別の動きをしますが、Cocoon では、プラグイン:Classic Editor 無しで、...
Gutenberg考察

reCAPTCHA v3

記事が古くなってしまったので別テーマですが、以下をご参照ください。
Gutenberg考察

<解決>Gutenbergの編集ツールを日本語にしたい

※本日2018年12月20日の5.0.2へのアップデートにより無事解決しています。 下図はGutenbergの編集画面ですが、サイトに...
Gutenberg考察

コードエディター

折角のGutenbergが台無しですが、旧エディターのテキストモードに当たる『コードエディター』ならなんとか攻略出来そうです。 わたしは元...

Welcome!

This is popup preview that you can fill with any content you want.

The plugin include some shortcodes, you can read more about them at the bottom of this page. The main 3 sections to configure the popup are:

Appearance: Where you edit the look and feel of the popup.
Display Rules: Here you choose on which page to display the popup (Set to all by default)
Display options: Some important settings about the plugin, being the more important trigger action.

.popupModal1 > input { /* ラジオボックス非表示 */
    display: none;
}
.popupModal1 > input:nth-child(1) + label { 
    cursor: pointer;
}
.modalPopup2 { /* 初期設定 ポップアップ非表示 */
    display: none;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ1 チェックでポップアップ表示 */
    display: block;
    z-index: 998;
    position: fixed;
    width: 90%;
    height: 80%;
    border-radius: 20px;
    left: 50%;
    top: 50%;
    margin-top: 30px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 10px 20px;
    overflow: hidden;
}
@media (min-width: 768px) {/* PCのときはページの真ん中の600x600領域 */
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
         width: 600px;
         height: 600px;
         padding: 30px;

    }
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
     left: 50% !important;
     top: 50% !important;
     margin-left: 270px !important;
     margin-top: -310px !important;
}
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe {
    width: 100%;
      height:100%;
      border:none;
      display:block;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img {/* ポップアップの中の要素 */
max-width: 100%;
}
.popupModal1 > input:nth-child(1) + label ~ label {
    display: none;/* ラジオ1 以外のラベルを初期は非表示 */

}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: fixed;
    left: 10px;
    bottom: 20px;
    z-index: 999;
    width: 44pt;
    height: 44pt;
    font-size: 40px;
    border-radius: 50%;
    line-height: 44pt;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
.popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ2と3 どっちかチェックでポップアップ非表示 */
    display: none;
}


.modalPopup2 {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.popupModal1 .modalTitle {
     padding-bottom: .5em;
     margin: .5em 0;
     border-bottom:
     1px solid #ccc;
     font-weight: bold;
}
.popupModal1 .modalMain {
     color:#222;
     text-align: left;
     font-size: 14px;
     line-height: 1.8em;
}