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

Font Awesome 4と5

またまたFont Awesomeの話ですが、、、。
v5.8.2のアイコンが画像のピンク枠のように表示されちゃうw
Cocoon以外のテーマでは正常なんだけど、、、。
v4とv5が戦ってるんだろうなぁ。
とりあえず、ミドリのんで代用しちゃおうと思いますw

Cocoonでは敬愛するわいひら氏がめちゃめちゃ面倒な作業で、Font Awesome 4 を標準装備して下さっています。
欲張りなわたしは、テキトーな技量と知識で Font Awesome 5 を追加しました 笑
折角、テーマに組み込まれている v4 のアイコンはそのまま使いたいし。
v5 の存在を知ってしまったからには、それも使いたくなるかもだし、、、。

そうそう。
Font Awesome v5.8.1 の直訳キーワードを更新していて、『v5.8.2』にアップデートされているのに気づきました。^^;
1,513から1,515って、、、。
追加された2個を探しましたよーーー。
『\f841』と『\f842』だったんですけどね。
『\f9』で検索するもヒットせず。
『\f8』だと20個以上で特定が面倒。
『\f89』〜『\f85』と下ってきて、『\f84』でビンゴ!
この方法で v5.8.3 とか v5.8.4 とかにも対応できたらいいな。

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;
}
タイトルとURLをコピーしました