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

爱喝马黛茶的安东尼
リリース: 2019-07-16 13:20:37
オリジナル
4285 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート