ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2021年7月12日| 2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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 テーマの Site LibraryでMarketerのようなテンプレートをロードして使用する場合にも、本文で紹介したCSSコードでモバイルサムネイルの位置を左に移動させることができます。

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

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

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

参照



2のコメント

コメント

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

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

      応答