[SANGOカスタマイズ]関連記事(横長)のデザインを変更

とっても気に入っているWordPressのテーマ「SANGO」

とってもデザインが可愛く、表示スピードも速いので気に入ってます!

しかし、関連記事(横長)を載せる時のデザインがちょっとシンプル過ぎて寂しかったので自分なりにカスタマイズしてみました!

今回は、SANGOの関連記事(横長)のデザイン変更のカスタマイズをご紹介します。

今回は、「関連」と「続きを読む」というワードを入れるカスタマイズです。なので、トップページなどではデフォルトのデザインを使いたかったので別で自作のショートコードを作る方法をご紹介します。

みっぴー

完成イメージはこんな感じ
カスタマイズ後のイメージ
Before

After

【スポンサーリンク】

今回の関連記事(横長)カスタマイズの内容

みっぴー

今回のカスタマイズでこんな事が出来るようになるよ!

今回の関連記事(横長)カスタマイズの内容をまとめると下記の通りです。

関連記事(横長)カスタマイズの内容
  1. オリジナルの関連記事をショートコードで呼び出す
  2. 好きなデザインに指定する

修正するファイル

今回のカスタマイズで編集するファイルは下記の通りです。

このカスタマイズで修正するファイル
  1. functions.php
  2. style.css
注意
functions.phpのファイルを編集する場合は、必ずバックアップを取った上で編集してください。functions.phpの記入を誤るとブログの画面が真っ白になって管理画面にさえも入れなくなります。編集は慎重に行ってください。万が一、真っ白になった場合は「[WordPress]functions.phpを編集後に画面が真っ白になった時の対処法と注意点」を参考にしてください。

[WordPress]functions.phpを編集後に画面が真っ白になった時の対処法と注意点

関連記事(横長)のデザインを変更する方法

デフォルトの関連記事(横長)のデザインを変更する方法もありですが、「関連」というワードが入るデザインに変更するのでデフォルトのデザインはそのままで別に関連記事を呼び出すショートコードを作ってデザインを変更するカスタマイズの方法を採用しています。

ぱん猫

なんでデフォルトを変えないの?

みっぴー

デフォルトは、トップページなどで呼び出す時に使いたいからだよ

ぱん猫

でもショートコードを別で作るなんて大変じゃないの?

みっぴー

大丈夫!下記をコピペするだけで出来るよ!

今回の関連記事のカスタマイズの手順は、下記の通りです。

    関連記事のカスタマイズ手順
  • STEP.1
    ショートコードを定義
    functions.php」にこれから紹介するコードを追記して新しいショートコードを定義します。
  • STEP.2
    CSSを定義
    style.css」に新しいCSSを追加して関連記事のスタイルを変更します。
  • STEP.3
    ショートコード置換
    旧関連記事のショートコードを新しいものに置換する。

1.ショートコードを定義

まず、関連記事を呼び出すショートコードを定義します。

functions.phpを編集します。

お使いのテーマフォルダの中の「functions.php」に下記のコードを追加してください。

functions.php
//関連記事オリジナルショートコード
add_shortcode('kanrenori','sng_kanrenori_linkm');
function sng_kanrenori_linkm($atts) {
  $output = '';
  $id = isset($atts['id']) ? esc_attr($atts['id']) : null;
  if($id){
    $ids = (explode(',',$id));
  }
  if(isset($ids)) {
  foreach ($ids as $eachid) {
    $img = (get_the_post_thumbnail($eachid)) ? get_the_post_thumbnail($eachid, 'medium') : '<img src="'.featured_image_src('medium').'">';
    $url = esc_url(get_permalink($eachid)); //URL
    $title = esc_attr(get_the_title($eachid));
    if($url && $title) {
      $output .= <<<EOF
      <a class="linkmo table" href="{$url}">
              <span class="tbcell tbimg">{$img}</span>
              <span class="tbcell ostext">{$title}</span>
            </a>
EOF;
      }
      } //endforeach
  } else {$output = '関連記事のIDを正しく入力してください';}
      return $output;
}
//END 関連記事オリジナルショートコード
functions.phpはどこ?

レンタルサーバーのFTPにログインしてください。

編集するブログのファイルが入ってるところまで進んでください。

みっぴー

大体の場合はブログ名のフォルダの中かな?

それから下記の通り進んでいくとfunctions.phpがあります。

ブログ名/wp-content/themes/お使いのテーマ/functions.php

子テーマでカスタマイズをしている人は、子テーマの中のfunctions.phpに追記してください。

2.CSSを定義

次に定義したショートコードで呼び出す関連記事のデザインをCSSで定義します。

お使いのテーマの「style.css」に下記を記入してください。

style.css
/*関連記事オリジナルカスタマイズ*/
.linkmo .tbimg{/*画像*/
    width: 140px;/*画像のサイズ*/
}
.linkmo{
    max-width: 100%;/*最大幅*/
    position: relative;/*相対位置*/
    margin: 1em 0 1.5em;/*外側のスペース*/
    padding: 10px;/*内側の余白*/
    border: solid 1px #c0c0c0;/*外枠の色*/
    border-radius: 3px;/*外枠の角丸*/
    background: #fff;/*背景色*/
    color: #555;/*文字色*/
    font-weight: 700;/*文字の太さ*/
    box-shadow: 4px 4px 0px #666;/*影*/
}

.linkmo:before {/*疑似要素(前)*/
    position: absolute;/*基準を元に*/
    display: inline-block;/*縦横設定できるように*/
    content: "関連";/*挿入する文字*/
    top: 5px;/*上からの位置*/
    left: 155px;/*左からの位置*/
    width: 43px;/*横幅*/
    height: 23px;/*縦幅*/
    text-align: center;/*中央揃え*/
    vertical-align: middle;/*縦の中央揃え*/
    background: #fa8072;
    font-size: 13px;/*文字の大きさ*/
    line-height: 24px;/*行の高さ*/
    color: white;/*文字色*/
    letter-spacing: 2px;/*文字間隔*/
    padding-left: 2px;/*内側の余白*/
    border-radius: 2px;/*角丸*/
}
.linkmo:after{
    position: absolute;
    font-family: FontAwesome;
    content:'続きを読む \f101';
    right:5px;/*「続きを読む」の位置*/
    bottom: 5px;/*「続きを読む」の位置*/
    padding:1px 10px;/*「続きを読む」の周りのスペース*/
    background:#dc143c;/*「続きを読む」の背景色*/
    color:#fff;/*「続きを読む」の文字色*/
    font-size: 0.8em;/*「続きを読む」の文字サイズ*/
    border-radius:2px;/*「続きを読む」の角丸*/
}
.linkmo:hover{/*マウスホバーしたとき*/
    background:#fff;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
.linkmo img,
.linkmo:hover img {
    box-shadow: none;/*画像のサイズ*/画像の影なし
}
.linkmo .ostext {/*テキスト部分*/
    padding: 17px 10px 14px 8px;/*内側の余白(上右下左)*/
    font-size: 0.9em;/*文字のサイズ*/
}
@media (min-width:768px) and (max-width:1023px) {
.linkmo {
    padding:5px;/*内側の余白*/
}
.linkmo .ostext {/*テキスト部分*/
    padding: 19px 0 20px 2px;/*余白*/
    font-size: 0.9em;/*文字のサイズ*/
}
.linkmo:before {/*疑似要素(前)*/
    width: 40px;/*横幅*/
    height: 20px;/*縦幅*/
    font-size: 12px;/*文字の大きさ*/
    line-height: 22px;/*行の高さ*/
}
.linkmo:after {
    right: 4px;/*「続きを読む」の位置*/
    bottom: 4px;/*「続きを読む」の位置*/
}
}

@media (max-width:767px){
.linkmo .tbimg{/*画像*/
    width: 120px;/*画像のサイズ*/
}
.linkmo {
    padding:3px;/*内側の余白*/
}
.linkmo .ostext {/*テキスト部分*/
    padding: 19px 0 20px 2.5px;/*余白*/
    font-size: 0.8em;/*文字のサイズ*/
}	
.linkmo:before {/*疑似要素(前)*/
    top: 3.1px;/*上からの位置*/
    left: 125px;/*左からの位置*/
    width: 40px;/*横幅*/
    height: 20px;/*縦幅*/
    font-size: 12px;/*文字の大きさ*/
    line-height: 22px;/*行の高さ*/
}
.linkmo:after {
    right:2px;/*「続きを読む」の位置*/
    bottom: 2px;/*「続きを読む」の位置*/
}
}
/*関連記事オリジナルカスタマイズここまで*/

3.ショートコード置換

最後に定義したショートコードを記事内に呼び出します。

今回作成した関連記事は下記のショートコードで呼び出せます。

ショートコード
[kanrenori id=""]

id=""のところは、これまで通り記事のidを入れてください。

過去の記事をで以前のショートコードを使っている場合は、Search Regexなどで置換してください。

kanren id="kanrenori id="に置換すればオッケーです。

デフォルトを変えたい場合

私はデフォルトをそのままで別で関連記事のショートコードを作ってデザインの変更をしましたが、もしデフォルトをそのまま変えたい場合は下記のCSSを設定するだけで完了します。

上記で説明したfunctions.phpの編集は不要です。

子テーマの「style.css」に下記をコピペするだけで完了します!

style.css
/*関連記事オリジナルカスタマイズ*/
.linkto .tbimg{/*画像*/
    width: 140px;/*画像のサイズ*/
}
.linkto{
    max-width: 100%;/*最大幅*/
    position: relative;/*相対位置*/
    box-shadow: 4px 4px 0px #666;/*影*/
    border: solid 1px #c0c0c0;/*線*/
}

.linkto:before {/*疑似要素(前)*/
    position: absolute;/*基準を元に*/
    content: "関連";/*挿入する文字*/
    top: 5px;/*上からの位置*/
    left: 155px;/*左からの位置*/
    display: inline-block;/*縦横設定できるように*/
    width: 43px;/*横幅*/
    height: 23px;/*縦幅*/
    text-align: center;/*中央揃え*/
    vertical-align: middle;/*縦の中央揃え*/
    background: #fa8072;
    font-size: 13px;/*文字の大きさ*/
    line-height: 24px;/*行の高さ*/
    color: white;/*文字色*/
    letter-spacing: 2px;/*文字間隔*/
    padding-left: 2px;/*内側の余白*/
    border-radius: 2px;/*角丸*/
}
.linkto:after{
    position: absolute;
    font-family: 'Quicksand','Avenir','Arial',sans-serif,FontAwesome;
    content:'続きを読む \f101';
    right:5px;/*「続きを読む」の位置*/
    bottom: 5px;/*「続きを読む」の位置*/
    padding:1px 10px;/*「続きを読む」の周りのスペース*/
    background:#dc143c;/*「続きを読む」の背景色*/
    color:#fff;/*「続きを読む」の文字色*/
    font-size: .8em;/*「続きを読む」の文字サイズ*/
    border-radius:2px;/*「続きを読む」の角丸*/
}
.linkto:hover{/*マウスホバーしたとき*/
    background:#fff;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
.linkto img,
.linkto:hover img {
    box-shadow: none;/*画像の影なし*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 17px 10px 14px 8px;/*内側の余白(上右下左)*/
    font-size: 0.9em;/*文字のサイズ*/
}

@media (min-width:768px) and (max-width:1023px) {
.linkto {
    padding:5px;/*内側の余白*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 19px 0 20px 2px;/*余白*/
    font-size: 0.9em;/*文字のサイズ*/
}
.linkto:before {/*疑似要素(前)*/
    width: 40px;/*横幅*/
    height: 20px;/*縦幅*/
    font-size: 12px;/*文字の大きさ*/
    line-height: 22px;/*行の高さ*/

}
.linkto:after {
    right: 4px;/*「続きを読む」の位置*/
    bottom: 4px;/*「続きを読む」の位置*/
}
}

@media (max-width:767px){
.linkto .tbimg{/*画像*/
    width: 120px;/*画像のサイズ*/
}
.linkto {
    padding:3px;/*内側の余白*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 19px 0 20px 2.5px;/*余白*/
    font-size: 0.8em;/*文字のサイズ*/
}	
.linkto:before {/*疑似要素(前)*/
    top: 3.1px;/*上からの位置*/
    left: 125px;/*左からの位置*/
    width: 40px;/*横幅*/
    height: 20px;/*縦幅*/
    font-size: 12px;/*文字の大きさ*/
    line-height: 22px;/*行の高さ*/
}
.linkto:after {
    right:2px;/*「続きを読む」の位置*/
    bottom: 2px;/*「続きを読む」の位置*/
}
}
/*関連記事オリジナルカスタマイズここまで*/

みっぴー

SANGOのカスタマイズ楽しい
Twitterのアカウント無駄にしてませんか?
あなたが予め設定した言葉をツイートしている人をフォローできるツール

だから、自分のブログに興味がある人だけを集める事が出来るので無駄なくアクセスアップが見込めます。


無料でも使えるので私も愛用中です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です