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

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

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

 

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

こんな感じに変更(PC)

Before

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

After

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


ほんまもんのカード

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

文字数は33文字です。

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


カスタマイズをする準備

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

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

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

ショートコードを挿入

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

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

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

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

MENくん
SANGOサポーターならURLだけでとっても簡単に挿入できます
くま3号
PORIPUならIDは投稿一覧でパッと確認
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

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

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

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

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

 

追記2018/12/26

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

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

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

 

 

手順まとめ

追加CSSのまとめ

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

コメント( ˶ˆ꒳ˆ˵ )

avatar