Web制作もするWebコンサルタントの日々 -23ページ目

お花見&BBQ そして、パエリヤ

昨日は、住宅のトータルアドバイザー 黒田洋介さん主催の花見会で
埼玉の森林公園に行ってきました。

ちょうどいい感じに桜が満開で、綺麗でした。
天気もとっても良くて、とても気持ちよかったです。

そんな絶好の花見日和なのに、カメラを忘れてしまったので、
ブログに写真をアップできないなあと思っていたのですが、
黒田さんから撮影した写真のアルバムサイトのメールを
いただいたので、早速ブログにアップさせていただきます。

さすが仕事が早いです。

Web制作もするWebコンサルタントの日々

Web制作もするWebコンサルタントの日々


桜がキレイですよね。


それで、今回は花見をしながらBBQもしていたのですが、ただ肉を焼く
だけでなく、フライパンでパエリヤを作りました。

作ったと言っても、私は団扇であおいでいただけですが・・・。

パエリヤとっても美味しかったです!
Web制作もするWebコンサルタントの日々



ホームページにブログのRSSをPHPで表示させる

RSS をホームページに表示させる方法はいくつか試してきたのですが、
PHP で表示させる方法を調べて試してみたので、メモとして記事にして
みました。

まず参考にさせていただいたのは、

外部の RSS を PHP で取得 - lucky bag

です。

こちらで、MagpieRSS を使って PHP で RSS を表示させる方法が
紹介されています。

ホームページの文字コードが UTF-8 ならこのままでいいのですが、
私が RSS を表示させたいホームページの文字コードが Shift-JIS
なので、文字化けしてしまって上手くいきませんでした。

そこで、さらに参考にさせていただいたのが、

nJOY BLOG::サイトにRSSを埋め込んで表示させる方法

です。

こちらで、jcode で文字コードを変換をする方法がわかりました。
それで作ったのがこちらです。



<?php
require_once 'rss_fetch.inc';
require_once 'code_table.ucs2jis';
require_once 'jcode.php';
$url = '表示させたいRSS';
$rss = fetch_rss($url);
$title = $rss->channel['title'];
//JcodeConvert($str, $from, $to)
//0:PASS(無変換)1:EUC-JP 2:Shift_JIS 3:ISO-2022-JP(JIS) 4:UTF-8
$title = JcodeConvert($title, 4, 2);
$description = JcodeConvert($description, 4, 2);
foreach ($rss->items as $item ) {
$title = $item[title];
$title = JcodeConvert($title, 4, 2);
$description = htmlspecialchars($item['description']);
$description = JcodeConvert($description, 4, 2);
$url = $item[link];
echo '<dt><a target="_blank" href="'.$url.'">'.$title.'</a></dt>';
echo "<dd>$description</dd><br />\n";
}
?>



ソース内の『表示させたいRSS』のところに、RSS の URL を
貼り付けてください。見栄えについては、CSS で dt と dd を
調整していただけたらと思います。


もし、同じドメイン内のブログの RSS を表示させるだけでしたら、
下記の AJAX を使うほうが簡単です。

[ajax] JavaScript版 RSSリーダー設置手順

Jimdoの使い方 その5 ブログを設置

大まかなデザインについては、昨日まででいったん一区切り
として、デザイン面以外の機能を見ていきたいと思います。

まずはブログの設置です。
いったい、どんな風に設置されるのかわかりませんが、
実験してみたいと思います。

それでは、ログインしてサイドメニューのブログを開きます。
すると、『ブログを新規設定する』というリンクがありますのでクリック。
Web制作もするWebコンサルタントの日々

クリック一つで設定完了のようです。
『最初のブログ記事を投稿』をクリックしましょう。
Web制作もするWebコンサルタントの日々

これがブログ記事の投稿画面のようです。
『タイトル』は投稿する記事のタイトルのことですね。
横に『分類』とありますが、カテゴリーのことでしょうか、
よくわからないので、今回は無視します。
Web制作もするWebコンサルタントの日々

タイトルを入れました。
Web制作もするWebコンサルタントの日々

タイトルを保存してから、次に『≪新しい文章≫』をクリックして、
編集しましょう。
Web制作もするWebコンサルタントの日々

文章を書き換えて、保存。
Web制作もするWebコンサルタントの日々

タイトルが草稿のままになっているので、タイトルを
クリックして、ステータスを『一般公開』に変えましょう。
Web制作もするWebコンサルタントの日々

まずはこんな感じですね。
Web制作もするWebコンサルタントの日々

ログアウトして確認してみると、ホームにブログ記事が
表示されました。
Web制作もするWebコンサルタントの日々

ブログの表示されている場所が本文の上なのはいやなので、
下に移動させたいと思います。下向きの矢印をクリックします。
Web制作もするWebコンサルタントの日々

移動完了。
Web制作もするWebコンサルタントの日々

ログアウトしてみたら、こんな感じです。
Web制作もするWebコンサルタントの日々

本文とブログ記事の違いがぱっと見てわからないのが嫌ですね。
あと、メニューにブログへのリンクを追加しようと思ったのですが、
ブログへのリンクがわかりません。。。

これらについては、これから調べたいと思います。

ちなみに、新しい記事を追加するときはログイン後のサイドメニューの
ブログをクリックすると、『新しい記事を投稿する』ボタンがありますので、
そこから記事を投稿します。

それでは、ブログの追加についてはこれで終了です。


途中経過はここから見れます。
カスタマイズ中のJimdo




Jimdoの使い方 その4 背景の変更

全体の背景よりも、まずはメニューの背景色を変えたいなあ
と思って調べてみたのですが、メニューの背景色はレイアウトに
付属している色のようです。

つまり、メニューだけを変えようとすると、CSSをいじらないと
いけないようなのです。

それは手間なので、まずは背景から変えることにしました。

背景を変えるには2つの方法があります。

1.レイアウトの変更
2.背景色の変更

ここから右のサイドバーのメニューを使います。

1.レイアウトの変更
サイドバーメニューの最上部のレイアウトをクリックします。
この中から、背景がついたものに変えたりできます。

Web制作もするWebコンサルタントの日々

ついでに、レイアウトのメニューには他に

独自レイアウト
HTMLやCSSがわかる人は、ここでカスタマイズすることもできます。
Web制作もするWebコンサルタントの日々

スペシャルレイアウト
これはカスタマイズするというよりも、完成されたレイアウトです。
スポンサーがついてるっぽいので、アメブロのコラボレーション
スキンのようなものですね。
Web制作もするWebコンサルタントの日々

レイアウト設定
コンテンツの表示位置、余白、罫線の変更ができます。
Web制作もするWebコンサルタントの日々


レイアウトを変更してみました。
Web制作もするWebコンサルタントの日々


このレイアウトだと背景色をつけたいですね。
それでは、もうひとつの背景変更方法です。

2.背景色の変更
サイドバーメニュー2番目のスタイルをクリックします。
このスタイルでは、フォント設定、背景パターン、背景画像の
3つのメニューが用意されています。

フォント設定
ページの字体が変更できます。
Web制作もするWebコンサルタントの日々

背景パターン
ここで背景のパターンと色を変更できます。
Web制作もするWebコンサルタントの日々

背景画像
背景用の画像がいくつも用意されています。
Web制作もするWebコンサルタントの日々

背景画像もいいのですが、今選んでいるレイアウトだと、
うるさくなりそうなので、背景パターンで背景を作りたい
と思います。

まずは左のカラースライダーで色を作ります。
Web制作もするWebコンサルタントの日々

次にパターンを選びます。
Web制作もするWebコンサルタントの日々

黒だとうるさいので、白のパターンに変更しました。
Web制作もするWebコンサルタントの日々

背景色を変更してみました。
またがらっと雰囲気が変わりましたね。
Web制作もするWebコンサルタントの日々


途中経過はここから見れます。
カスタマイズ中のJimdo

Jimdoの使い方 その3 ヘッダーの編集

今日はヘッダーを編集してみたいと思います。
では、まずマウスをヘッダーに持っていきます。

Web制作もするWebコンサルタントの日々

クリックすると編集メニューが表示されます。
左から

フォトギャラリー
たくさんのヘッダー画像の中から選ぶことができます。数えてみたら77個もありました。
Web制作もするWebコンサルタントの日々

オリジナル画像のアップロード
オリジナル画像をアップロードして、オリジナルのヘッダー画像にすることもできます。
Web制作もするWebコンサルタントの日々

パターン
Web制作もするWebコンサルタントの日々

タイトル
タイトルを書き換えたり、大きさ、色、位置等を変えたり、太字や斜体にもできます。
Web制作もするWebコンサルタントの日々

ロゴ
これは有料版のみの機能なので、詳細はわからないです。
Web制作もするWebコンサルタントの日々

設定
ヘッダーの高さとズームしてみたり、移動させれるようですが、デフォルトでは移動できないですね。
Web制作もするWebコンサルタントの日々


ヘッダーを変えてみました。
Web制作もするWebコンサルタントの日々

画像はフォトギャラリーの中から選んでいます。
画像を変えるだけで、雰囲気変わりますね。

タイトル文字の色を変えるときに、感覚的に変えることができるのですが、
スポイトツールがあると、より使いやすそうだなと思いました。

あと、タイトルに日本語を持ってくると、なんかスマートじゃ
なくなってしまうので、そこをどうできるかが大事なのかなと。
ロゴがあったりすると、また雰囲気が変わるんでしょうね。
とにかく、何か工夫をしないとですね。

ヘッダーの編集はここまでにして、明日は背景かメニューを
変えてみようと思います。

途中経過です。
カスタマイズ中のJimdo