AFFINGER5でSNSボタンのテキストを変更する方法|中級者向けカスタマイズ
AFFINGER5でSNSボタンのテキストを変更する方法|中級者向けカスタマイズ
AFFINGER5で、「アイキャッチ画像をタイトル下に表示」「投稿ページの上にSNSボタンを表示」と設定すると、下記のように上からタイトル→SNSボタン→アイキャッチという順で各要素が表示されます。

AFFINGER5の記事ページ

AFFINGER5の記事ページ

SNSボタンの詳しい設定方法については、下記の記事も参考にしてみてください。

ただこれだと、SNSボタンの位置がちょっと気になるという方もいるかもいるかもしれません。

そこで今回は、このSNSボタンの位置をアイキャッチ下に変更する方法を解説したいと思います。

カスタマイズの前に

アイキャッチ画像の設定

WordPress管理画面左メニューから『AFFINGER5 管理投稿・固定記事』という順にクリックします。

WordPress管理画面左メニューから『AFFINGER5 管理→投稿・固定記事』という順にクリック

WordPress管理画面左メニューから『AFFINGER5 管理→投稿・固定記事』という順にクリック

「アイキャッチ設定」の項目で、『アイキャッチ画像をタイトル下表示に変更する』にチェックを入れましょう。

『アイキャッチ画像をタイトル下表示に変更する』にチェックを入れる

『アイキャッチ画像をタイトル下表示に変更する』にチェックを入れる

ページ最下部の『save』ボタンをクリックし、設定を反映させます。

『save』ボタンをクリック

『save』ボタンをクリック

SNSボタンの設定

WordPress管理画面左メニューから『AFFINGER5 管理SNS』という順にクリックします。

WordPress管理画面左メニューから『AFFINGER5 管理→SNS』という順にクリック

WordPress管理画面左メニューから『AFFINGER5 管理→SNS』という順にクリック

投稿ページの上にSNSボタンを表示する』にチェックを入れましょう。

『投稿ページの上にSNSボタンを表示する』にチェックを入れる

『投稿ページの上にSNSボタンを表示する』にチェックを入れる

ページ最下部の『save』ボタンをクリックし、設定を反映させます。

『save』ボタンをクリック

『save』ボタンをクリック

AFFINGER5をカスタマイズするときの注意点

AFFINGER5をカスタマイズする時は、必ず子テーマを使いましょう。

親テーマをカスタマイズしても、テーマをバージョンアップすると、カスタマイズした内容が全て消えてしまいます。

しかし、子テーマを使えば、テーマをバージョンアップしてもカスタマイズした内容がそのまま保持されるので、安心してサイトをカスタマイズすることができます。

SNSボタンの位置をアイキャッチ下に変更する方法

子テーマの「single-type1.php」を開きます。

125行目付近の下記のコードを探しましょう。

上記のコードをコピーし、削除します。

コピーしたコードを、142行目付近の下記の位置に貼り付けます。

 <div class="entry-content"> の直上です。

これで、SNSボタンがアイキャッチ下に表示されるようになります。

SNSボタンの位置を変更した記事ページ

SNSボタンの位置を変更した記事ページ

まとめ

今回は、AFFINGER5の記事ページでSNSボタンの位置をアイキャッチ下に変更する方法を解説しました。

デフォルトのSNSボタンの位置が気になるという方は、ぜひ試してみてください。

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事