WordPressの始め方&使い方

注意事項

情報を正確に提供するための努力をしておりますが、掲載している情報の正確性や完全性を保証するものではありません。また、アップデートでユーザーインタフェースが変更されたり、設定項目が追加・削除されている可能性もあります。

間違った情報等に気づかれましたら、ページ下部のコメント欄及びお問い合わせから教えて頂けるとうれしいです。すぐに修正致します。

プラグインの設定

SWELLの設定

- シンプルなのに、高機能 -

swell_pr_banner

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

ブロックエディター完全対応のWordPressテーマ。

コメント

コメント一覧 (4件)

  • はじめまして。
    swellを購入したので、関連記事を読ませていただきました。

    スマホで見ると、アイキャッチが画面幅いっぱいになっていて、すごくオシャレだと感じています。

    よかったら設定方法など、教えていただけないでしょうか。

    どうぞ、よろしくお願いいたします

    • コメントありがとうございます。

      やり方は他にもあると思いますが、このブログでは下記のCSSを追加しています(カスタマイザーの「追加CSS」 or 子テーマの「スタイルシート (style.css)」に追記)。


      @media (max-width: 480px) {
      .p-articleThumb {
      position: relative;
      left: calc(50% - 50vw);
      width: 100vw;
      max-width: 100vw;
      }
      }


      CSSの詳細については、Google等で検索して頂ければ詳しく解説されているサイトが出てくると思いますが、横幅480px以下の時に適用、計算式を入れられるプロパティ「clac」を使用、ウィンドウサイズの値「vw」を使用しています。width: 100vwを指定しているので、max-width: 100vwはなくても問題ないのかもしれません。

  • 丁寧に教えていただき、ありがとうございます
    アイキャッチの見せ方だけで、印象が全然違うので、やってみようと思います

    • 僕もスマホ閲覧時はアイキャッチ画像両サイドの余白はない方が綺麗に見える&本文の画像と差別化できる気がしたのでCSSで編集しています。コピペするだけですが、反映されない時はブラウザ及びSWELLのキャッシュを削除してみて下さい。ブラウザのキャッシュは使用しているブラウザの設定から、SWELLのキャッシュはSWELL設定から削除できます。

コメントする