ゆーすけ(守屋祐輔)
最新記事 by ゆーすけ(守屋祐輔) (全て見る)
- 壁からほぼゼロ距離のモニターアーム。27インチも楽々支えます - 2019年3月19日
- 複業2.0とは会社員の強みを最大限に活かした働き方 - 2019年3月11日
- MacのSpotlightが消える時の対処法 - 2019年3月10日
- 複業10割、会社10割。どっちも全力で取り組むのが正解 - 2019年3月10日
- じゃがりこをアレンジしてじゃがアリゴ。お手軽ポテト料理 - 2019年3月8日
こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。
ワードプレステーマであるOPENCAGE（オープンケージ） 
のSTORK（ストーク）はカスタマイズが簡単で非常に使い勝手のいいテーマです。
便利な機能の1つに関連記事をこんな風にキレイに表示できる機能があります。
サムネイルとタイトルが一緒に表示され見た目がオシャレなのでよくお世話になってます。
これはSTORK（ストーク）に元から備わっているショートコードを利用しているのですが、なんとこの方法で関連記事を表示すると新しいタブでページを開くように設定することができません。
今回はSTORK（ストーク）にカスタマイズを加えて関連記事を新しいタブで開けるようにする方法を紹介します。
STORK（ストーク）カスタマイズ編
子テーマを用意する方法
メニューを2段表示する方法
ロゴを大きく表示する方法
カテゴリーラベルを消す方法
見出しを自由に変更する方法
ひと味違ったトップページにする方法
記事を3列表示させる方法
関連記事を新しいタブで表示する方法
テクニック編
CSSの変更が反映されない時の対処法
蛍光ペン風のマーカーを引くカスタマイズ方法
プロフィールを2つ設置する方法
カエレバ・ヨメレバをオシャレに表示する方法
画像に枠線を付けて目立たせる方法
特殊文字を使ってコードを紹介する方法
h2見出しの前にアドセンスを自動表示させる方法
疑似要素でアイコンを表示させる方法
記事の離脱率と読了率を無料で計測する方法
スポンサーリンク
問題点
関連記事を新しいタブで開けないと何が問題なのか。
そもそも関連記事を紹介するのはあくまでも読者さんのためにこういう別の情報もあるんですよと案内するためです。
ブロガーとしては1つでも多くの記事に目を通してもらいたいので積極的に関連記事を紹介するわけですが、別のページに移動してもらうということはつまり今まで読んでいた記事から離れてしまうことを意味します。
関連記事を読み終わって元の記事を忘れてしまわれては、読者さんとしても本来欲しかった情報を逃してしまうことに繋がりますし、書いた本人としても残念なことでしかありません。
そのため関連記事を新しいタブで開くことはお互いにとってメリットのあることなんです。
カスタマイズ方法
ではさっそくSTORK（ストーク）をカスタマイズしていきましょう。
今回カスタマイズするのは shortcode.php です。
phpやCSSにカスタマイズする時は基本的に子テーマを作成するものなんですが、shortcode.php の子テーマを作ってもうまく機能しなかったので今回に限り親テーマ内の shortcode.php に手を加えることにします。
shortcode.phpにコードを追記
まず shortcode.phpを開き、ページ内検索で “related”という単語を検索してみましょう。
するとこんな感じで「関連記事を呼び出す」というショートコードが書かれた部分が見つかるはず。
該当場所が見つかったらそのすぐ後ろにこんな風にコードを追記しましょう。
（変更前）<a href=“ ‘ .get_permalink….
（変更後）<a target=“_blank” href=“ ‘ .get_permalink….
スペースや記号が抜けないように注意しましょう。
たったこれだけ。これでショートコードを使って関連記事を表示させていたリンク先を踏むと新しいページで表示されるようになりました。
レイアウトの崩れを修正する
ところがまだ問題があります。
今のコードを追加しただけではこんな風に関連記事のレイアウトが崩れてしまいます。
ね？サムネイル画像が枠線をはみ出てしまってます。
せっかく新しいページで開けるようになったのにこれじゃあダメです。
ということでさらにカスタマイズを加えることにします。
レイアウトを調整するのでclassを指定してやりCSSをいじりましょう。
さっきコードを追記した少し後ろの箇所にこんな風にさらに追記しましょう。
（変更前）… class=“cf”>
（変更後）… class=“cf kanren_storkblank”>
赤字で書く内容は自分がわかりやすい内容でOKです。
なんだかよくわからない人はこのままコピペして使ってください。
CSSのカスタマイズ
あとはCSSに次のようにコードを加えてやりましょう。
/*————————————————————-
関連記事ショートコード_blankのレイアウト崩れ防止
————————————————————-*/
.kanren_storkblank{
overflow:hidden;
}
これでお終いです。
さっき崩れていたレイアウトもばっちり元通りになりました。
スポンサーリンク
まとめ
STORK（ストーク）はものすごく便利なテーマですが、今回のようにちょっとした所に満足できないこともあります。
知識が無くてもブログをオシャレにカスタマイズできるのがウリではあるものの、知識があればもっとオシャレに便利に使うこともできるんですね。
以上、関連記事を新しいタブで開く方法でした！
STORK（ストーク）カスタマイズ編
子テーマを用意する方法
メニューを2段表示する方法
ロゴを大きく表示する方法
カテゴリーラベルを消す方法
見出しを自由に変更する方法
ひと味違ったトップページにする方法
記事を3列表示させる方法
関連記事を新しいタブで表示する方法
テクニック編
CSSの変更が反映されない時の対処法
蛍光ペン風のマーカーを引くカスタマイズ方法
プロフィールを2つ設置する方法
カエレバ・ヨメレバをオシャレに表示する方法
画像に枠線を付けて目立たせる方法
特殊文字を使ってコードを紹介する方法
h2見出しの前にアドセンスを自動表示させる方法
疑似要素でアイコンを表示させる方法
記事の離脱率と読了率を無料で計測する方法
