検索
ホームページCMS チュートリアル&#&プレスWordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

準備作業

「要素の検査」機能を備えたブラウザを使用する必要があります。私はそれを使用します360;

メモ帳エディタまたは Dreamweaver が必要です。メモ帳の使用は新たな問題を引き起こしやすいため、お勧めできません。

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

#問題の説明

WordPress の背景に入り、「記事を書く」を見つけます。非常に小さな画像を 2 枚連続して挿入すると、図のように画像が自動的に折り返されることがわかります。その後、記事を公開すると、2 つの画像が 2 行に表示されていることがわかります。

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

#理由を見つけてください

正直に言うと、組版の問題に関しては、CSS の問題であることをデフォルトにすることができます。また、最初はテーマの問題かもしれないと思ったので、デフォルトのテーマに切り替えましたが、 3つの公式テーマ、[Twenty Seventeen]のみ 】このテーマは、デフォルトでは書き込み時に行を折り返すことはありません。

私が遭遇した例で違いを見てみましょう まず、背景表示は正常ですが、公開後、現在のテーマは Twenty Seventeen テーマとは異なる効果を示します。

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

#関連する推奨事項: 「Wordpressの記事内の写真を横に並べる方法WordPress チュートリアル

#」

CSS を見つけて変更を開始します

##問題のページを開き、画像の 1 つを見つけてマウスを右クリックし、[要素の検査]を選択します

Wordpressの記事内の写真を横に並べる方法

下の編集エリアで CSS を変更します。

Wordpressの記事内の写真を横に並べる方法

ここでの変更により、開発者やウェブマスターの友人の利便性を考慮して、行の折り返しに影響を与える表示属性を見つけました。チェック マークをチェックすると、画像で行の折り返しが実現されます。この属性のブロック キー値により改行文字が自動的に生成されるため、デフォルトで画像が折り返されることをお知らせします。

Wordpressの記事内の写真を横に並べる方法#このステップでは、変更する CSS ファイルを見つけます。

Wordpressの記事内の写真を横に並べる方法マウスを置くと、 on アイコンの右上隅が表示されると、リンク アドレス プロンプトが生成されます。これは、属性が配置される CSS ファイルの場所であり、変更する必要がある場所でもあります。

ファイルを見つけてメモ帳で開き、検索します (検索する内容は、削除したい単語を直接指定することもできますが、前にレビュー要素で確認した内容と完全に一致する必要があることに注意してください) , そうでなければ、探している場所が間違っているはずです)をして、不要なものを削除してください。

#ブラウザのキャッシュをクリアし、更新して効果を確認してください。Wordpressの記事内の写真を横に並べる方法

この手順は実際には非常に簡単ですが、キャッシュをクリアしたことが確実でない限り、ファイル効果を表示する前に毎回この操作を実行することが非常に重要です。キャッシュがあると、いくら変更しても効果が現れず、混乱するだけだからです。以下に示す操作: Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

エディターに関連する CSS ファイルを変更する

上記の変更を行った後でも、エディターで画像が変更されたままであることがわかりました。改行処理、このときの方法も上記と同様ですが、画像を右クリックして「要素の検査」を選択し、修正したいファイルを見つけて修正します。

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

Wordpressの記事内の写真を横に並べる方法

# エディターによる CSS 効果# ######バックエンドに満足した後、公開が完了した後、記事内の小さな画像が再び改行されていることを発見し、イライラしました。実際のところ、作業はまだ終わっていないだけです。続けてください。方法は上記と同じで、画像を見つけて右クリックし、要素を検査し、ファイルを変更し、キャッシュをクリアして、ページを更新します。 ################################# この時点では、フロントエンドとバックエンドでどのように画像を公開しても、 WordPress で記事を書くのは、Word ドキュメントを非常に従順に書くことに似ていることがわかります。 ###

以上がWordpressの記事内の写真を横に並べる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ブログをwordpress.comからwordpress.orgに簡単に移動する方法ブログをwordpress.comからwordpress.orgに簡単に移動する方法Apr 18, 2025 am 11:33 AM

ブログをwordpress.comからwordpress.orgに移動しますか? 多くの初心者はWordPress.comから始めますが、すぐに制限を実現し、自己ホストされたWordPress.orgプラットフォームに切り替えたいと考えています。 このステップバイステップガイドでは、WordPress.comからWordPress.orgにブログを適切に移動する方法を示します。 なぜwordpress.comからwordpress.orgに移行するのですか? WordPress.comを使用すると、誰でもアカウントを作成できます

IFTTT(およびその他)でWordPressとソーシャルメディアを自動化する方法IFTTT(およびその他)でWordPressとソーシャルメディアを自動化する方法Apr 18, 2025 am 11:27 AM

WordPress Webサイトやソーシャルメディアアカウントを自動化する方法をお探しですか? 自動化を使用すると、WordPressのブログ投稿やFacebook、Twitter、LinkedIn、Instagramなどで自動的に共有できます。 この記事では、IFTTT、Zapier、およびUncanny Automatorを使用してWordPressとソーシャルメディアを簡単に自動化する方法を紹介します。 WordPressとソーシャルメディアを自動化する理由 WordPreを自動化します

WordPressでカスタムメニュー項目の制限を修正する方法WordPressでカスタムメニュー項目の制限を修正する方法Apr 18, 2025 am 11:18 AM

ほんの数日前、ユーザーの1人が異常な問題を報告しました。問題は、彼がカスタムメニュー項目の限界に達することです。メニュー項目の制限に到達した後に保存するコンテンツはまったく保存されません。この問題を聞いたことがないので、ローカルインストールで試してみることにしました。 200を超えるメニュー項目が作成され、保存されました。効果はとても良いです。 100個のアイテムをドロップダウンリストに移動し、それらを非常によく保存します。その後、サーバーに関係している必要があることがわかりました。さらなる研究の後、他の多くの人が同じ問題に遭遇したようです。深く掘り下げた後、この問題を強調したTRACチケット(#14134)を見つけました。よく読んでください

WordPressのカスタム分類法にカスタムメタフィールドを追加する方法WordPressのカスタム分類法にカスタムメタフィールドを追加する方法Apr 18, 2025 am 11:11 AM

WordPressのカスタム分類法にカスタムメタフィールドを追加する必要がありますか? カスタム分類法により、カテゴリとタグ以外にコンテンツを整理できます。他のフィールドを追加してそれらを説明するのが便利な場合があります。 この記事では、作成した分類法に他のメタフィールドを追加する方法を紹介します。 カスタムメタフィールドはいつカスタム分類法に追加する必要がありますか? WordPressサイトで新しいコンテンツを作成すると、2つのデフォルトの分類法(カテゴリとタグ)を使用して整理できます。 一部のWebサイトは、カスタム分類法の使用から恩恵を受けます。これらを使用すると、コンテンツを他の方法で並べ替えることができます。 例えば、

Windowsライブライターを使用してWordPressにリモートで公開する方法Windowsライブライターを使用してWordPressにリモートで公開する方法Apr 18, 2025 am 11:02 AM

Windows Live Writerは、デスクトップからWordPressブログに直接投稿することができる多用途のツールです。これは、ブログを更新するためにWordPress管理パネルにログインする必要がないことを意味します。このチュートリアルでは、Windows Live Writerを使用してWordPressブログのデスクトップ公開を有効にする方法を紹介します。 WordPressにWindows Live Writerをセットアップする方法 ステップ1:WordprでWindows Live Writerを使用するには

WordPress Visual Editorで白いテキストと欠落ボタンを修正する方法WordPress Visual Editorで白いテキストと欠落ボタンを修正する方法Apr 18, 2025 am 10:52 AM

最近、ユーザーの1人が非常に奇妙なインストールの問題を報告しました。投稿を書くとき、彼らは彼らが書くものは何も見ることができません。ポストエディターのテキストは白だからです。さらに、すべてのVisual Editorボタンが欠落しており、VisualからHTMLに切り替える機能も機能しません。この記事では、WordPress Visual Editorで白いテキストと欠落したボタンの問題を修正する方法を示します。 初心者に注意:他のWebサイトのスクリーンショットで見られる隠されたボタンを探しているなら、キッチンシンクを探しているかもしれません。 Kitchen Sinkアイコンをクリックして、下線、​​Wordからのコピーなどの他のオプションを表示する必要があります。

WordPressのユーザーメールでアバターを表示する方法WordPressのユーザーメールでアバターを表示する方法Apr 18, 2025 am 10:51 AM

WordPressのユーザーメールでアバターを表示しますか? Gravatarは、ユーザーのメールアドレスをオンラインアバターに接続するネットワークサービスです。 WordPressは、コメントセクションに訪問者のプロフィール写真を自動的に表示しますが、サイトの他の領域に追加することもできます。 この記事では、WordPressのユーザーメールでアバターを表示する方法を紹介します。 グラバタルとは何ですか、なぜそれを表示する必要がありますか? Gravatarは、世界的に認識されているアバターの略で、画像をメールアドレスにリンクできるようになります。 ウェブサイトがサポートしている場合

WordPressのデフォルトのメディアアップロード場所を変更する方法WordPressのデフォルトのメディアアップロード場所を変更する方法Apr 18, 2025 am 10:47 AM

WordPressのデフォルトのメディアアップロード場所を変更しますか? メディアファイルを他のフォルダーに移動すると、Webサイトの速度とパフォーマンスが向上し、バックアップをより速く作成することができます。また、自分に最適な方法でファイルを整理する自由を提供します。 この記事では、WordPressのデフォルトのメディアアップロード場所を変更する方法を紹介します。 デフォルトのメディアアップロード場所を変更する理由 デフォルトでは、WordPressは/wp-content/uploads/folderにすべての画像およびその他のメディアファイルを保存します。 このフォルダーには、さまざまな年と数ヶ月の子供がいます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール