伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】AMPページと通常ページの記事タイトル下にアクセント画像を追加する方法

投稿日:2017年5月19日 更新日:



こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。

WordPressテーマ「AFFINGER4」のAMPページと通常ページの記事タイトル下にアクセント画像を追加する方法をご紹介します。

見本ページhttps://kanamii.jp/1514/amp/

当ブログでは、通常ページに小鳥の画像を入れています。
それを上記のように、AMPページでも同じように表示させるようにしました。

ページ後半では、通常ページのカスタマイズ方法も簡単に記録していきたいと思います。

興味のある方は、お好みのイラストやラインなどで可愛くカスタマイズしてみてくださいね♪

スポンサーリンク

事前準備

事前準備として、使用する画像を、あらかじめFTPで子テーマ内の「imeges」フォルダ内にアップロード→画像のパスをメモ帳にコピーしておきます。

画像サイズは通常ページの幅に合わせます。
【画像ファイル名】の部分は書き換えを忘れずに。

※コード内の「affinger4-child」の部分はお使いのテーマに合わせて変更してください。

---AFFINGER5---
affinger5-child

---AFFINGER5(JET)---
affinger5-jet-child

子テーマの作成

AMPページのカスタマイズでは「single-amp.php」を編集します。

AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の該当ファイルをFTPで子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

3,338view
WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...

今後のアップデートでAMPに関わる部分の変更(親テーマのコードの変更)があった場合は、再度子テーマの作成とカスタマイズが必要になります。

さらに、通常ページのカスタマイズも行う場合は、子テーマ内に「single.php」「single-type1.php」の2つのファイルをアップロード後、こちらのページ内の編集作業を行ってください。
こちらも、他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

AMPページへの画像追加方法

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-amp.php」(子テーマ)を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「タイトル」と入力してマークされる下記コードを探してくださいね。

上記コードのすぐ下に下記コードを追加します。

※【画像のパス】の部分は、あらかじめ準備しておいたコード、widthの「***」は画像の幅、heightの「***」は画像の高さに書き換えてください。
AMPページでは、画像サイズは必須ですので忘れずに入力するようにしてくださいね。

ここまでで、AMPページのカスタマイズは完了です。

パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。

3,083view
【AFFINGER4】AMP化方法の全手順をまとめました

WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...

通常ページへの画像追加方法

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-type1.php」(子テーマ)を開きます。

AMPページと同じように、パソコンの「Ctrlキー」+「F」で表示される検索欄に「タイトル」と入力してマークされる下記コードを探してくださいね。

上記コードのすぐ下に下記コードを追加します。

※【画像のパス】の部分は、あらかじめ準備しておいたコード、widthの「***」は画像の幅、heightの「***」は画像の高さに書き換えてください。

以上、AFFINGER4のAMPページと通常ページの記事タイトル下にアクセント画像を追加する方法をご紹介しました。

最後までお付き合いくださりありがとうございます。

関連記事

977view
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

  • About me
Kanami(かなみ)

Kanami(かなみ)

40代、4児の母です。 何気ない日常に幸せを感じるマイペースなヒト。 子育ての傍ら「自分にできることってなんだろう?」を模索しながらブログを書いています。

プロフィールページへ

Copyright© Kanamii , 2018 All Rights Reserved.