fonルーターのセットアップ

お知らせ
この記事は fonルーターのセットアップ｜WordPress整体院へ引っ越しました。

先日iPhone 4をついに購入しました。

そしてそのオマケ（？）でついてきたのがFONルーター。

治療院の無線環境は初代AirMac Expressを使っていました。

だらかべつのFONルーターも必要ないと思っていたのですが･･･

スペックを良く見ると“n"に対応してるではないですか！

初代AirMac Expressは遠い記憶では"b/g"までしか対応していなかったはず。

だからFONルーターにするとLAN環境の改善になるのでは？

と思い申し込みました。

で、今日届いたのさっそくセットアップ。

ただ、同梱されているマニュアルはiPhoneと携帯電話で接続する方法しか書いてありません。

パソコンはちゃんとつながるのかなぁ･･･と少々不安。

まぁ、とりあえず接続してみよう、ということで箱から出してケーブルをつなぐこと数分。

まず、プライベート用のLAN環境であるMyPlaceの方にはトラブルもなく接続できました♪

手順というほどのこともないですがメモっておくと下記の２ステップ。

1. 無線LANのネットワークの中にMyPlaceが出てくるのでそれを選択。
2. WPA Keyを聞いてくるので入力（これは本体のウラ側に書いてあります）

ただ、ESSIDがMyPlaceというのが気に入らない。

近所でiPhoneを買ってFONルーターを手に入れた人が現れるとMyPlaceというのが沢山出てくることになりますからねぇ。

変え方は次のステップでやります。

1. ブラウザで192.168.10.1にアクセス
2. FONルーターの管理画面が表示
3. パスワードadminでログイン
4. ステータスが表示されます
5. 右上のドロップボックスからWiFiを選択
6. 下の画面のSSIDを自分の好きなものに変える

これで完了です。

ちなみにパスフレーズというのは本体のウラに書いてあるWPA Keyのようです。

これも変更可能です。変えておいた方が安全でしょうね。

ちなみに管理画面のログインパスワードも変更した方が安全だと思います。

変更するには右上のドロップボックスからパスワードを選べばOKです。

これでとりあえずプライベートなネットワークの設定は完了。

続いて一般に公開されるFON_FREE_INTERNETの方に移ります。

こちらは同梱のiPhone用のマニュアルを見ながら設定。

接続は問題無くできたのですがマニュアルに書いてあるパスワード確認メールが届かない。

しばらく悩んだのですが、どうやらFONルーターが届く前に勇み足で（？）MySoftbankのサイトの一番下にあるソフトバンクWi-Fiスポットのページで一括設定をしてしまったからのようです。

設定はしてくれてるけどパスワードは教えてくれないという何とも言えない状況に。

すでに登録されているのでiPhoneでの接続は問題ないのですが･･･

パスワードがわからないとパソコンなど他の機器で接続したい時に使えないです。

ということでパスワード探しをしなければなりません。

その結末は次回にでも。

すごくいいキーワードツールかも！？

お知らせ
この記事は すごくいいキーワードツールかも！？｜WordPress整体院へ引っ越しました。

いつもチェックしている「海外SEO情報ブログ」さんに面白いツールが紹介されていました。

絶対使いたい「イタリア製特注キーワードツール（日本語対応）」

という記事で紹介されている

Übersuggest

というツールです。

Googleの入力補助機能（オートコンプリート）を利用して実際にユーザーが検索する最新のキーワードが表示されます。

これって凄いんじゃないですか！？

今のトレンドがわかるわけですからね。

試しに「肩こり」でやってみるとこんな感じになります。

さっそくこれで自分のサイトのお役立ちページのネタなどを検討してみたいと思います。

Googleマップで上位表示を狙うには？

お知らせ
この記事は Googleマップで上位表示を狙うには？｜WordPress整体院へ引っ越しました。

GoogleはGoogleマップという地図サービスを提供しています。

あなたも一度は使ったことがあるのでは？

結構前から、通常の検索結果にも地図が挿入されることが多くなりました。

特に自分の住んでいる地域をキーワードに入れて検索するとほぼ100％の確率で地図が出てくるように思います。

この結果に自分のお店が表示されると嬉しいですよね。

どうしたものか調べるとこんな記事を発見しました、

Googleマップで上位表示するための6つのSEO

それによると次の6つ秘訣があるそうです。

1. ローカルビジネスセンターに登録
2. 名前にキーワードを入れる
3. 説明にキーワードを入れる
4. オンラインレビュー
5. リンク
6. 近さ

１については僕の治療院のメインサイトはすでに登録済み。

2と3についてはやってなかったので即修正してみました。

4のレビューについては上位表示されているところでも無しのところばかり。

SEOの効果は不明ですがレビューがあれば差別化にはなりそうです。

患者さんか友人にお願いして書いてもらおうかな？

5のリンクは普通の被リンクのことでしょうかね？これは普通にやっているからいいのかなぁ･･･

6の近さはどうにもなりませんね。

でも、検索結果を見ていると「市」単位で検索する分にはあまり関係なさそうな気がします。

さすがに駅名になると駅の近くになるようですが･･･

さて、とりあえず2と3についてはやってみました。

これでしばらく様子を見てまた報告しますね。

Yahooの順位が上がった

お知らせ
この記事は Yahooの順位が上がった｜WordPress整体院へ引っ越しました。

久しぶりに更新。

メインのサイトが6月のYahooインデックスアップデートとアルゴリズムアップデートで順位が7位ぐらいにまで落ちてしまいました。

今まで1位か2位をウロウロしていたのでショックだったのですが・・・

何か対策をするのがめんどくさくて放置状態にしてました（苦笑）

というのも上位に来てるのがポータルサイト系ばかりだったのでまぁいいかなと。

しかし、やはりそのキーワードでのアクセスは半分ぐらいに減りました。検索の順位は効いてきますね。

新患数にも影響が出てきたのでそろそろヤバイかなと思っていたら・・・

今日見たら4位にまで上昇。

もうすこし様子見することに決めました。

う〜ん、はやくYahooの検索結果もGoogleに切り替わって欲しいなぁ。

WordPressのビジュアルリッチエディターにテーマのCSSを適用する

お知らせ
この記事は WordPressのビジュアルリッチエディターにテーマのCSSを適用する｜WordPress整体院へ引っ越しました。

ビジュアルリッチエディターにオリジナルのテーマのCSSが適用できるとページ作りもイメージしやすくなります。

まぁ、自分で使うぶんにはそれほど気にならないですが、ホームページを作ったお客さんにとってはやはり見たとおりのページができるのが理想ですよね。

 いつも使っているTinyMCE AdvancedというプラグインではテーマのCSSを適用する「Import the current theme CSS classes」オプションがあります。

しかし、複雑な構造のテーマ用のCSSをbodyしかないビジュアルリッチエディターの編集画面に適用されるといろいろと不都合があるんですよね…

例えばbodyに背景画像を設定して、その上に背景色白を設定した<dvi>を置いてそこに本文を表示、という構造にしていると編集画面では背景画像だけ表示されて困るんですよね。

編集画面の互換性まで考えてCSS作るのも面倒。

プラグイン中のCSSをいじれば解決できますが、それってプラグインをアップデートした時にまた書き直す必要がありそう…

うまい方法がないかと思っているとよい記事がありました。

WordPressのリッチエディタにCSSを適用する

ここに書いてある関数をfunctions.phpに書いてリッチエディタ用のCSSをアップすればOK。

あ、TinyMCE Advancedの「Import the current theme CSS classes」オプションをオフにするのを忘れずに。

リッチエディタ用のCSSはテーマのCSSから不要なものを削って、bodyの部分だけすこし手を加えればOK。幅も決められるので、編集画面と実際のページの状態がほぼ同じになります。

これなら、詳しくない人が編集しても直感的でわかりやすくなりますね。

 

 

WordPressでlightbox風に表示するプラグイン

お知らせ
この記事は WordPressでlightbox風に表示するプラグイン｜WordPress整体院へ引っ越しました。

前からやってみたかったlightbox風の表示。

簡単に実現できるプラグインを探してみました。

今回導入したのは大御所と思われるLightbox 2というプラグイン。

 Lightbox 2

WordPress.org プラグインページ »
プラグインの ホームページ »

 

導入は「プラグイン」->「新規追加」の画面でキーワードを「lightbox」にして検索。

あとはインストールを選んで有効化すればOKです。リンクが貼ってある画像は何もしなくてもlightbox風になります。

ちなみにバージョンは2.9.2です。WP2.9.2で特に問題なく動いてます。

 lightbox風にするプラグインは色々とありますが一番のポイントとなったのは自動でrel属性を加えてくれるところ。

僕だけならまだしも、あまりパソコンに詳しくない人でも更新できるようにと考えると自動化できる部分は自動化できないとね。自分のサイトも大量にある画像を一つ一つ編集しなおすのは大変ですし。

グループ表示もできるみたいですが、まだ試していません。

 何はともあれお手軽に導入できるのでお勧めです。

 

WordPressで画像の大きさを知るには？

お知らせ
この記事は WordPressで画像の大きさを知るには？｜WordPress整体院へ引っ越しました。

前回で紹介した画像を表示する方法ですが、画像のサイズは不明のままでした。

まぁ、サイズが不明でもなんとかなるだろうと思っていたのですが…

IE6やIE7で初回の読み込み時にレイアウトが崩れることが判明。
再読み込みするときちんとしたレイアウトで表示してくれます。

 状況的にサイズの指定がないことが原因っぽい。

 ということでどうやったらサイズを調べられるのか探してみました。

Codexを見てもズバリの関数は無かったのですが、関数の中には画像のサイズを利用しているものがあり、その関数のソースを見ることに。

そうするとありました。名前もそのまま getimagesize という関数が。 どこて定義されているのかわかりませんが、ファイルのパスを引数に使って配列でサイズを返してくれるみたいです。

ということで前回のソースをさらに改良を加えてこんな感じしました。

function head_img($each_img,$img_alt_value,$img_path){
    if($each_img==""){
        /*何も表示しない*/
        }else{
            $img_begin='<div class="imgBox clearfix"><img src="';
            $img_path=$img_path.'/wp-content/uploads/'.$each_img;/*画像ファイルのパスを設定*/
            $img_alt='" alt="'.$img_alt_value;/*画像ファイルのAltを設定*/
            $img_size = getimagesize($img_path);/*画像の大きさを所得*/
            $img_end='" height="'.$img_size[1].'" width="780" /></div>';/*ファイルの高さのみ使用。横幅幅は固定（大きさが間違っていてもレイアウトを崩さないため）*/

        echo $img_begin.$img_path.$img_alt.$img_end;
    }
}

 

返値の配列は“横幅　高さ”の順になるようです。

今回は高さだけ利用しましたが使う場所によっては幅も利用できますね。

こんなことしたがる人が他にいるか分かりませんがご参考までに。

ちなみにIEのレイアウト崩れも解消されたと思います、多分…

WordPressでアップロードした画像を記事以外の場所に表示〜その２

お知らせ
この記事は WordPressでアップロードした画像を記事以外の場所に表示〜その２｜WordPress整体院へ引っ越しました。

前回紹介した方法ですが、いろんな場所で使い回せるように関数にすることに。

その覚え書きです。

PHPはシロウトなのでいろいろと勉強しつつ次のような関数を作成。

function head_img($each_img,$img_alt_value,$img_path){
    if($each_img==""){
        /*何も表示しない*/
        }else{
            $img_begin='<img src="';
            $img_path=$img_path.'/wp-content/uploads/'.$each_img;/*画像ファイルのパスを設定*/
            $img_alt='" alt="'.$img_alt_value;/*画像ファイルのAltを設定*/
            $img_end='" width="780" />';

        echo $img_begin.$img_path.$img_alt.$img_end;
    }
}

 幅だけ指定しているのは、間違ってでかい画像をアップした時でもレイアウトが崩れないように。
まぁ、画像のアスペクト比が変わるのは目をつぶろう。

テンプレート側はこんな指定をしてあります。

<?php head_img(get_post_meta($post->ID,'トップ画像',TRUE), get_post_meta($post->ID,'トップ画像説明',TRUE),get_option('siteurl')); ?>

 ちょっと苦労したのがWordPressのインストールディレクトリの所得。

始めは bloginfo('wpurl') で行けるやん♪と思ってたらできない。

よくかんがえるとこの関数は得た値を画面に出力する関数。関数の引数に使ったり値を変数に代入したりできない。

で、Codexを見てると get_option という関数があるのを発見。これはちゃんと値を返してくれる関数なので使えそう。

パラメータはデータベースの option_name を直接参照すればOKです。

これで、記事と連動してヘッダやフッターの画像を変えることが簡単になりました。

まぁ今のところ使ってるのはヘッダーの画像だけですが…

 

WordPressでアップロードした画像を記事以外の場所に表示

お知らせ
この記事は WordPressでアップロードした画像を記事以外の場所に表示｜WordPress整体院へ引っ越しました。

ホームページを作っていて特定のページだけヘッダーのロゴを変えたい時などはないですか？

その都度テンプレートを作るのもよいのですが、数が増えてくると管理が面倒。

ということで、カスタムフィールドにファイル名をいれることで、アップロードした画像を記事以外の場所（ヘッダーやフッターなど）に表示できるようにしてみました。

やり方はアップロードした画像のパスさえ分かればよいのでテンプレートの画像を表示したい場所に

 <img src="<?php bloginfo('wpurl'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID,'画像ファイル名',TRUE); ?>" alt="<?php echo get_post_meta($post->ID,'画像説明文',TRUE); ?>"  />

てな感じで書けばOK。

あとは、各記事毎に「画像ファイル名」と「画像説明文」というカスタムフィールドを作ればアップロードした画像が表示されます。

OKと書きましたが、実はこのままだと「画像ファイル名」を指定しない時にファイルが見つからないので「？」が表示されてしまいます。

そうなると見苦しいのでif文でカスタムフィールドが空白でない時だけ表示するようにしています。

WordPressのページをRSSフィードのに追加

お知らせ
この記事は WordPressのページをRSSフィードのに追加｜WordPress整体院へ引っ越しました。

WordPressは標準では「投稿」しかRSSフィードに反映してくれません。

しかし、困ったことに僕の用途では「ページ」を使うことがほとんどです。

 「ページ』もフィードに反映させることができないものかと探してみると、プラグインを見つけてしまいました。

 RSS Includes Pages
WordPress.org プラグインページ
プラグインのホーム ページ 

 いつも通りインストールするだけでOK。
特に設定はなさそうです。

あとはテンプレートにフィードを出力するタグを追加して完了。RSS2とAtomのフィードを購読できるようにしました。ソースはこんな感じ。

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="整体院fRee RSSフィード">
<link rel="alternate" type="application/atom+xml" href="<?php bloginfo('atom_url'); ?>" title="整体院fRee Atomフィード" /> 

タグ：フィード プラグイン wordpress