【SANGOカスタマイズ】コピペで内部リンクをラベル付きのボックスデザインにしよう!

どうも、あず(@yuuki_azusa)です

リクエストにお応えしまして、前回の「【SANGO】ショートコードで使える会話風ふきだしをコピペで作ろう!」に続いて、今回もWPテーマSANGOのカスタマイズ記事です。

この記事を読んでコピペで出来るのは、「内部リンクボックス」のデザインの変更。

SANGOのデフォルトのものは、こんな感じです

SANGOの外部参考リンクデザインをCSSで変える。コピペOKなコード13例

SANGOの外部参考リンクデザインをCSSで変える。コピペOKなコード13例

2017.09.27

今回は、こういうラベル付きのものを作ります(・∀・)

カラバリ7色+私と同じデザインにするためのコードを公開していますので、お好きなものをコピペして使ってくださいね。

MEMO
今回のカスタマイズは、「SANGO」と「STORK(ストーク)」で使えることを確認しています。

ただし、今回の方法はPHPファイルをいじりますので、

PHP恐怖の人
PHPはさわりたくない!だけどカスタマイズしたいんだ!

という方は、後日公開するCSSだけで出来るカスタマイズ方法の公開をお待ちください。

ということで、さっそくはじめましょう!

内部リンクボックスの使い方

あとで紹介するコードを、書いてある通りにコピペすればショートコードで内部リンクボックスが使えるようになります。

使えるようになるショートコード
[post id="○○"]

○○の部分には記事IDを記入します。

記事IDの確認方法がわからない方は、以下のサイトを参考にしてください。

参考

記事ID・カテゴリーIDを確認する方法WordPress超初心者講座

内部リンクボックスにラベルをつけるカスタマイズ

注意
PHPファイルをいじりますので、必ずバックアップをとってから始めてください!

まず、以下のphpコードを子テーマのfunction.phpにコピペします。

php
//内部リンクをシャレオツにするためのコード//
function postlink($atts) {
	extract(shortcode_atts(array(
		'mode' => null,'type' => null,'id' => null,
		'y' => null,'m' => null,'d' => null,
		'numberposts' => 5,'offset' => null,'order' => 'DESC','orderby' => 'post_date','meta_key' => null,
		'id' => null,'exclude' => null,
		'head' => null,'tail' => null,
	),$atts));

	if($mode != null) $mode = '&'.$mode.'='.$id;
	$post = get_posts('post_status=publish&numberposts='.$numberposts.'&offset='.$offset.'&order='.$order.'&orderby='.$orderby.'&include='.$id.'&year='.$y.'&monthnum='.$m.'&day='.$d.'&exclude='.get_the_ID().','.$exclude.'&meta_key='.$meta_key.$mode);
 	$echo ="";
	foreach ($post as $item){
		$im = wp_get_attachment_image_src(get_post_thumbnail_id($item->ID),'home-thum',false);
		$date = date('Y.m.d',strtotime(get_post($item->ID)->post_date));
		$update = date('Y.m.d',strtotime(get_post($item->ID)->post_modified));
		$echo .= '<div class="post_link cf"><a href="'.get_permalink($item->ID).'" class="cf"><figure class="thum"><img src="'.$im[0].'" /></figure><div class="meta inbox"><p class="title">'.$item->post_title.'</p><span class="date gf">'.$date.'</span></div></a></div>';
	}
 
	return $echo;
}
add_shortcode('post','postlink');

カスタマイズ記事のときは毎回言っていますが、親テーマは絶対に編集しないでください。

アップデートがきたときに、せっかく変えたデザインが全滅します。

参考

SANGOの子テーマダウンロードサルワカ

子テーマのfunction.phpに追記したら、次のステップへ(・∀・)

ボックスのタイプを選んでね

あず
私と全く同じデザインを使いたい方はこの手順を飛ばしてください。

今回は、綺麗な長方形のタイプ(影あり・なし)と、角を丸っこくしたタイプ(影あり・なし)の4パターンを用意しました。

まず色は関係なく、ボックスの形はどのタイプがいいか選んでください。

形を選んだら、それぞれの画像の下にコードが記載されていますので、それをコピーしてstyle.cssにペーストしてください。

注意
選ぶのはどれかひとつだけです。
あず
何度も言いますが、子テーマのstyle.cssに記載してくださいね!
旦那
画像クリックで拡大画像が表示されます。
  • 長方形(影ありタイプ)

長方形(影あり)にする場合は、このコードをコピーして、子テーマのstyle.cssにペーストしてください。

css
/* 長方形(影あり)内部リンクボックス基本 */
.post_link{
margin: 1em 0;
text-align: left;
}
.post_link .inbox{
padding-left:25%;
}
.post_link p.title{
margin: 0 0 0.1em;
font-size:1em;
font-weight: bold;
}
.post_link .date{
font-size:0.8em;
}
.post_link .thum{
width: 22%;
float:left;
}
.post_link .thum img{
width:100%;
margin-bottom: 0;
}
.post_link a{
display:block;
padding:0.5em;
font-size: 14px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}
.post_link .title:before{
font-size:14px;
font-weight:bold;
width:5em;
display:inline-block;
padding:1px 0px 1px 0px;
position:relative;
top:-2px;
text-align:center;
margin-right:0.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
  • 長方形(影なしタイプ)

長方形(影なし)にする場合は、このコードをコピーして、子テーマのstyle.cssにペーストしてください。

css
/* 長方形(影なし)内部リンクボックス基本 */
.post_link{
margin: 1em 0;
text-align: left;
}
.post_link .inbox{
padding-left:25%;
}
.post_link p.title{
margin: 0 0 0.1em;
font-size:1em;
font-weight: bold;
}
.post_link .date{
font-size:0.8em;
}
.post_link .thum{
width: 22%;
float:left;
}
.post_link .thum img{
width:100%;
margin-bottom: 0;
}
.post_link a{
display:block;
padding:0.5em;
font-size: 14px;
}
.post_link .title:before{
font-size:14px;
font-weight:bold;
width:5em;
display:inline-block;
padding:1px 0px 1px 0px;
position:relative;
top:-2px;
text-align:center;
margin-right:0.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
  • 角丸(影ありタイプ)

角丸(影あり)にする場合は、このコードをコピーして、子テーマのstyle.cssにペーストしてください。

css
/* 角の丸い内部リンクボックス(影あり)基本 */
.post_link{
margin: 1em 0;
text-align: left;
}
.post_link .inbox{
padding-left:25%;
}
.post_link p.title{
margin: 0 0 0.1em;
font-size:1em;
font-weight: bold;
}
.post_link .date{
font-size:0.8em;
}
.post_link .thum{
width: 22%;
float:left;
}
.post_link .thum img{
width:100%;
margin-bottom: 0;
border-radius:20px;
}
.post_link a{
display:block;
padding:0.5em;
font-size: 14px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
border-radius:20px;
}
.post_link .title:before{
font-size:14px;
font-weight:bold;
width:5em;
display:inline-block;
padding:1px 0px 1px 0px;
position:relative;
top:-2px;
text-align:center;
margin-right:0.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border-radius:20px;
}
  • 角丸(影なしタイプ)

角丸(影なし)にする場合は、このコードをコピーして、子テーマのstyle.cssにペーストしてください。

css
/* 角の丸い内部リンクボックス(影なし)基本 */
.post_link{
margin: 1em 0;
text-align: left;
}
.post_link .inbox{
padding-left:25%;
}
.post_link p.title{
margin: 0 0 0.1em;
font-size:1em;
font-weight: bold;
}
.post_link .date{
font-size:0.8em;
}
.post_link .thum{
width: 22%;
float:left;
}
.post_link .thum img{
width:100%;
margin-bottom: 0;
border-radius:20px;
}
.post_link a{
display:block;
padding:0.5em;
font-size: 14px;
border-radius:20px;
}
.post_link .title:before{
font-size:14px;
font-weight:bold;
width:5em;
display:inline-block;
padding:1px 0px 1px 0px;
position:relative;
top:-2px;
text-align:center;
margin-right:0.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border-radius:20px;
}
MEMO
SANGOの場合、子テーマのstyle.cssに記載しても反映されないことがあります。

その場合は「外観」→「カスタマイズ」→「追加CSS」にペーストすると、うまく反映されます。

まだ、このコードだけではうまく動きませんので、このあと下から色を選んでくださいね!

ボックスの色を選ぼう

7種類のカラーバリエーションを用意していますので、好きなものを選んでコピーし、子テーマのstyle.cssにペーストしてください。

このあと、色をカスタマイズしてオリジナルのボックスを作る方法を説明しますが、基本となるコードが必要ですので、自分でカスタマイズしたい方は黄色を選んでください。

あず
カスタマイズ方法を説明するときに、黄色のコードを元にして説明します。
MEMO
私と全く同じデザインを使いたい方はこの手順も飛ばしてください。
旦那
画像クリックで拡大画像が表示されます。
  • ピンクの内部リンクボックス

形は先ほど上で選んだものが反映されますので、長方形(影あり)以外を選んだ場合は、画像の例とは形が異なります。

色は画像と同じものになりますが、パソコンなどの液晶の関係で若干違って見えるかもしれません。

以下のコードボックスの中身は、ピンクのボックスにするためのCSSです。

コピーしてから、先ほどボックスの形を決めるためにペーストしたコードのすぐ下にペーストしてください。

css
/* ピンクの内部リンクボックス */
.post_link a{
border: 3px solid #FFE4E1;
background: #FFE4E1;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#FF97C2;
content:'check';
}	
.post_link a:hover{
color:#ffffff;
background:#FFBEDA;
}
  • 紫の内部リンクボックス

形は先ほど上で選んだものが反映されますので、長方形(影あり)以外を選んだ場合は、画像の例とは形が異なります。

色は画像と同じものになりますが、パソコンなどの液晶の関係で若干違って見えるかもしれません。

以下のコードボックスの中身は、紫のボックスにするためのCSSです。

コピーしてから、先ほどボックスの形を決めるためにペーストしたコードのすぐ下にペーストしてください。

css
/*紫の内部リンクボックス*/
.post_link a{
border: 3px solid #EAD9FF;
background: #EAD9FF;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#B384FF;
content:'check';
}	
.post_link a:hover{
color:#ffffff;
background:#A16EFF;
}
  • オレンジの内部リンクボックス

形は先ほど上で選んだものが反映されますので、長方形(影あり)以外を選んだ場合は、画像の例とは形が異なります。

色は画像と同じものになりますが、パソコンなどの液晶の関係で若干違って見えるかもしれません。

以下のコードボックスの中身は、オレンジのボックスにするためのCSSです。

コピーしてから、先ほどボックスの形を決めるためにペーストしたコードのすぐ下にペーストしてください。

css
/* オレンジの内部リンクボックス */
.post_link a{
border: 3px solid #FFDBC9;
background: #FFDBC9;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#FFAD90;
content:'check';
}	
.post_link a:hover{
color:#ffffff;
background:#FF9872;
}
  • 青い内部リンクボックス

形は先ほど上で選んだものが反映されますので、長方形(影あり)以外を選んだ場合は、画像の例とは形が異なります。

色は画像と同じものになりますが、パソコンなどの液晶の関係で若干違って見えるかもしれません。

以下のコードボックスの中身は、青いボックスにするためのCSSです。

コピーしてから、先ほどボックスの形を決めるためにペーストしたコードのすぐ下にペーストしてください。

css
/*青い内部リンクボックス*/
.post_link a{
border: 3px solid #D9E5FF;
background: #D9E5FF;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#8EB8FF;
content:'check';
}	
.post_link a:hover{
color:#ffffff;
background:#A4C6FF;
}
  • 緑の内部リンクボックス

形は先ほど上で選んだものが反映されますので、長方形(影あり)以外を選んだ場合は、画像の例とは形が異なります。

色は画像と同じものになりますが、パソコンなどの液晶の関係で若干違って見えるかもしれません。

以下のコードボックスの中身は、緑のボックスにするためのCSSです。

コピーしてから、先ほどボックスの形を決めるためにペーストしたコードのすぐ下にペーストしてください。

css
/*緑の内部リンクボックス*/
.post_link a{
border: 3px solid #CEF9DC;
background: #CEF9DC;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#66CC66;
content:'check';
}	
.post_link a:hover{
color:#999999;
background:#93FFAB;
}
  • 黄色の内部リンクボックス

形は先ほど上で選んだものが反映されますので、長方形(影あり)以外を選んだ場合は、画像の例とは形が異なります。

色は画像と同じものになりますが、パソコンなどの液晶の関係で若干違って見えるかもしれません。

以下のコードボックスの中身は、黄色のボックスにするためのCSSです。

コピーしてから、先ほどボックスの形を決めるためにペーストしたコードのすぐ下にペーストしてください。

css
/*黄色の内部リンクボックス*/
.post_link a{
border: 3px solid #FFFFDD;
background: #FFFFDD;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#FFC7AF;
content:'check';
}	
.post_link a:hover{
color:#999999;
background:#FFDBC9;
}
  • グレーの内部リンクボックス

形は先ほど上で選んだものが反映されますので、長方形(影あり)以外を選んだ場合は、画像の例とは形が異なります。

色は画像と同じものになりますが、パソコンなどの液晶の関係で若干違って見えるかもしれません。

以下のコードボックスの中身は、グレーのボックスにするためのCSSです。

コピーしてから、先ほどボックスの形を決めるためにペーストしたコードのすぐ下にペーストしてください。

css
/*グレーの内部リンクボックス*/
.post_link a{
border: 3px solid #CCCCCC;
background: #CCCCCC;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#333333;
content:'check';
}	
.post_link a:hover{
color:#FF4F50;
background:#DDDDDD;
}

ショートコードを使ってみよう

上の方でも載せましたが、もういちど(・∀・)

内部リンク用ショートコード
[post id="○○"]

○○の部分には記事IDを記入します。

これで、希望する形と色で内部リンクボックスが表示されたらOKです。お疲れ様でした。

表示されなかった方は以下の内容をもう一度確認してください。

  • function.phpのコードは忘れずにコピペしましたか?
  • 形を決めるためのコードをひとつだけ決めてstyle.cssにコピペしましたか?
  • 色を決めるためのコードをひとつだけ決めてstyle.cssにコピペしましたか?
  • style.cssで反映されなかった場合、ペースト場所を追加CSSに変更してみましたか?

自分で色を設定してみよう

ここからは、自分でカラーコードを指定したい方向けの説明です。

黄色の内部リンクボックスを表示するためのコードを使って説明します。

.post_link a{
border: 3px solid #FFFFDD;
}

このコードでボックスのフチの設定をしています。

3px … フチの太さです。数字を大きくすると太くなり、小さくすると細くなります。
solid … フチの種類です(詳しくは後述)。
#FFFFDD … カラーコードでフチの色を設定しています。

フチの種類はこのように設定することが可能です。

solid … 直線
double … 2本線(3px以上)
dashed … 破線
dotted … 点線
none … 線がなくなる

.post_link a{
background: #FFFFDD;
}

このコードでボックスの背景色を指定しています。カラーコード(#FFFFDD)を変えると、色が変えられます。

.post_link a{
color: #555;
}

このコードでボックス内の文字の色を指定しています。適用されるのは、記事タイトルの部分です。

.post_link .title:before{
color:#fff;
background:#FFC7AF;
content:’check‘;
}

このコードではラベル部分の設定をしています。

#fffを変更すると「check」の文字色が変わり、#FFC7AFを変更するとラベルの色が変わります。

checkを変更するとラベルの文字が変えられます。

.post_link a:hover{
color:#999999;
background:#FFDBC9;
}

このコードでは、マウスポインターを合わせたときの色を決めています。

#999999はマウスポインターを合わせたときの文字の色を設定していて、#FFDBC9は背景の色を設定しています。

自分のブログのデザインに合わせた内部リンクボックスを作ってね

【SANGO】ショートコードで使える会話風ふきだしをコピペで作ろう!

2017.09.29

私と同じデザインが使いたい!という方は、この下のコードを、子テーマのstyle.cssにコピペしてください(・∀・)

このコードには形を決めるコードと、色を決めるコードがどちらもまとめて含まれています。

あずとお揃いになるコード
/* こなれピンクの内部リンクボックス */
.post_link{
margin: 1em 0;
text-align: left;
}
.post_link .inbox{
padding-left:25%;
}
.post_link p.title{
margin: 0 0 0.1em;
font-size:1em;
font-weight: bold;
}
.post_link .date{
font-size:0.8em;
}
.post_link .thum{
width: 22%;
float:left;
}
.post_link .thum img{
width:100%;
margin-bottom: 0;
border-radius:10px;
}
.post_link a{
display:block;
padding:0.5em;
font-size: 14px;
border-radius:10px;
}
.post_link .title:before{
font-size:14px;
font-weight:bold;
width:5em;
display:inline-block;
padding:1px 0px 1px 0px;
position:relative;
top:-2px;
text-align:center;
margin-right:0.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border-radius:10px;
}
/* 色を変えたりするコードまとめ */
.post_link a{
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
border: 3px solid #FFE9F3;
background: repeating-linear-gradient(-45deg, #FFE9F3, #FFE9F3 3px,#fff0f5 3px, #fff0f5 7px);
color: #555;
}
.post_link .title:before{
color:#fff;
background:#FF97C2;
content:'check';
}	
.post_link a:hover{
color:#555555;
background:#FFBEDA;
background: repeating-linear-gradient(-45deg, #fff0f5, #fff0f5 3px,#FEDBEB 3px, #FEDBEB 7px);
}

是非、いろいろいじってみて自分好みの内部リンクボックスをつくってみてくださいね。

とんとんさんを始め、リクエストをくださった方ありがとうございました(・∀・)

私は「ああしたい、こう変えたいが手にとるようにわかる CSS基礎」という本でCSSの勉強をしています。PHPは独学で勉強中。

Amazonでチェック

あず
SANGOのカスタマイズ記事はコチラにまとめました!

WPテーマをSANGOに変えてからやったカスタマイズまとめ

2017.10.01

今後もリクエストされたものを優先的に、私にできるカスタマイズ内容であれば記事にしていきたいと思います(・∀・)

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

コメントを残す