当サイトについて

ブログタイトル:豆ガジェ通信
運営者:豆ガジェ男
profilephoto
連絡先
mamegadget@yahoo.co.jp
プライバシーポリシー
免責事項

かてごり一覧

かれんだー

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>

月別あーかいぶ

JUGEMブログ スマホ版をカスタマイズする その6 「注目ブログ」を非表示にする

0


    当サイトの運営にあたっては、JUGEM ブログの有料版
    JUGEM PLUS
    を利用させていただいています

    今回はスマホ版のサイトに勝手に表示されてしまう、「注目ブログ」というコンテンツを非表示にする方法についてご紹介致します
     

    JUGEMブログスマホ版 「注目ブログ」を非表示にする


    スマホ版のサイトを見てみるとページ下部にこんなコンテンツが…



    注目ブログというコンテンツが表示されています
    私が使用している「blue wall」テンプレートではデフォルトでこのコンテンツが表示されるようになっているようです
    …が、はっきり言っていらないです

    関連する記事なら歓迎ですが、明らかに当サイトと無関係な内容のブログですので

    ということで、今回はこちらを非表示にしてみたいと思います

    いつものようにソースを確認していってどのような指示がなされているのか確認していきます
    くどいようですが、ソースの確認はスマホのブラウザで
    view-source:
    ですよ〜。分からないという方は過去記事を見て下さいね

    今回は、「blue wall」テンプレートのCSSではなく、HTMLのソースを確認していきます。すると、それらしきものを見つけました



    見づらくて恐縮ですが、赤丸で囲ったところ
    jugem_recommend_wrapというクラス名で指定されている要素がありました
    その下には、さらに細かくクラス分けされた要素が続きますが、いちばん大きなクラスの括りは、このjugem_recommend_wrapです

    今回はこのコンテンツを丸ごと非表示にしたいので、この大元のクラス名に対して非表示の指示を出してあげます
     
    スポンサーリンク

    CSSの指示を上書きする


    いつものように、スマホ版フリースペース1に以下のソースを記述します
     
    <style type="text/css">
    <!--
    .jugem_recommend_wrap {display:none;
    }
    -->
    </style>


    以上で完了です
    余談ですが、クラスに対してスタイル要素を指示するには、クラス名の前に.(ピリオド)を。idに対してスタイル要素を指示するには、id名の前に#(シャープ)をつけます

    早速サイトを確認してみると…



    このように非表示になりました。よく分からないかもしれませんが、さっきまでは人気記事ランキングの下に「注目ブログ」が表示されていて、さらにその下にスポンサーリンクが表示されていたのですが、現在では人気記事ランキングのすぐ下にスポンサーリンクがきています
    無事に「注目ブログ」を非表示にできました


    いかがだったでしょうか
    今後も細か〜いところを、具体事例をまじえて、どんどんご紹介していきます
    よろしければRSSを登録して当サイトを購読していただけると更新情報が分かって便利ですので、是非お願いします


    RSS FEED
                
    スポンサーリンク
                        
    ブログパーツ
            
    コメント
    コメントする