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

//関連記事オリジナルショートコード
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 関連記事オリジナルショートコード

/*関連記事オリジナルカスタマイズ*/
.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;/*「続きを読む」の位置*/
}
}
/*関連記事オリジナルカスタマイズここまで*/

[kanrenori id=""]