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(右)で指定すると、ブログのアーカイブページとカテゴリーアーカイブページなどでサムネイルが左または右に表示されます。
しかし、モバイル機器では、サムネイルが左ではなく、上部に表示されます。
特性の画像サイズを大きく指定した場合には、左側に表示されても大丈夫ですが、指定された特性の画像サイズが小さい場合、上記の図のように、モバイルデバイスからサムネイルがぎこちなく見えることがあります。
モバイル機器でもサムネイルが左(または右)に配置させたい場合は、次のような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 ページの一番下に追加します。 これにより、次のように携帯電話でもサムネイルが左(あるいは右)に配置されます。
変更を保存して、モバイル機器で確認してください。 まだサムネイルが必要に応じて表示されない場合は、キャッシュプラグインのキャッシュを削除して、ブラウザのキャッシュも削除した後、サイトを更新すると、正しく表示されます。
最後に、
以上で GeneratePress テーマを使用した場合、モバイル機器でサムネイルの位置を調整する方法について説明しました。 簡単なCSSを使用して、簡単にサムネイルの位置を変更することができます。 GeneratePress テーマの サイトライブラリでMarketerのようなテンプレートをロードして使用する場合にも、本文で紹介したCSSコードでモバイルサムネイルの位置を左に移動させることができます。
基本的なCSSを身につける簡単にカスタムすることが可能になります。 ホームページの作成の本で一番最初に扱う分野がHTMLとCSSです。 基本的なCSSは身につけるためにそれほど多くの時間がかかりません。 市販の CSS関連の本を一冊買って見てもされ、生活のコーディングのような無料の講義を通して学ぶことができます。
基本的な事項を身につけ、以降必要に応じて本やインターネットを参照して応用することができます。 すべてのCSSプロパティを覚える必要はありません。 そんなことある程度を理解して超えて必要なときに本を参照するか、グーグリングして、アプリケーションとなります。
※パートナーズの活動に一定額の手数料を受け取ることができます。
今日有料版をインストールしました。
CSSを付けてキャッシュも削除しました。
私はそのままモバイルでサムネイルが中央に表示されます。
何が間違ってたのでしょう?
こんにちは、ワードマン様。キャッシュの問題のようです。クラウドウェイズをご利用の場合は、次の記事を参考にサイトキャッシュを完全に削除してください。
https://www.thewordcracker.com/basic/%ed%81%b4%eb%9d%bc%ec%9a%b0%eb%93%9c%ec%9b%a8%ec%9d%b4%ec%a6%88cloudways-%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%ba%90%ec%8b%9c-%ec%82%ad%ec%a0%9c%ed%95%98%ea%b8%b0/
クラウドウェイズでpurge押して試してみたけど。同じですね。
答えがないようです...
ありがとうございます。
GP Premium以外のプラグインをすべて無効にし、キャッシュを削除してからもう一度確認してみますか?
それでもできない場合は、他人の電話でも確認してみてください。
ありがとうございます。キャッシュの問題ではなく、私が使っているギャラクシーフォンだけこんな感じですね。
ただし、他のスマートフォンで見ると、写真の横に文字が1文字ずつ縦に並んでいます。
가
ナ
다
라
このように。これは普通ですか?
このブログでも同様の現象が発生しますか?
いいえ。このブログでは普通に見えます。
迷惑になりますが、お答えいただきありがとうございます。
サイトは確認してみませんでしたが、モバイルで画像の幅を少し減らしてみてはいかがでしょうか?
画像の幅が広く、画像の横にテキストが入る場所が足りないと、このような現象が時々発生するようです。
先生が使っている画像サイズがわかりますか?したがって、設定してみましょう。
こんにちは、ワードマン様。連休にもブログを訪問していただき、コメントまでつけていただきありがとうございます。
私は普通の幅を1000pxや800px程度に設定する方です。
webp形式で主に保存する方で、Canvaサービスを利用して画像を作成する際にはJPGとして保存します。
そして、アップロード前に、ほとんど画像圧縮サイトで画像を圧縮した後にアップロードしています。
既存の画像をWEBP形式に変換することも役に立ちます。これに関しては、以下の記事を参照してください。
https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94-webp-%EB%B3%80%ED%99%98-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-converter-for-media/
いつも親切な回答ありがとうございます。
ワープ情報はこのブログが最高です(Tabon)
ルックス > Layout > Blog> Featured Images
このページはありませんが、これは有料ですかㅠㅠ
GeneratePress 有料版で提供される機能です。
良い情報ありがとうございます!
私 Generatepress テーマ無料版を利用していますが、私はカスタマイズで追加CSSクリックすると映像のように左に数字で列区切りができず、ただ白紙になっていてコードを入れても認識できませんが、もしテーマで私が何が間違って触れたのでしょうか?
CSSコードを追加すると、他のプログラミング言語のように関数や命令を認識して色が変わるようですが、私はそのような列番号のようにせずに、単に白い白紙に入力することができるようになっています! またコードを入力しても関数を認識して色が変わったりしません…。 キャッシュ削除は全部やってみました..!
CSSは、ルックス>カスタマイズ>追加CSSに追加できます。 「追加CSS」はテーマとは関係ない WordPressの独自の機能です。
GeneratePress テーマでチャイルドテーマを作成し、チャイルドテーマ内のスタイルシート(style.css)ファイルにコードを入れることもできます。
チャイルドテーマについては、次の記事を参照してください。
https://cafe.naver.com/wphomepage/124
クラウドウェイズを使用している場合は、サーバーキャッシュを削除する必要があり、変更がフロントエンドに反映される可能性があります。
https://avada.tistory.com/2947
どんなに検索をしても方法が見つからないのでお問い合わせください。
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より良いオプションである。
楽しい休日送ってください。
GeneratePress サムネイルの位置を調整する方法について書かれて読みました。 CSSを学ぶために本を購入することでしょうか? それとも無料講義を利用することがよいでしょうか?
こんにちは? 本サボ気軽され、インターネット上で無料講義をご覧になってもいます。 両方を一緒にいただいてもドゥェゴヨ。 基本的な内容を身に付けるには無料の講義でも十分なようですが、無料の講義の場合、無料なのでやっても、しなくてもいいという考えを持って開始した場合、途中で放棄する可能性が高くなります。 見つけ見れば有料インターネット講義もあるでしょう。