GeneratePress テーマ:モバイルサムネイルの位置を変更する

Last Updated:2023年07月16日| , 23のコメント

WordPress GeneratePress テーマでは、ブログオプションでサムネイルの場所を設定できます。 しかし、 Blog オプションでプロパティ画像の位置を左に指定しても、モバイルではサムネイルが上部に表示されます。 モバイルでも、サムネイルが左側にあるようにモバイルサムネイルの場所を変更する方法について説明します。

GeneratePress:モバイルサムネイル位置を変更する(How to align thumbnails to the left on mobile devices in GeneratePress)

このブログには、現在の GeneratePress テーマが使用されています。 GeneratePressは軽く速度が速く高速サイトやシンプルで高速ブログを作りたい場合に使用するのに良い WordPress テーマです。

ツェナーレートプレスのテーマの有料版(GP Premium)を使用する場合は、さまざまなオプションと機能を使用することができます。

モバイル機器でサムネイルの位置を左または右に整列する

ルックス > Layout > Blog ページでも、さまざまなオプションを指定することができます。 傑作写真 セクションで Display featured image(特性の画像を表示) チェックボックスを選択して、 Alignment(整列)Left(左) 또는 Right(右)で指定すると、ブログのアーカイブページとカテゴリーアーカイブページなどでサムネイルが左または右に表示されます。

GeneratePress:モバイルサムネイルの位置を変更する

しかし、モバイル機器では、サムネイルが左ではなく、上部に表示されます。

WordPress GeneratePress サムネイルの位置

特性の画像サイズを大きく指定した場合には、左側に表示されても大丈夫ですが、指定された特性の画像サイズが小さい場合、上記の図のように、モバイルデバイスからサムネイルがぎこちなく見えることがあります。

モバイル機器でもサムネイルが左(または右)に配置させたい場合は、次のようなCSSコードを使用することができます。


/* GeneratePress 테마: 모바일 썸네일 위치 왼쪽 정렬 */
/* Align the featured images (thumbnails) to the left on mobile devices in GeneratePress */

@media (max-width: 768px) {
.post-image-aligned-left .post-image, .post-image-aligned-right .post-image {
    float: left !important;
     padding-right: 20px;
}
}

特性の画像を左寄せに指定した場合に使用することができます。 右揃えの場合 padding-right 代わりに パディング左 値を指定することになります。

上記のコードを ルックス>ユーザー定義>追加CSS ページの一番下に追加します。 これにより、次のように携帯電話でもサムネイルが左(あるいは右)に配置されます。

WordPress GeneratePress サムネイルの位置を調整

変更を保存して、モバイル機器で確認してください。 まだサムネイルが必要に応じて表示されない場合は、キャッシュプラグインのキャッシュを削除して、ブラウザのキャッシュも削除した後、サイトを更新すると、正しく表示されます。

最後に、

以上で GeneratePress テーマを使用した場合、モバイル機器でサムネイルの位置を調整する方法について説明しました。 簡単なCSSを使用して、簡単にサムネイルの位置を変更することができます。 GeneratePress テーマの サイトライブラリでMarketerのようなテンプレートをロードして使用する場合にも、本文で紹介したCSSコードでモバイルサムネイルの位置を左に移動させることができます。

基本的なCSSを身につける簡単にカスタムすることが可能になります。 ホームページの作成の本で一番最初に扱う分野がHTMLとCSSです。 基本的なCSSは身につけるためにそれほど多くの時間がかかりません。 市販の CSS関連の本を一冊買って見てもされ、生活のコーディングのような無料の講義を通して学ぶことができます。

基本的な事項を身につけ、以降必要に応じて本やインターネットを参照して応用することができます。 すべてのCSSプロパティを覚える必要はありません。 そんなことある程度を理解して超えて必要なときに本を参照するか、グーグリングして、アプリケーションとなります。

※パートナーズの活動に一定額の手数料を受け取ることができます。

参照


23のコメント

コメント

  1. 今日有料版をインストールしました。
    CSSを付けてキャッシュも削除しました。
    私はそのままモバイルでサムネイルが中央に表示されます。
    何が間違ってたのでしょう?

    応答
  2. 良い情報ありがとうございます!

    私 Generatepress テーマ無料版を利用していますが、私はカスタマイズで追加CSSクリックすると映像のように左に数字で列区切りができず、ただ白紙になっていてコードを入れても認識できませんが、もしテーマで私が何が間違って触れたのでしょうか?

    CSSコードを追加すると、他のプログラミング言語のように関数や命令を認識して色が変わるようですが、私はそのような列番号のようにせずに、単に白い白紙に入力することができるようになっています! またコードを入力しても関数を認識して色が変わったりしません…。 キャッシュ削除は全部やってみました..!

    応答
    • CSSは、ルックス>カスタマイズ>追加CSSに追加できます。 「追加CSS」はテーマとは関係ない WordPressの独自の機能です。
      GeneratePress テーマでチャイルドテーマを作成し、チャイルドテーマ内のスタイルシート(style.css)ファイルにコードを入れることもできます。

      チャイルドテーマについては、次の記事を参照してください。

      https://cafe.naver.com/wphomepage/124

      クラウドウェイズを使用している場合は、サーバーキャッシュを削除する必要があり、変更がフロントエンドに反映される可能性があります。

      https://avada.tistory.com/2947

      応答
  3. どんなに検索をしても方法が見つからないのでお問い合わせください。
    CSSを修正する方法でGPテーマで本文でサムネイルが見えないようにすることは解決しました。 本文ではなく文字リスト(ホーム画面)でサムネイルが左についてくるものの中で並べ替えをしたいと思います。 簡単に解決になりそうですが、とても見つけられませんね T_T (GP有料テーマ購入すれば解決されるということは知っていますが..T_T) もし方法がわかるでしょうか?

    ちなみにチャットgptが教えてくれた以下のコードは適用できませんね。

    .home .generate-columns-container {
    ディスプレイ:フレックス;
    justify-content:center;
    align-items:中央;
    }

    応答
    • 基本的なCSSを使用すると簡単に可能になります。

      例:

      .post-image {
      テキスト整列:センター;
      }

      こういうことでチャットGPTに聞いてみると、正確な回答を得にくいでしょう。
      基本的なCSSを学んでください。 基本的なことは難しくなく、時間もあまりかかりません。

      https://cafe.naver.com/wphomepage/16730

      GPプレミアムを使えば、より自由にカスタマイズすることが可能です。
      https://avada.tistory.com/2299

      ジェネレートプレステーマの使い方:
      https://www.thewordcracker.com/tag/generatepress-%ed%85%8c%eb%a7%88/

      応答
      • 実は、本文ですべての画像を中央揃えさせるcssをすでに適用している状態なので、文字のサムネイルの中で並べ替えるのは、サムネイルを呼び出す(?)正確な何かが必要だと思いました。 お知らせいただいたコードを入れると中央揃えになります。 ありがとうございます。 ㅠㅠ

      • うまく動作するのは幸いですね。 基本的なCSSを知れば、難しくないように、このような部分は処理できるはずです。

    • GeneratePress テーマは Newspaper 同じマガジン専用テーマに比べて提供されているテーマのオプションが不足するが、カスタムして使用するには良いテーマです。 高速をしたい場合 Newspaperのようなテーマではなく、 GeneratePressより良いオプションである。

      楽しい休日送ってください。

      応答
  4. GeneratePress サムネイルの位置を調整する方法について書かれて読みました。 CSSを学ぶために本を購入することでしょうか? それとも無料講義を利用することがよいでしょうか?

    応答
    • こんにちは? 本サボ気軽され、インターネット上で無料講義をご覧になってもいます。 両方を一緒にいただいてもドゥェゴヨ。 基本的な内容を身に付けるには無料の講義でも十分なようですが、無料の講義の場合、無料なのでやっても、しなくてもいいという考えを持って開始した場合、途中で放棄する可能性が高くなります。 見つけ見れば有料インターネット講義もあるでしょう。

      応答