ブログカード自作でレイアウトが崩れる【問題解決方法を解説】

サイト内回遊率を上げるためにブログカードを自作したいという方は多くいます。

ネット上にはコピペでOKなブログカード自作用コードを公開してくれている有志がたくさんいるので、その中から好きなデザインを選んで自由にブログカードを実装することも難しくありません。

しかし、それらのコードを自分のサイトにコピペするとレイアウトが崩れてしまったり、うまく反映されないという問題も存在するので、この記事ではそんな問題の解決につながるヒントを解説していきます。

ブログカード自作用コードをコピペしたけど、自分のブログではうまく表示されなかった…
原因を突き止めたいけど、phpとか難しいことはよくわからない…

こんなお悩みを抱えている方は、最後まで読みすすめていただければ幸いです。

スポンサードサーチ

ブログカード自作に必要な編集ファイル

まずはブログカードを自作するために必要なファイルのおさらいです。

前述の通り、この記事を読んでいる人の多くは「ブログカードとは何かを知っている」かつ「実装したらレイアウトが崩れて困っている」方々のはずなので、すでにご存知かとは思いますが、ブログカードを自作するには主に下記のファイルを編集する必要があります。

【function.php】
【style.css】

ブログカード自作用コードを紹介しているサイトの多くは、追記用コードを全公開してくれているので、必要なことは【function.php】と【style.css】の一番下にコードをそのままコピペするだけというシンプルな手順のみ。

ありがたいですよね。

とても簡単なので、レイアウト崩れなどの問題さえ起こらなければ素敵なデザインのブログカードを実装することができますが、うまく反映されないと萎えてしまうので、そんなときはこれからご紹介する原因を疑ってみましょう。

ブログカードコードが反映されない…

考えられる理由をピックアップ

ウェブで拾ってきたカスタマイズ用コードをそのままコピペしても自分のサイトで反映されないときに考えられる理由は下記の通り。

1. 余計なタグが入っている or タグが一部足りていない
2. プラグインが影響している
3. 使用中のWordPressテーマによる影響
4. コード挿入場所が間違っている

これら以外が原因となっていることもありますが、まず最初に疑ってみるのは上記の4つです。

ひとつずつ解説していくので、思い当たる箇所がないかチェックしながら読み進めてみてください。

1. 余計なタグが入っている or タグが一部足りていない

イージーミスに聞こえますが割とありがち。まず最初に下記の2点を確認してみましょう。これで解決すればそれでおしまいです。

・コピペする際に余計なところまで選択していないか
・きちんと全コードを貼り付けられているか

2. プラグインが影響している

「ちゃんとコピーできてるし問題ない」
「イージーミスなんかしていない」
「それなのにブログカードのレイアウトが崩れる」

そんなときに原因として最も考えられるのが【プラグインによる影響】です。

特にリンクカスタマイズ系プラグインが問題の原因になることが多いので、ひとつずつ無効化しながら様子を見てください。

下記プラグインを使っている場合は要確認です。

・Custom Permalinks
・Link Manager
・Pz-LinkCard

ひとつずつ無効化しながらチェックするだけなので、この作業も難しくはありませんね。

3. 使用中のWordPressテーマによる影響

使用しているテーマがコピペコードを読み込めていないという可能性もあります。WordPressのテーマによりサイトを構築しているコードが異なるために、そのままコピペしても反映されないケースです。

この場合は使用中のテーマに合わせてコードを書き換えたりしないといけません。

「プログラミングとかわからない…」という方が自分で編集すると大変なことになりかねないので、できたら少しお金を払ってでもプロにお願いする方が懸命です。もしくは「テーマはなんでもいい」という方でしたら、テーマごと切り替えてしまうのもひとつの手です。

もちろん、コピペ用のコード内を修正すればブログカードは表示されるので自分で書き換えるのもアリですが、【function.php】編集時にミスをすると、サイトが真っ白になってしまうことがあるので十分注意しましょう。

テーマを再検討する場合

自作用コード参照元のテーマと同じ会社から公開されているテーマなら、テーマ自体は違っても相互性があることが多いので、反映される可能性は高まります。

4. コード挿入場所が間違っている

最後にコードの貼り付け先が間違っているケース。特に子テーマを導入している場合に多い原因です。

WordPress子テーマについて知っておくべき事と注意点【子テーマユーザー必読！】

以前、こんな記事を書きました。【WordPress子テーマとは】作り方と必要性を2ステップで簡単解説子テーマを作るメリットは主に下記の2点です。テーマをアップデートしても、カスタマイズした内容が消えないテーマ編集時の不具合があっても、親テーマは無事なので対応しやすい WordPressでカスタマイズをするなら、「子テーマ」を作っておくと本当に助かります。この記事ではテーマ更新通知が来た時...<div class="more-link-wrapper"><a class="more-link" href="https://ksonoda.com/wordpress-child-theme-mustsee/"><span class="more-text">Continue reading</span></a></div>

この記事で解説していますが、子テーマを導入した場合【php】は上書きされ【css】は追記されます。

親テーマに手をつけずにカスタマイズができる子テーマは便利ですが、稀にこの便利さが引き起こす問題もあるので、ブログカードカスタマイズでうまくいかない時はここを見直してみましょう。

子テーマにコピペコードを挿入してもうまく反映されないのに、親テーマに貼り付けたらうまくいく場合があります。

ただし、親テーマの【function.php】に手を加えるときは慎重に。編集前にバックアップをお忘れなく。

ぼくが直面した問題と解決方法

ぼくもブログカードカスタマイズをするときにレイアウトが崩れた経験があるので、ここからは同じ条件で悩んでいる方向けに具体的な解決方法を解説します。

ブログ情報とコード参照先

このブログテーマと現在のワードプレス情報です。
下記と同条件、または近い条件でブログ運営している方は、貼り付け先を間違えなければコピペで問題解決するはず。

WordPressバージョン：5.2.3
テーマ：SiteOrigin Unwind
テーマバージョン：1.4.5
子テーマ導入済
実装コード：【WordPress】プラグインなしでブログカードを作る方法【コピペで完成】参照。

ブログカードカスタマイズ用のコードはこちらを参考にさせていただきました。

【function.php】カスタマイズ用コード

まずは、こちらのコードを【子テーマのfinction.php】の一番下に貼り付けます。

/*ブログカード*/
// 記事IDを指定して抜粋文を取得
function ltl_get_the_excerpt($post_id){
global $post;
$post_bu = $post;
$post = get_post($post_id);
setup_postdata($post_id);
$output = get_the_excerpt();
$post = $post_bu;
return $output;
}

//ショートコード
function nlink_scode($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));

$id = url_to_postid($url);//URLから投稿IDを取得

$no_image = 'noimageに指定したい画像があればここにパス';//アイキャッチ画像がない場合の画像を指定

//タイトルを取得
if(empty($title)){
$title = esc_html(get_the_title($id));
}
//抜粋文を取得
if(empty($excerpt)){
$excerpt = esc_html(ltl_get_the_excerpt($id));
}

//アイキャッチ画像を取得
if(has_post_thumbnail($id)) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'medium');
$img_tag = "<img src='" . $img[0] . "' alt='{$title}'/>";
}else{
$img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
}

$nlink .='
<div class="blog-card">
<a href="'. $url .'">
<div class="blog-card-thumbnail">'. $img_tag .'</div>
<div class="blog-card-content">
<div class="blog-card-title">'. $title .' </div>
<div class="blog-card-excerpt">'. $excerpt .'</div>
</div>
<div class="clear"></div>
</a>
</div>';

return $nlink;
}

add_shortcode("nlink", "nlink_scode");

/*ブログカード*/

// 記事IDを指定して抜粋文を取得

function ltl_get_the_excerpt($post_id){

global $post;

$post_bu = $post;

$post = get_post($post_id);

setup_postdata($post_id);

$output = get_the_excerpt();

$post = $post_bu;

return $output;

}

//ショートコード

function nlink_scode($atts) {

extract(shortcode_atts(array(

'url'=>"",

'title'=>"",

'excerpt'=>""

),$atts));

$id = url_to_postid($url);//URLから投稿IDを取得

$no_image = 'noimageに指定したい画像があればここにパス';//アイキャッチ画像がない場合の画像を指定

//タイトルを取得

if(empty($title)){

$title = esc_html(get_the_title($id));

}

//抜粋文を取得

if(empty($excerpt)){

$excerpt = esc_html(ltl_get_the_excerpt($id));

}

//アイキャッチ画像を取得

if(has_post_thumbnail($id)) {

$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'medium');

$img_tag = "<img src='" . $img[0] . "' alt='{$title}'/>";

}else{

$img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';

}

$nlink .='

<div class="blog-card-title">'. $title .' </div>

<div class="blog-card-excerpt">'. $excerpt .'</div>

</div>

</a>

</div>';

return $nlink;

}

add_shortcode("nlink", "nlink_scode");

その後、【nlink url=””】タグを使ってブログカードを挿入すると、こんな感じで反映されます。

（※実装する時は【】の代わりに [ ] を使ってください。）

このままだとレイアウトが崩れた状態なので、CSSでデザインを整えます。

【style.css】カスタマイズ用コード

CSSにコピペするコードはこちらです。

/*-------------------------------
# ブログカード 
-------------------------------*/
.blog-card {
  background: rgba(251, 140, 0, 0.02);
  border: 1px solid #FF8481;
  word-wrap: break-word;
  max-width: 100%;
  border-radius: 5px;
  margin: 0px 10px 25px 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .2);
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.blog-card:hover {
  cursor: pointer;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .2);
  -moz-transform: translateY(-1px);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.blog-card a {
  text-decoration: none;
}

.blog-card-thumbnail {
  width: 35%;
  display: table-cell;
  vertical-align: middle;
	padding: 1em 1.5em 0em 1em;
}

.blog-card-thumbnail img {
  padding: 0;
}

.blog-card-content {
  display: table-cell;
  vertical-align: middle;
}

.blog-card-title {
  font-size: 1.3em;
	color:#5E5E5E;
  margin: 5px 10px 15px 5px;
  font-weight: bold;
  line-height: 1.4;
}

.blog-card-title:hover {
  text-decoration: underline;
}

.blog-card-excerpt {
  font-size: 0.9em;
  color: #4c4c4c;
  margin: 0 10px 5px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card .clear {
  clear: both;
}

@media screen and (max-width: 500px) {
  .blog-card:before {
    font-size: .56em;
  }
  .blog-card-title {
    font-size: .70em;
  }
  .blog-card-excerpt {
    font-size: .60em;
  }
}

/*-------------------------------

# ブログカード

-------------------------------*/

.blog-card {

background: rgba(251, 140, 0, 0.02);

border: 1px solid #FF8481;

word-wrap: break-word;

max-width: 100%;

border-radius: 5px;

margin: 0px 10px 25px 10px;

box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .2);

-webkit-transition: 0.3s ease-in-out;

-moz-transition: 0.3s ease-in-out;

-o-transition: 0.3s ease-in-out;

transition: 0.3s ease-in-out;

}

.blog-card:hover {

cursor: pointer;

box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .2);

-moz-transform: translateY(-1px);

-webkit-transform: translateY(-1px);

transform: translateY(-1px);

}

.blog-card a {

text-decoration: none;

}

.blog-card-thumbnail {

width: 35%;

display: table-cell;

vertical-align: middle;

padding: 1em 1.5em 0em 1em;

}

.blog-card-thumbnail img {

padding: 0;

}

.blog-card-content {

display: table-cell;

vertical-align: middle;

}

.blog-card-title {

font-size: 1.3em;

color:#5E5E5E;

margin: 5px 10px 15px 5px;

font-weight: bold;

line-height: 1.4;

}

.blog-card-title:hover {

text-decoration: underline;

}

.blog-card-excerpt {

font-size: 0.9em;

color: #4c4c4c;

margin: 0 10px 5px 0;

line-height: 1.5;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;

overflow: hidden;

text-overflow: ellipsis;

}

.blog-card .clear {

clear: both;

}

@media screen and (max-width: 500px) {

.blog-card:before {

font-size: .56em;

}

.blog-card-title {

font-size: .70em;

}

.blog-card-excerpt {

font-size: .60em;

}

コピペ先に注意

ぼくのブログでレイアウトが崩れたままだったのは、このコードを貼り付ける場所が原因でした。

【外観】≫【子テーマ】≫【スタイルシート（style.css）】に貼り付けても全く反映されなかったのですが、【外観】≫【CSS 編集】≫【追加 CSS】にコピペしたところ反映されるようになりました。

同じ条件でブログ運営している方はこれで解決するはずです。

【function.php】 → 【子テーマ】に貼り付け
【style.css】 → 【追加CSS】に貼り付け

すると、先ほど表示されたブログカードがこのようにデザインされた状態で表示されます。

スポンサードサーチ

まとめ

ということで、記事のまとめです。

ブログカードのレイアウトが崩れてしまう理由は色々と考えられますが、最初に疑ってみるところは下記の4つです。

ひとつずつ確認しながら原因を探ってみましょう。

子テーマを使用しているケースでは、今日ご紹介した方法で解決する可能性もあるので、貼り付け先を変えるなどして対処していただければと思います。

これでも解決しない場合はお問い合わせいただければ確認しますのでお気軽にご連絡ください。TwitterのDMでもOKです。

それでは。