1. TEL
  2. CONTACT
  3. MENU
2015.11.26

アメブロのサイドバーに写真入りの新着情報を入れよう!

こんにちは!

すっかり秋になり、もうすぐ冬がくるんだと感じれる季節になりました。

最近、毎週のように野池やダムに釣りに行ってるので季節の変わるのを肌で感じます。

車を釣り仕様に変えたい安倍です。

 

本日は、『アメブロのサイドバーに写真入りの新着情報を入れよう!』ということで、

『feedwind』というWEBサービスを使ってより親切なブログにしてみたいと思います!

http://feed.mikle.com/ja/

 

bol02

 

本来の最近の記事というとこんな感じで何もありませんよね?

これだと文字タイトルだけでお客様に次の記事内容をパッと直感的に見てもらうことはできません。

そこで、画像入りの最新記事をサイドバーに挿入する方法をご紹介します。

 

ではさっそく始めましょう!

 

bol01

 

上記画像の右上の部分に入れていきます。

 

 

■アメブロのRSSのURLをコピーする

 

bol03

 

上記画像のRSS部分をクリックします。

そのURLをコピーしましょう!

 

■feedwindで新着情報を作りましょう

ちょっとここが分かりにくいので番号順に説明します。

 

bol04

 

①さきほどコピーしたRSSのURLを貼り付けましょう。

②横幅

●2カラムの場合はサイズは300ピクセルで、

●3カラムの場合は広い方が300ピクセルで、狭い方が180ピクセル。

となります。私は2カラムを選択してますので300ピクセルです!

③高さを指定します。

高さが分からないという方は記事数を選択で2記事分くらいがちょうどいいと思います。

④スクロールバーは表示しましょう

⑤初期設定では自動スクロールする設定になっております。

自動でも良いですが個人的には見たい時に見たいものを!というのが良いと思いますので

今回は無効にしておきます。

⑥画像はサムネイル表示にしましょう。

その他の設定もデフォルトで良いでしょう。

⑦タイトルの色や文字色を変えます。

少し上級テクニックになると、テーマの見出しそのまま使ったりも出来ます。

⑧記事の文字数や文字色を変更します。

今回は150文字にしてみました。

 

■右下にできた文字コードをコピーしましょう

クリックすると勝手に全部選択してくれますので、右クリックかCtrl+Cでコピーします。

 

bol05

 

■アメブロのブログ管理>設定・管理>サイドバーの設定>プラグインの追加をクリックしましょう。

 

bol07

 

■フリープラグインのタブを押し先ほどコピーしたコードを貼り付けましょう!

保存するのをお忘れなく。

 

bol06

 

 

 

■アメブロのブログ管理>設定・管理>サイドバーの設定>サイドバーの配置設定をクリックしましょう。

フリープラグインをドラッグして右側の使用する部分に追加しましょう

ここで要らないものは全部、整理しましょう。

 

bol07.5

 

 

bol08

 

保存を押せば完成です!

 

bol09

 

いかがでしょうか?とっても簡単にできましたね!

見た目も自由度がかなり高いです。

こちらはアメブロだけではなくRSSフィードがあり、ソースのカスタマイズが出来るところであればどこにでも挿入できます。

開発者向けにもとても親切ですね!

少し、工夫して目立つ自分だけのブログにしてみましょう。

 

この記事を書いた人 : 福岡・大分 ホームページ制作のエディス

エディス

カテゴリー:便利ツール・サイト

Copyright © ホームページ制作のエディス

top