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

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

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

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

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

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

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

[aside type=”normal”]MEMO

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

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

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

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

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

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

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

[aside type=”normal”]ショートコード

[/aside]

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

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

記事ID・カテゴリーIDを確認する方法

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

[aside type=”warning”]注意

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

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

[aside type=”normal”]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');
[/aside]

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

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

SANGOの子テーマダウンロード

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

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

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

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

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

[aside type=”warning”]注意

選ぶのはどれかひとつだけです。[/aside]

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

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

[aside type=”normal”]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;
}
[/aside]

  • 長方形(影なしタイプ)

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

[aside type=”normal”]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;
}
[/aside]

  • 角丸(影ありタイプ)

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

[aside type=”normal”]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;
}
[/aside]

  • 角丸(影なしタイプ)

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

[aside type=”normal”]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;
}
[/aside]

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

ボックスの色を選ぼう

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

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

あず
カスタマイズ方法を説明するときに、黄色のコードを元にして説明します。
旦那
画像クリックで拡大画像が表示されます。
  • ピンクの内部リンクボックス

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

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

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

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

[aside type=”normal”]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;
}
[/aside]

  • 紫の内部リンクボックス

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

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

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

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

[aside type=”normal”]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;
}
[/aside]

  • オレンジの内部リンクボックス

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

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

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

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

[aside type=”normal”]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;
}
[/aside]

  • 青い内部リンクボックス

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

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

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

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

[aside type=”normal”]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;
}
[/aside]

  • 緑の内部リンクボックス

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

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

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

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

[aside type=”normal”]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;
}
[/aside]

  • 黄色の内部リンクボックス

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

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

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

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

[aside type=”normal”]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;
}
[/aside]

  • グレーの内部リンクボックス

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

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

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

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

[aside type=”normal”]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;
}
[/aside]

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

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

[aside type=”normal”]ショートコード

[/aside]

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

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

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

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

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

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

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

[aside type=”normal”]CSS

.post_link a{
border: 3px solid #FFFFDD;
}[/aside]

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

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

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

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

[aside type=”normal”]CSS

.post_link a{
background: #FFFFDD;
}[/aside]

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

[aside type=”normal”]CSS

.post_link a{
color: #555;
}[/aside]

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

[aside type=”normal”]CSS

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

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

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

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

[aside type=”normal”]CSS

.post_link a:hover{
color:#999999;
background:#FFDBC9;
}[/aside]

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

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

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

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

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

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

あず
SANGOのカスタマイズ記事はコチラにまとめました!
[kanren2 postid=4078]

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

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

2 Comments

ねこっち

早速使わしてもらったのです。ありがとうございます。
投稿ページだけでなく、固定ページも設定したいのですが…

あとはサイトによっては日付表示が古い記事となる場合があるので
投稿日を非表示したい場合はどうすればよろしいでしょうか?

返信する

コメントを残す

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