【SANGOを自分でカスタマイズ】関連記事(横長)をカスタマイズしてみた

関連記事(横長)をカスタマイズ

追記 18.12.26
FontAwesome5のアイコンでも表示できるように、コードを一部変更しました。コードはこちら

 

この記事では
関連記事(横長)をカスタマイズした方法を説明。

こんな感じに変更(PC)

Before

関連記事出力(横長) カスタマ前

After

関連記事出力(横長) カスタマイズ後


ほんまもんのカード

関連カード2をカスタマイズ【SANGOを自分でカスタマイズ】関連カード2にオリジナル感を出してみた

文字数は33文字です。

関連記事(横長)のレスポンシブ


カスタマイズをする準備

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

ショートコードを挿入

WordPressのテーマでSANGOを使用している方は

ショートコードで関連記事を3パターン出力することができますよね。

そのなかで今回は関連記事(横長)をカスタマイズしていきます。

こちらのコードにIDを入れれば簡単に関連記事を出力できます。

MENくん

SANGOサポーターならURLだけでとっても簡単に挿入できます

くま3号

PORIPUならIDは投稿一覧でパッと確認

カスタマイズ方法

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

追加CSSの使い方はこちら

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

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

style.css(追加するコード:関連記事 横長)
style.css(追加するコード:関連記事 横長)

 

追記2018/12/26

style.css(追加するコード:関連記事 横長)

コードを追加したら、style.cssの保存アップデートキャッシュを削除して更新します。

直感的にわかりやすい感じになりました。

 

 

手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • WordPressのテキストエディタでショートコード挿入
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

ちょっとオリジナル感がでたわ