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

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

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

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

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

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


この記事では
関連記事カード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
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加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つもカスタマイズするのか?

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

 

コメント( ˶ˆ꒳ˆ˵ )

avatar