サイドバーに画像を表示するための WordPress プラグイン、FlickrRSS の設定の覚え書き。
- プラグイン提供サイト、Eightface よりプラグインをダウンロードしてから、FTPでアップロード。
- もしくは管理画面>プラグイン＞新規追加に移動、検索窓に “FlickrRSS” を入力して検索すると出てくるので、インストール。(IMG-1参照)
検索画面（IMG-1）
プラグインを有効にする。
設定の下に “flickrRSS” が出来ているのでクリックして詳細を設定する。(IMG-2参照)
各種項目を設定（IMG-2）
- Display欄：表示する枚数をプルダウンで選び、どの写真を表示するか選ぶ。(例：set, group等)
- User ID欄：表示する写真をcommunity以外にした場合は、Displayの下にUser ID欄が現れるので、Find you id をクリックし、自分のflickrアドレスを入れて OKを押すとIDが取得される。
- Set ID欄：私の場合はセットを選んでいるので ID欄の下にセットのIDを入力します。セットの IDはflickrでセットを選んだときに、URLがナビゲーションバーに通知されますが、そのURL内のsetsの後ろの数字がセットIDとなります。
- HTML Bluilder欄：Before List, After List は特に使用していないので空白。ここに文字を入れるとこんな風にでます。HTMLを各欄で調節できるのかもです。（IMG-3参照）
Item HTMLの所はそのままだと写真のサムネイルが詰まって表示されるので、マージンを10pxに設定しました。（IMG-4参照）
↑こんな風に表示されます。（IMG-3）
↑マージンで画像に余白を追加（IMG-4）
下のCache Settingは特に設定していません。
次に実際にwordpress上に表示させる方法です。
・ウィジェットの場合
ウィジェットの所に “FlickrRSS” ウィジェットが現れているので、ドラッグしてサイドバーに移動、タイトルをつけます。
・直接書き込みたい場合は、表示させたいテンプレートの場所に<?php get_flickrRSS(); ?>と入れるだけです。
はじめまして。
こちらのほうで、flickr rssの導入方法を大変参考にさせていただきました。無事、導入が完了したのですが、１つだけ質問させていただいてもよろしいでしょうか。
現在、フッタ―部分に12枚の画像をuserで表示させるようにしていますが、4行×3段になるようにするためにはどうしたらいいのでしょうか？どうしても、1行でずらずらっと出てきてしまい、色々ためしてみたのですが、なおりません。
CSSのほうで幅を調整してみたのですがなおらず、突然ですがこちらにご質問させていただきました。
参考にCSSのほうものせてみます。
ご検討いただけると助かります。よろしくおねがいします。
/*————————————————————
■フッター
————————————————————-*/
#page-jump{
margin:0 auto;
width:880px;
text-align:right;
clear:both;
}
#footer{
border-top:1px solid #ccc;
clear:both;
background-image:url(‘http://gatuchan.yuru2.jp/wp-content/uploads/2012/02/h_mokume1_1.jpg’);
}
#footer p,#footer a{color:#fff; font-size:.85em;}
#footer .footer-inner{
margin:0 auto;
width:950px;
overflow:hidden;
}
#footer .copyright{margin:0 auto; background:#fff url(images/bg-copyright.png) repeat-x center top; clear:both; line-height:36px; font-size:1em;}
#footer .copyright p,#footer .copyright a{color:#fff; text-decoration:none;}
/* フッター ウィジェット対応 */
#footer-bar1{
float:left;
width:180px;
overflow:hidden;
margin:20px 20px 20px 0;
padding:0 0 0 20px;
}
.footer-bar2{
float:left;
width:220px;
overflow:hidden;
border-left:1px dotted #a52a2a;
margin:20px 20px 20px 0;
padding:0 0 0 20px;
}
#footer-bar1 h2,.footer-bar2 h2{
margin:0 0 7px;
text-align:center;
line-height:24px;
font-size:1em;
color#a52a2a;
border-bottom:3px double #fff;
こんにちはー。
このプラグインおそらく勝手にDIVの幅に合わせて可能な範囲内に枚数が並ぶのではないかと思われます。
そしてさらっとCSSを拝見したところ、画像が並ぶべきフッターのdivが真ん中と一番右（画像を表示したいところ）が同じ指定になっているので、それをdiv.footer-bar3に変えて独自にCSSを追加して幅を調整された方がいいと思います。あと画像にhooverしたときに3つめのフッターの幅と同じになってしまっているのでココを調整すればきちんと表示されると思います！
.footer-bar2 {
border-left: 1px dotted #A52A2A;
float: left;
margin: 20px 20px 20px 0;
overflow: hidden;
padding: 0 0 0 20px;
width: 220px; ← これが写真の場所にも反映されてるので背景の端までとどかないので、もともと4枚並ぶスペースが無いです。
新たに指定した .footer-bar3は一度hooverなどのエフェクトを無くした状態で基本だけで配置してみて下さい。
cssをさらっと書けないのですが（；^ω^）、参考になればいいんですけど…。説明ベタですがおわかりになりますか？