【SANGOを自分でカスタマイズ】記事下の関連記事タイトルをカスタマイズ

関連記事のタイトルに画像を挿入するカスタマイズ

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

このサイトの環境

テーマ
子テーマ
プラグイン

この記事では
関連記事タイトルにイラストをプラスするカスタマイズを説明。

関連記事のタイトルがちょっと味気ないな、、、
まだカスタマイズやってんの?記事書けよ。

気になっちゃってさ
カスタマイズするんだったら、記事にしろよ。

わかった!そうする!(これで他の記事に集中できる)

こんな感じ PC

Before

カスタム前PC

After

カスタム後PC


こんな感じ スマホ

Before

カスタム前スマホ

After

MENくん

画像が入るだけでオリジナル感がでました!


使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

関連記事タイトルをカスタマイズをする準備

SANGOの設定から記事下の関連記事タイトルを表示させます。※すでに表示させている人は飛ばしてください。

関連記事のタイトル記入
まずは、関連記事のタイトルを入力して、表示させましょう。WordPress外観カスタマイズSANGOのオリジナル機能の管理関連記事(記事下)からタイトルを記入します。

記事の下に関連記事のタイトルが表示されればOKです。

挿入する画像を用意します

イラストAC

出典|イラストACより

ぼくが画像を作るときはほとんどイラストAC(無料)で探しています。

どうしても見つからなかったり、これは色んなところで使えるな!と思える画像はAdobe Stock(有料)でダウンロードします。

おすすめのイラストACの作者


JPEG・PNGの場合

縦幅、横幅が120px以下になるように、切り取ったりリサイズしましょう。大きい画像でもできますが、追加のコードが必要になります。

画像のリサイズ
画像をWordPressにアップした後に切り取り、リサイズするのが簡単です。WordPressメディア画像を選んで画像を編集
注意
ぼくがカスタマイズした方法だと、画像のサイズが大きすぎると(縦横が120px以上だと)スマホでの表示が崩れてしまいます。

SVGの場合

イラストレーターが使用できる方はSVG形式で作成すると、スマホ表示のときにキレイに表示されます。

PNGスマホPNG
SVGスマホSVG
MENくん

SVG画像の方がめちゃくちゃキレイに表示されます!


では、アップロードして編集した画像(JPEG・PNG)もしくはSVG画像のURLをコピーして次に進みます。

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードを追加する

太文字の部分はお好みで変更してください。画像URLは先程アップしたものを貼り付けてください。

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

ディベロッパーツールなどを使用して、margin paddingを調整(位置調整)、widthを調整(サイズ調整)して終了です。

MENくん

完成です!

 

 

関連記事タイトルをカスタマイズする手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • SANGOのオリジナル機能で記事下の関連記事タイトルを表示。
  • 表示させたい画像を作成。
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

関連記事部分のカスタマイズはこれで終了!