【SANGO】関連記事カードに「関連」「続きを読む」を追加するカスタマイズ

WordPressテーマ「SANGO」の関連記事カードに関連・続きを読むの文字をプラスするカスタマイズを紹介します。

LIZLOGの使用中テーマ

テーマ

子テーマ

カスタマイズの完成形

 

Before

After

Real

【随時更新】WordPress(ワードプレス)テーマ「SANGO」カスタマイズまとめ

 

カスタマイズの注意点

タイトルが続きを読むのラベルまで行くとそれ以降は表示されませんので特にスマホ表示では注意してください。また、カスタマイズの動作保証はサイト環境により異なりますので致しかねます。自己責任でお願いしますm(._.)m

SANGO関連記事カードのカスタマイズ

事前準備

SANGOの子テーマ(又はPORIPU)を使いカスタマイズを行います。

子テーマをダウンロードしておきましょう。

参考 WordPressで子テーマを活用して安全にカスタマイズを行う方法サルワカ

カスタマイズは以下の2つの方法があります。

どちらにコードを記載しても大丈夫ですが、カスタマイズ前は必ずバックアップを取る事をおすすめします。

  • WordPress 外観 テーマの編集 スタイルシート(style.css)
  • カスタマイズ 追加CSS

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

CSS
/*--------------------------------------
  関連記事(横長)
--------------------------------------*/
.linkto {
    position: relative;
    max-width: 700px;/*カードの幅*/
}
.linkto:before {
    position: absolute;
    content: "関連";
    top: 10px;
    left: 125px;
    display: inline-block;
    width: 47px;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    background: #関連背景カラーコード;
    font-size: 14px;
    line-height: 28px;
    color: white;
    letter-spacing: 3px;
    padding-left: 3px;
    border-radius: 2px;
}
.linkto:after{
	position: absolute;
	font-family: 'Quicksand','Avenir','Arial',sans-serif,FontAwesome;
	content:'続きを読む \f138';
	right:5px;
	bottom: 5px;
	padding:1px 10px;
	background:#5b5b5b;
	color:#fff;
	font-size: .8em;
	border-radius:2px;
}
.linkto .tbtext {
    padding: 35px 0px 0px 5px;
    vertical-align: top;
    font-size: .95em;
}

カードの幅はCSSの/*カードの幅*/の数字を変えることで好きな長さに調節できます。

ショートコード
[kanren id="投稿ID"]

手順まとめ

  1. 子テーマを追加
  2. バックアップ
  3. カスタマイズコードを追加→保存
  4. キャッシュ削除
  5. 完了!

以上がWordPressテーマ「SANGO」の関連記事カードに関連・続きを読むを追加するカスタマイズになります。

初めてのカスタマイズ記事、SANGOユーザーの皆さんのお役に立てると幸いです^^