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

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

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


このサイトの環境

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

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

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

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

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

こんな感じ 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
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

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

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

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

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

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

MENくん
完成です!

 

 

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

追加CSSのまとめ

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

 

コメント( ˶ˆ꒳ˆ˵ )

avatar