KASABUTA-ENDLESS

*

[WordPress]phpをいじってヘッダー右側に相互RSSを設置する方法

   

スポンサーリンク

[WordPress]phpをいじってヘッダー右側に相互RSSを設置する方法

新しいサイトを作っていますが、イメージは2ちゃんまとめサイトです。

まとめサイトってヘッダーの下とか右側にライブドア相互RSS、画RSSとかが設置されてますよね。

こんな感じで。

rssss

これをヤってみたいと思ったので、ちょっと頑張ってます。

1,相互RSSを取得

livedoor 相互RSS – アクセスアップのベストツール

ライブドアのサービスです。

似たものに画RSSというのがありますが、あっちはテキスト広告がうざいので。

こっちにも広告は付いていますが気にならない程度なのでOKです。

ライブドアIDを作成しなきゃなのでちょっとだけ面倒ですけど。

アカウントを取得したら、取得したいサイトのRSSフィードをチャンネルに登録します。

チャンネルができたら、メニューに「貼付けコード」があるので、後ほどコピペします。

2,header.phpにコピペしてみる

header.phpのなかの、を探します。

の前に、先ほどの貼付けコードをペーストします。

すると、ヘッダー画像の下にRSSが設置されちゃいました。

rsssss

右に回りこませるよう指示してみます。

右に回りこませるといえばfloatタグですね。

header.phpで下のようにdiv要素で囲みます。

<div class="sougorss">
相互RSSの貼付けコード
</div>

スタイルシートにも

div.sougorss {
float: right;
padding-right: 20px;
}

と加えます。

20pxのところは好きな値に変更してください。

上のコードですが、どこに入れたらいいのか分からなくて、色んなところに置いてみたところ、「div class=”container-inner”」と「div class=”group pad”」の間に置くのが良かったです。

使用しているテーマによってコードが違うと思うので、それぞれで試してみてください。

ちなみに私が使用しているテーマは「Hueman」というテーマです。

3,相互RSSにスクロールバーをつける

ヘッダー画像の横に相互RSSが来たのは良かったものの、すごいハミ出し様です。

rsssssss

ヘッダー画像の縦幅と同じ大きさに収めて、スクロール出来るようにしたいですね。

これもcssにコードを追加すればスクロールできるようになります。

では早速、スタイルシートにコードを記入します。

.blogroll-channel{
border: solid 1px #999 !important;
height:200px !important;
overflow-y: scroll;
}

borderの「solid 1px #999」の部分は「none」に変更すると枠線が表示されません。

高さについては200pxを自由に変更してください。

…スクロール出来るようになりましたか?

以上で終了です。

おつかれさまでした。

[WordPress]phpをいじってヘッダー右側に相互RSSを設置する方法のまとめ

ちょっと手間取りましたが以前と比べるとだいぶ理解が早くなった気がしてびっくりしてます。

「float使ったらいけそうだな」とか「borderは要らないからnone指定できるかな」とか以前であればいちいち調べないとできなかったと思う。

しみじみと上達を感じました。

作成している新しいサイトもいい感じに仕上がってきました。

楽しいな~。

 - WordPress, 使い方

336adosensu

336adosensu

Message

メールアドレスが公開されることはありません。

  関連記事

By: Elliott Brown
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)

スポンサーリンク [WordPress]フッターのトップへ戻るボタンの位置を変更 …

By: DVIDSHUB
[WordPress] 「トップへ戻る」「PageTop」をスマホだけ表示しないようにする方法[STINGER5]

スポンサーリンク [WordPress] 「トップへ戻る」「PageTop」をス …

By: maaco
ワードプレスで他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグイン?

スポンサーリンク ワードプレスの記事中で他のサイトをスクリーンショット画像とタイ …

stinger0003
スマホにも強い!STINGER5のインストール手順

先日、大人気のワードプレステーマ「STINGERシリーズ」作者のENJIさんが新 …

By: Piotr Drabik
ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法

スポンサーリンク ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 …

pagetop
[STINGER5]トップへ戻るのボタンを好きな画像に変更する方法「PageTop」

スポンサーリンク [STINGER5]トップへ戻るのボタンを好きな画像に変更する …

By: NASA Goddard Space Flight Center
STINGER5でサイドバー上部にプロフィール欄を設置する方法

スポンサーリンク ワードプレステーマSTINGER5でサイドバーの最上部にプロフ …

14924952180_a6cbfdafda_z
センス良いね!画像をポップアップで拡大表示するワードプレスプラグイン

Photo:Le Danseur by Roy Barnett Jr. &nbs …

By: Travis Isaacs
[ワードプレス]手動でcssやphpのバックアップをとるアナログな方法

[ワードプレス]cssやphpのバックアップをとる方法 ワードプレスのHowto …

By: Andrew Abogado
[Hueman使い方]サイドバーの背景色を変更する方法。その2

スポンサーリンク [Hueman使い方]サイドバーの色を変更する方法。その2 前 …