プラグインでファビコンを設置

ファビコンを設置する

ファビコンとは、ブラウザに表示されるアイコンの事です。
画像を使う事もできますし、用意したアイコンを表示させることも可能です。

1.Favicon Rotatorをインストール

[プラグイン] ⇒ [新規追加] から 『Favicon Rotator 』を検索します。
Favicon Rotator が見つかったら、インストール、有効化してください。

2.設定

[外観] ⇒ [Favicon] から Browser Iconの『Add Icon』をクリックします。



アップロード後、『変更を保存』でファビコンの設置が完了です。

ファビコン画像は 16px×16pxに縮小されます。

Touch Iconは、iphoneやipadで表示されるアイコンになります

TwentyElevenのヘッダーを、スライド画像にする

WordPress3.2からデフォルトテーマとなった『TwentyEleven』で、プラグインを使うと、ヘッダーをスライド画像にする事ができます。

ヘッダーをスライド画像に

1.プラグインで『Header Image Slider』を追加

[プラグイン] ⇒ [新規追加] で、『Header Image Slider』を検索します

見つかったら、インストール、有効化します。

2.画像を複数アップロード

[外観] ⇒ [ヘッダー] で画像を複数アップロードします。

ヘッダー画像を複数枚アップロードします。

3.スライドの設定

「Slider」にチェックを入れ、「Setting」をクリックします。

Stttingのウィンドウで、「Auto Insertion Slider?」にチェックを入れ、「Navigation Controls position」を『0』にします。

「Save Setting」をクリックします。

Settingのウィンドウを閉じたら、『変更を保存』をクリックします。
これでヘッダー画像がスライドになります。


※TwentyElevenは、画面の大きさに応じて幅が変化するレスポンシブデザインですが、ヘッダーをスライドにするとヘッダーの大きさが固定されてしまいますので注意してください。

FacebookページをWordPressで作成、更新

WebDesigning Vol128に、FacebookページをWordPressで作るプラグインが紹介されています。
実際に試してみましたので、こちらでも紹介します。

Facebook Tab ManagerでFacebookページを作る

1.Facebook Tab Managerをインストール

管理画面の [プラグイン] ⇒ [新規追加] からFacebook Tab Managerを検索します


見つかったら、インストールします。


インストール後、有効化します。

有効化すると、管理画面のメニューに「Facebook Tabs」という項目が追加されます。

2.Facebookページになるページを作る

[Facebook Tabs] ⇒ [新規追加] から、投稿や固定ページと同様に作っていきます。


「公開」をクリックすると、投稿画面の下に「To Install This as a Facebook Tab」という項目が出てきます。


「Facebook Developers」をクリックします

3.Facebookのアプリ設定

facebook DEVELOPERSページに切り替わりますので、「新しいアプリケーションを作成」をクリックします


アプリケーションの名前をつけ、画像認証を入力します。

[アプリ⇒アプリ名⇒基本設定] で App IDが表示されるので、コピーします。


WordPressに戻って、投稿画面下の項目の4でコピーしたApp IDを入力し、「Save」をクリックします。


「Facebook Integration Tab」に表示される Tab URLと、Secure Tab URLを、facebook DEVELOPERSページの基本設定に入力します

↑ のURLをコピーし、↓ に貼付け

facebook DEVELOPERSページ側の基本設定で入力

※共有SSLの場合、Secure Page Tab URLに入力するのは、「Facebook Integration Tab」で表示されるURLではなく、共有SSLのURLのものに変えてください。共有SSLのURLは、レンタルサーバーで確認してください。

URLを入力したら、「変更を保存」をクリックします。

4.ページタブを追加

WordPress側に戻り、投稿画面下の項目の5にある「Add to Page」をクリックします。


facebookに切り替わり、ページタブを追加の画面になります。

反映させたいFacebookページを選択し、「ページタブを追加」をクリックします。

これで設定が完了です。

実際にfacebookページを見てみると、このようにWordPressで作ったページが表示されています。


WordPress側から内容を更新することができます。

年間かかるサーバー代とドメイン代

内藤です。

ホームページ導入サポートで、事前に良くいただくご質問があります。

●サーバーやドメイン代はいくらかかりますか?

サーバーやドメインの種類によっても異なりますが、お手軽なものを紹介します。

さくらインターネット スタンダードプラン

◆サーバー
月額:500円
初期費用:1000円
年一括支払い場合:5000円

◆ドメイン .comの場合
年間1800円

トータル約7000円~9000円ですね。

ロリポップ ロリポプラン

◆サーバー
月額:315円
初期費用:1575円
年間契約の場合:4725円

◆ドメイン(ムームードメイン 系列サービス) .comの場合
年間:950円

年6000円弱になります。

ホームページを設置できるだけでなく、メールアドレスも作ることが出来ます。
今回は2つだけでしたが他にもサーバーは沢山あります。

実は、アメブロの広告をはずすよりも安かったりします^^;

参考にしてみてくださいね。

子テーマの準備


WordPressには、たくさんのテーマ(デザインテンプレート)があります。

このサイトは、WordPress3.2からデフォルトテーマとなった「Twenty Eleven」の子テーマで作っています。
子テーマとは、特定のテーマをベースとして作るテーマの事です。

「TwentyEleven」を親テーマとした場合、TwentyElevenの機能を活かしつつ、子テーマで自分にあったサイトに編集出来るということです。

TwentyElevenの特徴

  • パソコンやスマートフォン、携帯、ipadなどのタブレット端末、それぞれに表示対応。※携帯はプラグイン対応
  • 管理画面からヘッダー画像や背景画像も設定できる
  • サイドバーを左に配置、右に配置、サイドバーなしなどの、カラムレイアウトも管理画面から出来る
  • ヘッダー下のメニューバーも簡単に設定できる

他にもいろいろありますが、これだけでも「自分で作る」方にとっては便利なテーマです。

「TwentyEleven」のファイルを直接編集してカスタマイズしてしまうと、バージョンアップした際に上書きされてしまいます。

そこで「TwentyEleven」をベースとした、「子テーマ」を別で作り、この「子テーマ」を編集するのが便利です。
子テーマならば、バージョンアップの際にも上書きされることはありません。

子テーマの準備

子テーマは、style.cssだけでも作ることができます。
※style.cssは、見栄えやレイアウトを指定するファイルです。

子テーマとなるフォルダを作り、『style.css』のファイルを作ります。
子テーマの『style.css』の先頭にこちらを記入し、続けてCSSのコードを書いていきます。

@charset"utf-8";
/*
Theme Name:子テーマ名
Author:作成者
Description:Twenty Eleven子テーマ
Template:twentyeleven
*/
@import url("../twentyeleven/style.css");

※@import url(“../twentyeleven/style.css”);で、まずは親の「Twenty Eleven」のstyle.cssを読み込みます。『子テーマ名』や『作成者』は変更します。

これで親となる『Twenty Eleven』のstyle.cssは活かしつつ、子テーマで追加したものを上書きする形で、カスタマイズしていくことができます

後は、 wp-content/theme/ にフォルダごとアップロードし、テーマ選択すればOKです。

もしくは、子テーマのフォルダをZIP圧縮し、管理画面の[外観]⇒[テーマ]、テーマのインストールでアップロードすることもできます。