FMテンプレートでアイキャッチ画像を設定するとホーム画面の表示がヘンになる?!

私はブログ記事にアイキャッチ画像を設定していませんでした。

なぜかというと、アイキャッチ画像を設定すると、ホーム画面の記事の表示がヘンになるんです。

こんな ↓ かんじで、文章がすべて右寄せになってしまいます。

WP-2-1

 

 

 

 

 

 

 

 

 

 

 

 

同じ塾生さんのブログを見ると、きれいにアイキャッチ画像を設定できています。。。

なぜ私だけこんな風になってしまうんでしょう???

115921s

 

 

 

 

今までアイキャッチ画像の設定から逃げて来ましたが、この辺できちんと調べたいと思います!!

 

 

FMテンプレートでアイキャッチ画像に文章を回り込ませて表示する方法

 

ネットで検索したところ、コチラのブログ記事に修正方法が載っていました。

『WordPressで月収100万を目指すブログアフィリエイト入門 実践記』

コチラはフレンドマーク塾の先輩「いなけんさん」のブログです!!

 

いなけんさんのブログ記事では、スマホで表示した時の不具合を修正するという内容でしたが、PCの表示も修正できるかチャレンジしてみたいと思います。

 

ブログ記事を読んでみると、どうやらテンプレートのテーマの編集が必要なようです。

 

テーマを編集する前に、まずはバックアップをとろう

編集を失敗しても元に戻せるように、編集前のPHPソースをメモ帳などにバックアップしておきます

※これは重要なので、PHPソースを編集する時は必ず行ってください。

 

WordPressの左側メニューから、①【ダッシュボード】→②【外観】→  ③【テーマの編集】をクリックします。

次に、右側メニューから④【メインインデックスのテンプレート(index.php)】をクリックします。

 

WP-4-3-2

 

画面の真ん中のアルファベットと記号が並んでいる部分がPHPソースです。

この部分をメモ帳にコピー&ペーストします。

メモ帳はあらかじめ起動しておいてください。

 

下の手順で、コピー&ペーストします。

❖ コピー&ペーストをキーボードで操作する方法 ❖

手順1.PHPソースを全選択する

PHPソースのどこかをクリックし、キーボードの【CTRL】キー と A を押す。(PHPソースが全部青色になったらOK)

手順2.コピーする

PHPソースが全選択された状態で、【CTRL】キー と C を押す。

手順3.メモ帳にペーストする

メモ帳の画面のどこかをクリックしてから、キーボードの【CTRL】キー と V を押す。

 

テーマを編集してみよう

メモ帳にバックアップできたらテーマのPHPを編集します。

 

編集する部分は、下の ⑤(赤枠)⑥(青枠)の2ヶ所です。

WP-5

 

少し見づらいので拡大すると・・・

WP-5-3

 

 

⑤の部分を編集します。

<div class=”post_text”>を「< ! – -」と「- – >」で挟みます。

WP-5-6

 

 

⑥の部分を編集します。

</div>を「< ! – -」と「- – >」で挟みます。

WP-5-7

 

編集は以上です。

【ファイルを更新】をクリックします。

 

 

アイキャッチ画像を設定して表示を確認してみよう

左側メニューから【投稿】→【投稿一覧】をクリックし、アイキャッチ画像を設定したい記事タイトルをクリックします。

次に、右下の【アイキャッチ画像を設定】をクリックします。

WP-1-5

 

今回アイキャッチ画像に設定する画像は、すでにWordPressにアップロード済なので【メディアライブラリ】タブをクリックします。

WP-6-5

 

※ご自身のPCに保存されている画像をWordPressにアップロードして、アイキャッチ画像に設定する場合は【ファイルをアップロード】タブからアップロードしてください。

 

アイキャッチ画像を設定したブログ記事を確認します。

 

WP-6-3-1

 

きちんとアイキャッチ画像の周りに文章が回り込むように表示されました。

o(・∇・o)(o・∇・)o ヤッタ!

 

最後までお読みいただき、ありがとうございました。




ポチっと押してくれると泣いて喜びます(*´ω`*)

Comment

  1. トモ より:

    栗丘さん、こんばんはトモです。

    この現象は、私が初めてブログの記事投稿した時と
    同じ現象ですよ!

    困ってしまって、他の方たちのコメントで
    助けてもらいました。

    こんなに詳しく解決方法が書かれているなんて・・・。

    とても参考になりました^^

    これからも、よろしくお願いします。

    ポチ完了です。

    • kuriokamami より:

      トモさん、こんばんは。

      コメントありがとうございます!

      トモさんもアイキャッチ画像がヘンになっていたんですね!!
      私だけかと思ってました(^^;)

      少しづつWordPressやFMテンプレートに慣れてきました。
      これからもいろいろ調べて行きたいと思います。

      応援ありがとうございました!

  2. まかろん より:

    栗丘さん、こんばんは。
    15期生 まちこです。お世話になってます。

    私も、アイキャッチ画像を設定すると変になるので、
    単に画像を挿入するだけにしてました。
    テンプレートのテーマを編集しないと
    うまくいかないものだったのですね。

    そもそも、アイキャッチ画像と普通に画像挿入したときの違いが
    よくわかってなかったりしますが(^_^;)

    勉強になりました。ありがとうございます。
    応援完了です♪

    • kuriokamami より:

      まかろんさん、こんばんは。

      コメントありがとうございます!
      私の記事が参考になって良かったです。

      私も実はアイキャッチ画像と普通の画像とで何が違うのか分かりませんでした。
      「でも何か違いがあるはず!」と思って調べてみたところ、やっぱりありました!

      アイキャッチ画像にした方がSEO対策の効果がありました。
      ですが、ただ単にアイキャッチ画像を挿入しただけではSEO対策にはならないんです。

      その仕組みと設定方法などを記事にアップする予定なので、良かったらまた見に来てくださいね。

      応援ありがとうございました~

  3. いなけん より:

    栗丘さん、こんばんは。いなけんです。

    僕の記事が参考になったようでよかったです。^^

    今後ともよろしくお願いします。

    では。では。

    • kuriokamami より:

      いなけんさん、はじめまして。

      いなけんさんのブログ記事を参考にさせていただきました。
      ありがとうございました。

      また、私のブログにご訪問いただきありがとうございました。
      今後もよろしくお願いします。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ブログ運営者

ブログ運営者

はじめまして。
ブログ運営者の栗丘 まみと申します。

非正規(契約社員)としてフルタイムで働きながら主婦業もしている、いわゆる兼業主婦です。

「夢をかなえて充実した人生にしたい」という思いからアフィリエイトを始めました。

⇒ 詳しくはコチラ

人気ブログランキング

栗丘まみの最新e-Book

ブログ,記事,遅い,早く

オススメ電子書籍

オススメ電子書籍

Amazonでランキング1位を獲得した電子書籍が今なら期間限定で¥0でダウンロードできます!

▲トップへ戻る