wordpressにスクリーンショットでリンク集

2016年6月 現在リンクページは見直しの為掲載していません

リンクのページを変えてみたよ。
↓こんな感じ
sc1

今までは、リンクバナーを置いて、そのサイト様の紹介コメントを書いてたんですが・・
最近ではblogでリンクバナーとかないところも多いですし
どうしたものだろうって思ってたんですよね~

▼more

・・・なもんで・・・
やっぱり、そのサイトのイメージを、すぐに直観的に伝えるには
スクリーンショットが一番良いのではないかなぁ~って思ったわけです。

まず、今までも使ってましたが WP Render Blogroll Links というプラグインを使用
プラグインを有効にする。
(このプラグイン2年以上更新がないので、ちょっと心配でもあるけど)

まず、「固定ページ新規追加」⇒「ページ属性 親(親なし)、テンプレート( No comment)」で
固定ページを作成

ショートコードは wp-blogroll showdesc=1 showbrk=1 notitle=1
※ 【  [ に変更してください。
showdesc=1 は、概要を表示の意味。
私のリンク集は、アルファベット順の表示にしているけど
カテゴリーごとに並べる時は、【wp-blogroll catid=1】とかにするみたい。

固定ページに書くのは、基本このコードだけ。

でもあたしのとこは、ちょっと画像とかも入れているから
その下にこのコードを記載。

さて、次は、固定ページは一度下書きで保存して、リンクの設定

メディアの下あたりにある、リンクのとこで「新規追加」
links2

赤まるしたところを記入。後必要に応じて、その下の「カテゴリー」「リンクターゲット」もチェック
そしてもうちょっと下にある・・
links3

「詳細」の「画像のアドレス」に、

http://capture.heartrails.com/300×225?ウェブアドレス/

これが、スクリーンショットを作ってくれるアドレス
300×225は、スクリーンショットのサムネイルの大きさです。
ウェブアドレスのところは、その紹介サイトのアドレスです。

これで、基本はできあがり~~

それから見栄えを良くするために、テーマ編集でCSSを追加。

.brlink{
min-height:104px;
border-bottom: dotted 1px #999;
clear:both;
padding-bottom:5px;
margin-bottom:5px;
}

 

.brlink img {

float: left;
padding-right:5px;
}

固定ページの記入は、↓こんな感じ

links4

 

・・・で、できあがり~♪
このリンク集を作成するにあたり
WordPressなら最高!様 を参考にさせて頂きました~。
CSSは、そのまま利用させて頂きました。ありがとうございました。
こちらのサイトの説明は、とってもわかりやすくって最高♪

意外と簡単にできて、やったね~~です。
出来上がりリンク集はこちら

リンク集作成参考サイトWordPressなら最高!
プラグイン WP Render Blogroll Links

コメントを残す