フォーラムへの返信

9件の返信を表示中 - 16 - 24件目 (全24件中)
  • フォーラム: テーマ
    返信が含まれるトピック: ロゴ画像を大きくしたい
    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    表示出来るようになりました。

    申し訳ありません。他の部分に間違ったコードが混じっていたようです。

    ありがとうございました。

    フォーラム: テーマ
    返信が含まれるトピック: ロゴ画像を大きくしたい
    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    早速のご指示ありがとうございます。

    ーーーサイトタイトルの表示 を隠すにすると

       隠すという表示が無いので、何も入れずにしました。

    ーーーご指示のCSS
       「raindrops: スタイルシート (style.css)」の末尾に挿入。

    いずれも上手く効果が出ませんでした。
    カスタマイザーの追加CSSは、以前とカスタマイザーの仕様が変わっているようで、CSS挿入箇所が見つかりませんでした。

    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    ありがとうございます。

    詳細なチェックはこれからですが、ご指示いただいた2つの方法どちらも上手く動作しました。
    .rd-mobile #ft,の方は、「PC上ではブラウザ幅を狭めても変化せず」、デバイスを選択しているのが確認できました。

    ご指摘いただいた内容を基に、これからゆっくり調整して行くつもりです。

    長々と、そして様々な無知な質問に丁寧にお答えいただき感謝しております。
    またなにかあれば宜しくお願い致します。

    ありがとうございました。

    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    遅くなりました。

    ご指摘の方法で解決いたしました。

    いろいろ試してみましたが、全ての原因はfunctions.phpに記述した<?php $raindrops_page_width=960;?>にあったようです。
    当方の無知で大変お手数をおかけしてしまいました。

    この上ご質問は恐縮なのですが、以下の内容についてご教示願えればありがたいです。

    スマホ用にヘッダー画像及び、フッター画像を替えようと考えております。
    その場合、どの箇所に記述すれば良いか教えていただきたいのです。

    フッターについては、「サイトのカスタマイズ」から「ウィジェット」ー「フッターウィジェット」で、固定ページを選択する方法でよろしいのでしょうか。

    何度も申し訳ありませんが、よろしくお願い致します。

    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    遅くなりました。
    再々、丁寧なお答えありがとうございます。

    ご指摘の「サイト全体のCSS」に以下のCSSをペーストしました。

    @media only screen and (min-width: 641px) {
        .content {
                    width:960px;
                    height: 306px;
                    margin:auto;
                    background: url(http://utairui.com/wp/wp-content/uploads/Boovo_backimg_live.png) ;
                    background-position: center center;
                    background-repeat: no-repeat;
                    -moz-background-size:cover;
                    -webkit-background-size:cover;
                    -o-background-size:cover;
                    -ms-background-size:cover;
                    background-size: cover;
    }
    }
    .content ul{
                    display:flex;
    }
    @media only screen and (min-width: 0px)and(max-width: 641px){
        .content{
                     background :transparent!important;
    }
    }

    結果は、PCでは反映するものの(ブラウザ幅の調整で振り分けられる)、スマホでは反映されませんでした。
    いろいろ調べたところ、スマホの独自仕様で、Viewportの記述が必要なことがわかりました。
    (無知の故、振り回して申し訳ありません)

    それについて質問させていただきます。

    CSSを読み込んでいるHTMLのヘッド部分に、以下のViewportを記述が必須とのことでしたが、

    meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    head内に記述するファイル(チャイルドテーマを使用します)は、テーマヘッダー (header.php)で良いのでしょうか?
    (類似するファイル名が他にもあったためで、以前に勝手に触って真っ白になった経験があるものですから)

    教えていただければ大変ありがたいです。

    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    ご指摘ありがとうございます。

    .contentというクラスは、「この投稿のカスタムCSS」に自分でつけたスタイルです。

    以下のHTMLで使用しています。

    <body>
    <nav class="content">
       <ul>
       <li class="back"><a href="/stage-staff/"><img src="http://utairui.com/wp/wp-content/uploads/Boovo_b1_icon.png" alt="舞台スタッフ" width="190" height="190" ></a></li>
         <li><a href="/stage-cast/"><img src="http://utairui.com/wp/wp-content/uploads/Boovo_o2_icon.png" alt="キャスト" width="190" height="190" ></a></li>
         <li><a href="/stage-production/"><img src="http://utairui.com/wp/wp-content/uploads/Boovo_p3_icon.png" alt="イベント制作" width="190" height="190" ></a></li>
       </ul>
    </nav>

    この部分の背景として、「この投稿のカスタムCSS」に記述してあります。

    .content {
                                width:960px;
                                height: 306px;
                                background: url(http://utairui.com/wp/wp-content/uploads/Boovo_backimg_live.png) ;
                                background-position: center center;
                                background-repeat: no-repeat;
                                -moz-background-size:cover;
                                -webkit-background-size:cover;
                                -o-background-size:cover;
                                -ms-background-size:cover;
                                background-size: cover;
    }

    ご教示願えれば幸いです。

    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    再々度失礼します。

    ご教示のresponsiveness.cssをチャイルドテーマにコピーして試してみましたが反映されません。

    試しに背景を消そうと思い、以下のコードを入れてみました。

    @media only screen and (min-width: 641px) {
                             .content background :none; }
    !important

    も入れてみましたが上手く行きません。

    何度もお手数をおかけしますが、ご教示願えれば幸いです。

    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    初心者の無知にお答えいただき、ありがとうございます。
    <?php …?>で解決いたしました。

    「判定する機能はデフォルトで存在」

    ご指摘の通りで、スマホでも問題なく表示できております。
    問題は、スマホ表示のレイアウトを変える目的で、@media only screen andが上手く効かず、悩んでネットを探した結果このコードを試した次第です。

    「AMPプラグインを使う方法も・・・」

    確認いたしましたが、未だ初心者にはハードルが高そうです。

    いろいろな選択肢を教えていただきありがとうございます。

    トピック投稿者 yoisyowaiwai

    (@yoisyowaiwai)

    ありがとうございます。
    追加したのは以下のソースです。

    function is_mobile(){
    $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
    }

    よろしくお願いします。

9件の返信を表示中 - 16 - 24件目 (全24件中)