技術のタマゴTOPカスタマイズ
2013年09月08日

複数ブログの最新記事一覧リストをまとめてサイトに設置する方法

【注意】Google Feed API が2015年12月2日に停止し、
この記事の方法では一覧が表示されなくなりました。

こちらの記事の方法で同様に表示することができるそうです。
ありがとうございます。

【jQuery】緊急案件:Google Feed API が廃止になっているので代替案を紹介します。・・・ONZE

【jQuery + PHP】クロスドメイン対応版:Google Feed API の代替案を紹介します。・・・ONZE

【追記】
12月6日現在、Google Feed API が復活して、下の記事の方法で
再び表示されるようになりました。

***

私の運営するココロデザイン総合サイトには、この『技術のタマゴ』の他にも
たくさんのブログがありまして、各ブログの最新記事一覧リストを
サイトに表示させる方法はないものかと、探してみました。

すると、Google Feed API を使うことで、複数ブログのRSSフィードを
まとめてサイトに表示させることができることが分かりました♪

いろいろな方がソースを提供して下さっているのですが、
一番私のやりたかったことの実現方法が、丸ごと書いてあったのが
こちら、indigonote さまの二つの記事です。

Google Feed APIを使って複数RSSフィードをまとめて昇降順に表示する
Google Feed APIを使って複数RSSフィードを表示する【カスタマイズ版】

複数ブログの記事一覧を日時順に並べ替えて、まとめて
並べる方法で、TOPページに最新記事総合リストをつけました。
複数のRSSフィードをまとめて降順に表示

ichiran_all.jpg

各ブログの最新記事をそれぞれ5記事ずつ表示する形で、
サイト一覧の下に、最新記事リストを付けました。
ページ内の複数の場所に設置する

ichiran_betsu.jpg

上の二つの記事は、記事だけ読んでいても、正直よく分からなくて、
JavaScriptソースをどこに貼るの???などと悩みがちなのですが、
『デモを確認する』ボタンから、サンプルページに跳べて、
じっさいに動いている状態が見られるし、
サンプルページのソースを表示させると、ちゃんとどの位置に、
どんな記述を書けばいいのか分かる仕組みになっています。

素晴らしいです!

基本的には、ソースをコピーして、RSSフィードのURL等を
ちょこっと書き換えて、該当箇所に貼り付けるだけで使えます。

複数ブログの最新記事をまとめて、お知らせ欄を作りたい方は
ぜひどうぞ♪便利ですよ!

タグ:RSS feed
posted by かこ at 00:02 | Comment(2) | TrackBack(0) | カスタマイズ
2013年01月07日

ブログデザインを考える

現在私は、ココロデザイン総合サイト内で
複数のブログを運営しています。

最初は、それぞれ違うテンプレートではじめたんですが、
「すべて、かこさんが書いているんですか?」
という質問が相次いだため、一旦デザインを統一しました。

格好いい言葉でいえば、ブランディング。
ココロデザインブランドのイメージづくりです。

ですが、また、ブログごとにデザインを少しずつ替えてみています。

なぜかっていうと、
「育児ブログ」には育児ブログ、
「物語ブログ」には物語ブログ、
「技術ブログ」には技術ブログに、
それぞれ、ふさわしい外観があるのではないかと思ったからです。

検索して来て下さった方が、ブログを開けた瞬間に、
何について書いてあるブログか、ひと目で分かるようにしたいんです。

*****

外見って、大切なんです。

その人が何を伝えたいか、何が好きか、どういう価値観を持つ人か、
意図せずとも伝えてしまう。

全身ピンクのレースリボンひらひらの洋服で固めている
女の子がいたら、
たとえ親からの押し付けで着ていたとしても、
その子はロマンチックなものが好きなんだと、周囲は判断します。

*****

と、いうわけで、
ココロデザイン総合サイト全体の、『ふわふわした想い』という
共通したイメージは、ヘッダのデザインやパーツに
同じものを使うことで表現。基本の背景は布地。

cocorotop.jpg

「育児ブログ」の「ちびこといっしょ」は
オレンジピンク系の配色、丸ゴシックの茶系フォントで、
あたたかい感じに。

chibicotop.jpg

「読み物ブログ」の「音と紅茶の時間」は
ダークグリーン系、背景色もワントーン落とし、
思い切って大き目の明朝フォントを採用してみました。

ototop.jpg

「技術ブログ」のこの「技術のタマゴ」は、
グレーのフォント、背景はタイル柄にしてみています。

pctop.jpg

パラレルワールドみたいに見えるといいなぁ、と。

*****

全体で気を付けていることは、
手作り感、親しみやすい、柔らかい感じを出す、ということ。

ごく普通の人が書いてますよー、っていう印象。

でも、私の好みに合わせると、全体がぼんやり白っぽく
なっちゃうんですよね。

記事本文よりデザインが主張してはいけないと
私は思っているんですけど、もうちょっと
サイトのイメージが読者さんの心に残る感じにしたいなぁ。

自分の好き、と、伝えたいイメージ、の違い。

まだまだデザインの意図がはっきり見えてこない。
今後の課題です。

posted by かこ at 15:15 | Comment(2) | TrackBack(0) | カスタマイズ
2013年01月04日

継ぎ目のない背景素材

サイトやブログの背景に使える、素敵な
フリーの素材サイトを見つけたのでご紹介します♪

N.K.P.S なんやかんやのパターン素材 さま

商用利用も、加工もOKという、なんて太っ腹な。

現在、掲載数は、サイズ・カラーバリエーション合わせて
全部で6082種類だそうです。

こんなにたくさんの素材を無料でダウンロード
させていただけるなんて、感激。

今、ココロデザイン総合サイト、各ブログの背景は
こちらの素材を色調整・サイズ加工して
使わせていただいています。

本当にありがとうございます!

*****

素材をいただくときには、サイトの使用規約をちゃんと読んでください。
画像の直リンク等はしないでくださいね。

ご自由にどうぞ、とあっても、連絡先があればお礼を伝えてくださいね。
それが管理人さんの励みになります!

*****

背景って難しくって、家の壁もそうなんですけど、
少しだけ色を付けたつもりが、全体見ると、どぎつくなっちゃったり。

うんうんうなりながら、Fireworksのフィルタで
何度も調整してます。

むむむ。難しい。

今は、おとなしめのファブリック(布)素材や
タイルにしていますが、また、違うのに替えてみたりしようかな、
と思っています。

背景で、サイトの印象は、がらっと変わっちゃうんですよね〜。

中身も大事、中身を伝える外見も大切、ってことで。

posted by かこ at 04:34 | Comment(0) | TrackBack(0) | カスタマイズ