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

関連カード2をカスタマイズ

MEMO 追記(20180915)
関連カード2で記事タイトルが、スマホ表示だと下によってしまうのを修正しました。画像の下に余白ができるのも修正しました。

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

この記事では
関連記事カード2をカスタマイズした方法を説明。

このサイトの環境

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

こんな感じに変更(PC)

Before

関連カードカスタマイズ前

After

関連カードカスタマイズ後

After 2

関連カードカスタマイズ後2


こんな感じに変更(スマホ)

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

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

関連記事カード2をカスタマイズする

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

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

そのなかで今回は関連記事カード2をカスタマイズしていきます。

ショートコード(関連記事2)

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

SANGOサポーターを持っている人はURLだけでもっと簡単ですね!
PORIPUを使っている人は投稿一覧でIDを確認できるからめちゃ便利!

カスタマイズ方法

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

追加CSSの使い方はこちら

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

style.cssにコードを追加する

チャーリーブラウンのプロフィール チャーリーブラウンのプロフィールとスヌーピーとの人気の格差
style.css(追加するコード:関連記事カード2)
style.css(追加するコード:関連記事カード2)

パターン2

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

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


1.アイコン変更①

.longc_linkto .c_linkto_text:afterの{content: “\f35a”; font-family: “Font Awesome 5 Free”; font-size: 2.3em;}部分を変更。


2.アイコン変更②

.longc_linkto .c_linkto_text:afterの{content: “\f152”; font-family: “Font Awesome 5 Free”; font-size: 2.6em;}部分を変更。


3.アイコン変更③

.longc_linkto .c_linkto_text:afterの{content: “\f0a4”; font-family: “Font Awesome 5 Free”; font-size: 2.5em;}部分を変更。


4.アイコン変更④

.longc_linkto .c_linkto_text:afterの{content: “\f14d”; font-family: “Font Awesome 5 Free”; font-size: 2.2em;}部分を変更。


5.青っぽく

.longc_linkto .c_linkto_text:beforeの{background : #78B0FF;} .longc_linkto .c_linkto_text:afterの{background : #BADEFF;} .longc_linktoの{background : #F2F8FF;}


6.赤っぽく

.longc_linkto .c_linkto_text:beforeの{background : #FF7979;} .longc_linkto .c_linkto_text:afterの{background : #FFBABA;} .longc_linktoの{background : #FFF2F2;}


7.黄色っぽく

.longc_linkto .c_linkto_text:beforeの{background : #FFBE78;} .longc_linkto .c_linkto_text:afterの{background : #FFF0BA;} .longc_linktoの{background : #FFF8F2;}


8.紫っぽく

.longc_linkto .c_linkto_text:beforeの{background : #9E78FF;} .longc_linkto .c_linkto_text:afterの{background : #CDBAFF;} .longc_linktoの{background : #F6F2FF;}


カードの下に「つづきを読む」とアイコンが追加されました!

 

 

手順まとめ

追加CSSのまとめ

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

いつかやる(思った以上に大変だった)