運営元:K'sHoldings株式会社

    【SWELL】メインビジュアルのフォントサイズが変更できない?超簡単な対処方法が見つかってので共有します。

    当ページのリンクには広告が含まれています。

    お世話になります。

    K’sHoldings株式会社の下道です。

    SWELLには素敵なメインビジュアルを作成するカスタマイズ機能が最初から備わっていて、とっても綺麗なサイトを作成することができる魅力がありますよね。ただ、フォントサイズを変更する機能がついておらず、ネットで検索すると、追加CSSで対処する方法が見つかると思います。

    と、ここで問題が…

    釣太郎

    CSSをコピペしても反映されないじゃん!

    ある程度知識がある方なら、簡単に対処できるのでしょうが(そもそも検索しなくても分かるレベルには簡単なので)、SWELLを使用されているブロガーさんは、当時の私も含めて大抵が「初心者さん」だと思います。

    プログラミングの知識なんて皆無だし、ネットに出回っているCSSを真似して反映されなければ、それはもう諦めるしかありません。

    釣太郎

    いやいや、諦めたくないんだけど…

    と思ったあなた!

    もしかしたら、この記事で解決するかも?なので、ぜひお試しくださいませ。

    目次

    昔の私について|SWELLを購入した当初

    今でこそWeb制作を始めとする総合マーケティング会社の経営をしており、僕自身もある程度は勉強をしてるので、知識的には普通のブロガーさんよりも少しは博識と自負しておりますが、ブロガーとして独立した当初は知識0から独学での挑戦だったので、CSSが何かもイマイチ分かっておりませんでした(笑)

    ちなみにCSSとは


    CSS(Cascading Style Sheets)は、数あるプログラミング言語の中で「サイトデザイン,装飾」を定義している言語になります。

    SWELLをはじめ多くのテーマで、カスタマイズの「追加CSS」から簡単にデザインを修正することができ、具体例を挙げるとすると、お問い合わせフォームのデザインやGoogle reCAPTCHAのボタンを非表示にするなどのデザイン性を担保する非常に便利な機能になります。

    ネット上に有志が無数のCSSコードを”無料”で配布してくれていますので、基本的には「こういうデザインを実装したいなぁ」と思えば調べれば大抵のことが分かって、しかもコピペで簡単に実装できる便利な機能なのですが、、

    知識が無いと不具合や修正箇所に対処できず、今回のように「あれれ〜おかしいぞ〜?」という状況になってしまうのです。

    原因のCSSについて

    Googleで「SWELL メインビジュアル 文字サイズ」と調べると、ほとんどのサイトで以下のようなCSSを見つけることになります。

    /* メインビジュアル メインテキスト フォントサイズ */
    .p-mainVisual__slideTitle {
       font-size: 30px;
    }
    /* メインビジュアル サブテキスト フォントサイズ */
    .p-mainVisual__slideText {
    font-size: 15px;
    }

    /* 〇〇 */はコメントアウトというもので、「このコードは〇〇ですよ〜」と自分や後から編集する人が分かるようにコメントを入れるものになります。

    その下にフォントサイズを変更するCSSコードが記載されておりまして、font-size:〇〇px;のところを修正することで、簡単にフォントサイズを変更できる仕組みになっています。

    基本的にはこのコードで間違いないのですが、これには致命的な原因があり、それが原因で「CSSをコピペしても反映されないじゃん!」という状況に陥ってしまっております。

    フォントサイズが反映されない原因とは

    SWELL開発者の了さんも書いておりましたが、セレクタの詳細度が足りていないことが原因です。

    釣太郎

    セレクタの詳細度…?!

    詳細度 (Specificity) は、ある要素に最も関連性の高い CSS 宣言を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、CSS セレクターの重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。

    引用元:https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

    了さんが共有してくれていた参考サイトに、このように記載されていましたが、何のことだかサッパリという感じですよね。問題を解決するために更に難しい問題が発生してしまいました(笑)

    がくと

    超ざっくりいうと、ブラウザでどのCSSのスタイルが適用されるか決定する際に用いられる優先度のようなものです。

    つまり、上記のコードは詳細度(ここでは分かりやすく優先度)が低いコードなので、SWELLテーマのコードの優先度に負けてしまって、せっかくのCSSコードが反映されていない、といった状況でしょう。

    対策方法

    いくつかの対策方法があります。

    • そもそものSWELLのコードを編集して優先度を下げてしまう
    • CSSコードの優先度を上げる
    • 諦める(冗談です)

    SEWLLのコードを編集するのは難易度が高いですし、万が一失敗するとサイトが閲覧できなくなる危険性もありますので、よっぽどな状況でない限りは無いでしょう。

    というわけで、残された選択肢は1つ。

    優先度の高いCSSコードを使用することです!

    少し発展|「!important」ではダメなの?

    この手の対策方法として有名なものに「!important」を記入して優先度を無視して強制的に適用させる荒技があります。

    もちろんこの方法でも反映されますが、CSSの優先順位を無視して最優先して記入したCSSコードを適用する訳ですから、コードを読み込んでいるシステムさんにとっては「あ、こっちが先なのね?!」みたいな感じでこんがらかってしまいます。

    結果、サイトスピードの低下や、それが原因でSEOの低下につながりかねませんし、そもそもそんな荒技を多用していては、せっかくSWELLの美しいCSSがぐちゃぐちゃになって、制御できなくなる可能性だってあります。

    という理由から、どうしても反映されない時以外は使用しない方が賢明ですね!!

    対策方法

    優先度の高いCSSコードなんて言われても、どうすれば良いか分からないと思いますので、一旦は下記のコードをコピペして使用してみてください。

    /* メインビジュアル メインテキスト フォントサイズ */
    .p-mainVisual__slideTitle.p-mainVisual__slideTitle{font-size: 30px;}
    
    /* メインビジュアル サブテキスト フォントサイズ */
    .p-mainVisual__slideText.p-mainVisual__slideText{font-size: 15px;}
    がくと

    数字の箇所はご自身のサイトに合わせて修正してくださいね!

    これで反映された方が多いと思います。

    もし、スマホやタブレットでフォントサイズを個別設定したい場合は、

    /* メインビジュアル メインテキスト フォントサイズ */
    @media (min-width: 600px){
    .p-mainVisual__slideTitle.p-mainVisual__slideTitle{font-size: 55px;}}
    
    @media (max-width: 600px){
    .p-mainVisual__slideTitle.p-mainVisual__slideTitle{font-size: 35px;}}
    
    
    /* メインビジュアル サブテキスト フォントサイズ */
    @media (min-width: 600px){
    .p-mainVisual__slideText.p-mainVisual__slideText{font-size: 18px;}}
    
    @media (max-width: 600px){
    .p-mainVisual__slideText.p-mainVisual__slideText{font-size: 19px;}}

    こんなのは如何でしょうか?

    • min-width: 600px
      • この画面サイズより大きい場合のみ適用=PC
    • max-width: 600px
      • この画面サイズより小さい場合のみ適用=SP(スマホ)

    といった感じで2つの画面サイズに合わせて自動でフォントサイズが切り替わります。画面サイズは数字を変えれば自動で変更できるので、「タブレットはスマホと同じ小さいサイズで表示したい」などの調整も可能です。

    それぞれのコードを使用した際のスマホ表示です。
    後者のコードであれば1行にキャッチコピーを収めることも可能ですので、好みで調整してみてください!

    まとめ

    今回はSWELLのメインビジュアルのフォントサイズが変更できない、その原因と対策方法に関してご説明しました。

    実際に私も同じ境遇に陥ってた経験があり、いくらSWELLが初心者でも使いやすいテーマとはいえ、難しい箇所も多いですので、一緒に頑張って素敵なサイトを運営しましょうね!

    よかったらシェアしてね!

    この記事を書いた人

    がくとのアバター がくと K’sHoldings株式会社 専務取締役COO

    この度は弊社メディアサイトへのご訪問くださいまして誠にありがとうございます。

    当サイトでは、弊社の取り扱いしている商材に関する情報や、その他企業様の商材の中で弊社が自信を持ってお勧めできるもの、また最近話題になりつつあるトレンド商材の世間の口コミ等を客観的に執筆していく所存です。

    まだまだ従業員が足りず更新頻度は少ないと思いますが、どうぞよろしくお願いいたします。

    コメント

    コメントする

    目次