こんにちは!
すっかり秋になり、もうすぐ冬がくるんだと感じれる季節になりました。
最近、毎週のように野池やダムに釣りに行ってるので季節の変わるのを肌で感じます。
車を釣り仕様に変えたい安倍です。
本日は、『アメブロのサイドバーに写真入りの新着情報を入れよう!』ということで、
『feedwind』というWEBサービスを使ってより親切なブログにしてみたいと思います!
本来の最近の記事というとこんな感じで何もありませんよね?
これだと文字タイトルだけでお客様に次の記事内容をパッと直感的に見てもらうことはできません。
そこで、画像入りの最新記事をサイドバーに挿入する方法をご紹介します。
ではさっそく始めましょう!
上記画像の右上の部分に入れていきます。
■アメブロのRSSのURLをコピーする
上記画像のRSS部分をクリックします。
そのURLをコピーしましょう!
■feedwindで新着情報を作りましょう
ちょっとここが分かりにくいので番号順に説明します。
①さきほどコピーしたRSSのURLを貼り付けましょう。
②横幅
●2カラムの場合はサイズは300ピクセルで、
●3カラムの場合は広い方が300ピクセルで、狭い方が180ピクセル。
となります。私は2カラムを選択してますので300ピクセルです!
③高さを指定します。
高さが分からないという方は記事数を選択で2記事分くらいがちょうどいいと思います。
④スクロールバーは表示しましょう
⑤初期設定では自動スクロールする設定になっております。
自動でも良いですが個人的には見たい時に見たいものを!というのが良いと思いますので
今回は無効にしておきます。
⑥画像はサムネイル表示にしましょう。
その他の設定もデフォルトで良いでしょう。
⑦タイトルの色や文字色を変えます。
少し上級テクニックになると、テーマの見出しそのまま使ったりも出来ます。
⑧記事の文字数や文字色を変更します。
今回は150文字にしてみました。
■右下にできた文字コードをコピーしましょう
クリックすると勝手に全部選択してくれますので、右クリックかCtrl+Cでコピーします。
■アメブロのブログ管理>設定・管理>サイドバーの設定>プラグインの追加をクリックしましょう。
■フリープラグインのタブを押し先ほどコピーしたコードを貼り付けましょう!
保存するのをお忘れなく。
■アメブロのブログ管理>設定・管理>サイドバーの設定>サイドバーの配置設定をクリックしましょう。
フリープラグインをドラッグして右側の使用する部分に追加しましょう
ここで要らないものは全部、整理しましょう。
保存を押せば完成です!
いかがでしょうか?とっても簡単にできましたね!
見た目も自由度がかなり高いです。
こちらはアメブロだけではなくRSSフィードがあり、ソースのカスタマイズが出来るところであればどこにでも挿入できます。
開発者向けにもとても親切ですね!
少し、工夫して目立つ自分だけのブログにしてみましょう。
この記事を書いた人 : 福岡・大分 ホームページ制作のエディス
最新の記事一覧
便利ツール・サイト2025年8月12日【2025年8月版】広告物をもっと魅力的に作れるフリーフォントをご紹介!
スキルアップ2025年8月6日【永久保存版】“色”から受け取るイメージの重要性
便利ツール・サイト2025年7月30日【2025年7月版】ウェブディレクターが重宝している便利なプラグイン・アプリ
便利ツール・サイト2025年6月12日集中線を簡単に画像に追加!迫力ある画像を作ろう!!