お花見&BBQ そして、パエリヤ
昨日は、住宅のトータルアドバイザー 黒田洋介さん主催の花見会で
埼玉の森林公園に行ってきました。
ちょうどいい感じに桜が満開で、綺麗でした。
天気もとっても良くて、とても気持ちよかったです。
そんな絶好の花見日和なのに、カメラを忘れてしまったので、
ブログに写真をアップできないなあと思っていたのですが、
黒田さんから撮影した写真のアルバムサイトのメールを
いただいたので、早速ブログにアップさせていただきます。
さすが仕事が早いです。


桜がキレイですよね。
それで、今回は花見をしながらBBQもしていたのですが、ただ肉を焼く
だけでなく、フライパンでパエリヤを作りました。
作ったと言っても、私は団扇であおいでいただけですが・・・。
パエリヤとっても美味しかったです!

埼玉の森林公園に行ってきました。
ちょうどいい感じに桜が満開で、綺麗でした。
天気もとっても良くて、とても気持ちよかったです。
そんな絶好の花見日和なのに、カメラを忘れてしまったので、
ブログに写真をアップできないなあと思っていたのですが、
黒田さんから撮影した写真のアルバムサイトのメールを
いただいたので、早速ブログにアップさせていただきます。
さすが仕事が早いです。


桜がキレイですよね。
それで、今回は花見をしながらBBQもしていたのですが、ただ肉を焼く
だけでなく、フライパンでパエリヤを作りました。
作ったと言っても、私は団扇であおいでいただけですが・・・。
パエリヤとっても美味しかったです!

ホームページにブログのRSSをPHPで表示させる
RSS をホームページに表示させる方法はいくつか試してきたのですが、
PHP で表示させる方法を調べて試してみたので、メモとして記事にして
みました。
まず参考にさせていただいたのは、
外部の RSS を PHP で取得 - lucky bag
です。
こちらで、MagpieRSS を使って PHP で RSS を表示させる方法が
紹介されています。
ホームページの文字コードが UTF-8 ならこのままでいいのですが、
私が RSS を表示させたいホームページの文字コードが Shift-JIS
なので、文字化けしてしまって上手くいきませんでした。
そこで、さらに参考にさせていただいたのが、
nJOY BLOG::サイトにRSSを埋め込んで表示させる方法
です。
こちらで、jcode で文字コードを変換をする方法がわかりました。
それで作ったのがこちらです。
ソース内の『表示させたいRSS』のところに、RSS の URL を
貼り付けてください。見栄えについては、CSS で dt と dd を
調整していただけたらと思います。
もし、同じドメイン内のブログの RSS を表示させるだけでしたら、
下記の AJAX を使うほうが簡単です。
[ajax] JavaScript版 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 ブログを設置
大まかなデザインについては、昨日まででいったん一区切り
として、デザイン面以外の機能を見ていきたいと思います。
まずはブログの設置です。
いったい、どんな風に設置されるのかわかりませんが、
実験してみたいと思います。
それでは、ログインしてサイドメニューのブログを開きます。
すると、『ブログを新規設定する』というリンクがありますのでクリック。

クリック一つで設定完了のようです。
『最初のブログ記事を投稿』をクリックしましょう。

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

タイトルを入れました。

タイトルを保存してから、次に『≪新しい文章≫』をクリックして、
編集しましょう。

文章を書き換えて、保存。

タイトルが草稿のままになっているので、タイトルを
クリックして、ステータスを『一般公開』に変えましょう。

まずはこんな感じですね。

ログアウトして確認してみると、ホームにブログ記事が
表示されました。

ブログの表示されている場所が本文の上なのはいやなので、
下に移動させたいと思います。下向きの矢印をクリックします。

移動完了。

ログアウトしてみたら、こんな感じです。

本文とブログ記事の違いがぱっと見てわからないのが嫌ですね。
あと、メニューにブログへのリンクを追加しようと思ったのですが、
ブログへのリンクがわかりません。。。
これらについては、これから調べたいと思います。
ちなみに、新しい記事を追加するときはログイン後のサイドメニューの
ブログをクリックすると、『新しい記事を投稿する』ボタンがありますので、
そこから記事を投稿します。
それでは、ブログの追加についてはこれで終了です。
途中経過はここから見れます。
カスタマイズ中のJimdo
として、デザイン面以外の機能を見ていきたいと思います。
まずはブログの設置です。
いったい、どんな風に設置されるのかわかりませんが、
実験してみたいと思います。
それでは、ログインしてサイドメニューのブログを開きます。
すると、『ブログを新規設定する』というリンクがありますのでクリック。

クリック一つで設定完了のようです。
『最初のブログ記事を投稿』をクリックしましょう。

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

タイトルを入れました。

タイトルを保存してから、次に『≪新しい文章≫』をクリックして、
編集しましょう。

文章を書き換えて、保存。

タイトルが草稿のままになっているので、タイトルを
クリックして、ステータスを『一般公開』に変えましょう。

まずはこんな感じですね。

ログアウトして確認してみると、ホームにブログ記事が
表示されました。

ブログの表示されている場所が本文の上なのはいやなので、
下に移動させたいと思います。下向きの矢印をクリックします。

移動完了。

ログアウトしてみたら、こんな感じです。

本文とブログ記事の違いがぱっと見てわからないのが嫌ですね。
あと、メニューにブログへのリンクを追加しようと思ったのですが、
ブログへのリンクがわかりません。。。
これらについては、これから調べたいと思います。
ちなみに、新しい記事を追加するときはログイン後のサイドメニューの
ブログをクリックすると、『新しい記事を投稿する』ボタンがありますので、
そこから記事を投稿します。
それでは、ブログの追加についてはこれで終了です。
途中経過はここから見れます。
カスタマイズ中のJimdo
Jimdoの使い方 その4 背景の変更
全体の背景よりも、まずはメニューの背景色を変えたいなあ
と思って調べてみたのですが、メニューの背景色はレイアウトに
付属している色のようです。
つまり、メニューだけを変えようとすると、CSSをいじらないと
いけないようなのです。
それは手間なので、まずは背景から変えることにしました。
背景を変えるには2つの方法があります。
1.レイアウトの変更
2.背景色の変更
ここから右のサイドバーのメニューを使います。
1.レイアウトの変更
サイドバーメニューの最上部のレイアウトをクリックします。
この中から、背景がついたものに変えたりできます。

ついでに、レイアウトのメニューには他に
独自レイアウト
HTMLやCSSがわかる人は、ここでカスタマイズすることもできます。

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

レイアウト設定
コンテンツの表示位置、余白、罫線の変更ができます。

レイアウトを変更してみました。

このレイアウトだと背景色をつけたいですね。
それでは、もうひとつの背景変更方法です。
2.背景色の変更
サイドバーメニュー2番目のスタイルをクリックします。
このスタイルでは、フォント設定、背景パターン、背景画像の
3つのメニューが用意されています。
フォント設定
ページの字体が変更できます。

背景パターン
ここで背景のパターンと色を変更できます。

背景画像
背景用の画像がいくつも用意されています。

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

次にパターンを選びます。

黒だとうるさいので、白のパターンに変更しました。

背景色を変更してみました。
またがらっと雰囲気が変わりましたね。

途中経過はここから見れます。
カスタマイズ中のJimdo
と思って調べてみたのですが、メニューの背景色はレイアウトに
付属している色のようです。
つまり、メニューだけを変えようとすると、CSSをいじらないと
いけないようなのです。
それは手間なので、まずは背景から変えることにしました。
背景を変えるには2つの方法があります。
1.レイアウトの変更
2.背景色の変更
ここから右のサイドバーのメニューを使います。
1.レイアウトの変更
サイドバーメニューの最上部のレイアウトをクリックします。
この中から、背景がついたものに変えたりできます。

ついでに、レイアウトのメニューには他に
独自レイアウト
HTMLやCSSがわかる人は、ここでカスタマイズすることもできます。

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

レイアウト設定
コンテンツの表示位置、余白、罫線の変更ができます。

レイアウトを変更してみました。

このレイアウトだと背景色をつけたいですね。
それでは、もうひとつの背景変更方法です。
2.背景色の変更
サイドバーメニュー2番目のスタイルをクリックします。
このスタイルでは、フォント設定、背景パターン、背景画像の
3つのメニューが用意されています。
フォント設定
ページの字体が変更できます。

背景パターン
ここで背景のパターンと色を変更できます。

背景画像
背景用の画像がいくつも用意されています。

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

次にパターンを選びます。

黒だとうるさいので、白のパターンに変更しました。

背景色を変更してみました。
またがらっと雰囲気が変わりましたね。

途中経過はここから見れます。
カスタマイズ中のJimdo
Jimdoの使い方 その3 ヘッダーの編集
今日はヘッダーを編集してみたいと思います。
では、まずマウスをヘッダーに持っていきます。

クリックすると編集メニューが表示されます。
左から
フォトギャラリー
たくさんのヘッダー画像の中から選ぶことができます。数えてみたら77個もありました。

オリジナル画像のアップロード
オリジナル画像をアップロードして、オリジナルのヘッダー画像にすることもできます。

パターン

タイトル
タイトルを書き換えたり、大きさ、色、位置等を変えたり、太字や斜体にもできます。

ロゴ
これは有料版のみの機能なので、詳細はわからないです。

設定
ヘッダーの高さとズームしてみたり、移動させれるようですが、デフォルトでは移動できないですね。

ヘッダーを変えてみました。

画像はフォトギャラリーの中から選んでいます。
画像を変えるだけで、雰囲気変わりますね。
タイトル文字の色を変えるときに、感覚的に変えることができるのですが、
スポイトツールがあると、より使いやすそうだなと思いました。
あと、タイトルに日本語を持ってくると、なんかスマートじゃ
なくなってしまうので、そこをどうできるかが大事なのかなと。
ロゴがあったりすると、また雰囲気が変わるんでしょうね。
とにかく、何か工夫をしないとですね。
ヘッダーの編集はここまでにして、明日は背景かメニューを
変えてみようと思います。
途中経過です。
カスタマイズ中のJimdo
では、まずマウスをヘッダーに持っていきます。
クリックすると編集メニューが表示されます。
左から
フォトギャラリー
たくさんのヘッダー画像の中から選ぶことができます。数えてみたら77個もありました。

オリジナル画像のアップロード
オリジナル画像をアップロードして、オリジナルのヘッダー画像にすることもできます。

パターン

タイトル
タイトルを書き換えたり、大きさ、色、位置等を変えたり、太字や斜体にもできます。

ロゴ
これは有料版のみの機能なので、詳細はわからないです。

設定
ヘッダーの高さとズームしてみたり、移動させれるようですが、デフォルトでは移動できないですね。

ヘッダーを変えてみました。

画像はフォトギャラリーの中から選んでいます。
画像を変えるだけで、雰囲気変わりますね。
タイトル文字の色を変えるときに、感覚的に変えることができるのですが、
スポイトツールがあると、より使いやすそうだなと思いました。
あと、タイトルに日本語を持ってくると、なんかスマートじゃ
なくなってしまうので、そこをどうできるかが大事なのかなと。
ロゴがあったりすると、また雰囲気が変わるんでしょうね。
とにかく、何か工夫をしないとですね。
ヘッダーの編集はここまでにして、明日は背景かメニューを
変えてみようと思います。
途中経過です。
カスタマイズ中のJimdo