アメブロカスタマイズ大全集 -8ページ目

アメブロカスタマイズ大全集

CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。

WordPressテーマの制作を業者に依頼した場合、
デザイン込みだと規模にもよりますが大体数十万円くらいは掛かります。

一方、有料で販売されているWordPressテーマを見ると
数千円~数万円くらいで売られているものも多いです。

なぜこんなにも金額の差があるのか?

それは、
「既製品」と「オーダーメイド」の違いです。

Webサイトの基本的な作られ方

そもそもWebサイトの制作工程は
だいたい以下のような流れになっています。

1)ヒアリング
2)サイト設計
3)デザインラフ作成
4)HTMLコーディング

まずWebサイトとしてどんなページが必要か、
目的やターゲットやコンバージョン(成約)目標は何か、を確認して
全体の設計と各ページのデザインを確認した後、
デザインをHTML化してブラウザ上で閲覧出来る形にします。

WordPressテーマ化する、という事

で、通常のWebサイトならここで終わりですが
この場合納品後の修正はその都度業者に依頼しなければいけません。

さらに、ブログ記事や活動履歴のように
追加型のコンテンツがある場合は運用し辛い。

なのでWordPress化する事により、
サイト運用者が自分で自由に修正&追加できるようにします。

だから、WordPressテーマ制作の場合は
上記過程にプラスして、更に以下の工程が発生します。

5)WordPressテーマ化
6)WordPress設置

よって、通常のWebサイトを作る以上に
作業の手間が発生するため、コストも掛かるわけです。

WordPressテーマはデザインやコーディングの「パッケージ」

WordPressテーマは
上記でいう3)4)あたりを汎用化させたものです。

服の「既製品」と「オーダーメイド」に例えると
ちょっと分かりやすくなるかもしれません。

既存のWordPressテーマ(既製品)を色々見て、
自分のイメージに近いものがあればそのまま使う。
(もしくは少しカスタマイズする)

まったくゼロからこだわりたい、
テーマには無いけれど参考にしたいWebサイトがある、
といった場合はオーダーメイドで制作依頼する。

・・こんな、感じです。

予算が限られており、
様々な固有の成約が問題無いのであれば、
既存のWordPressテーマを有効に使う事で
低予算でも使い勝手のよいWebサイトを手に入れる事ができます。
ヘッダー画像を設置したいけど
そもそも自分で画像を作るスキルが無いよ!!(泣)
・・という方のために、CSSコピペだけで可能なやり方をご紹介します。

完成イメージは下記画像のような感じ。
背景が幅いっぱいに塗りつぶされて、中央にタイトル&解説が表示されます。

CSSで書いているので、
配色や文字の大きさ等もCSSを書き換えるだけでOK。
結構お手軽に、カスタマイズ可能です。

手順

CSSコードを貼り付ける

「デザインの変更」画面から、以下のCSSを貼り付けます。
.skinHeaderFrame {
  background: rgba(52, 125, 219, 1);
  box-shadow: 0px 0px 2px rgba(52, 125, 219, 0.5);
}
.skinBlogHeadingGroupArea {
  padding: 20px 0;
  text-align: center;
}


.skinTitleArea {
  height: 64px;
}
.skinTitleArea .skinTitle {
  font-size: 4.0rem;
  font-weight: bold;
  color: #ffffff;
}
.skinDescriptionArea .skinDescription {
  font-size: 1.2rem;
  color: #ffffff;
}


.skinContentsFrame {
  margin-top: 20px;
}
.skinFrame {
  padding-top: 0;
}
背景色は「background: rgba(52, 125, 219, 1)」という部分で
設定してあるので、ココの値(RGB)を変えればOKです。
文字の大きさ等は、
「font-size: ●●rem;」の部分を変えてみて下さい。
以上の方法なら、画像を作れなくても
標準状態よりはインパクトあるヘッダーになります。お試し下さい。

「幅100%の場合」「背景画像のみ」「CSSだけで作る」など
他にもヘッダー画像の設置方法は色んなパターンがあるので、
別記事でも色々紹介していきますねー。

「ワードプレスは無料で使えます!」
こんな話を聞いて使い始めた方も居ると思います。

確かにWordPress自体は、無料です。
「オープンソース」という概念で公開されており、
多くの技術者に支えられて日々グレードアップしています。

WordPress公式サイト
http://ja.wordpress.org/

・・で、上記サイトから
無料ダウンロードできるファイル一式を
正しく設置すればWordPressは使えるようになるのですが・・

そもそも、
それを「設置する場所」を借りるのに
多少のお金が掛かります。

安い所であれば、だいたい年間で
5,000円~10,000円程度で借りる事ができます。

ロリポップ
http://lolipop.jp/

XServer
http://www.xserver.ne.jp/

他にも無料で使えるサーバーや海外の格安サーバー等もあるのですが、
ビジネスで初めて使い始める場合は辞めておいた方が良いです。
(保守やセキュリティ、困った時の情報源などを考えて)

なので、
もしWordPressでブログやWebサイトを運営したいなら
まずレンタルサーバーを借りる!というのが大前提になります。

レンタルサーバーがあると、
自分の読者やファンに渡すファイルを置いたり
各種システム(会員サイト、ステップメール、決済システム・・)などを
設置する事もできるので、何かと便利です。

Webを活用してビジネス展開していくなら、
1つ借りてみて色々試してみると良いですよー。
通常のWebサイトだけでなく、
最近アメブロでもよく見かけますね。

Facebookページのタイトルと「いいね!」ボタンがあって
その下に「いいね!」した人の顔写真が表示される、こんなの。

『Like Box』という名称らしいですね。



今日はこの『Like Box』を設置する方法、見て行きましょー。



手順


まずはFacebook側でコードを取得

Like Box のコードを自動生成してくれるページに移動し、
あなたの管理しているFacebookページのURLなどを設定して
最終的に生成されるHTMLコードを手に入れます。


アメブロのフリープラグインに貼り付ける

CSSでないコードは、
基本的に「フリープラグイン」というものを使って設置します。

マイページの「設定・管理」->「プラグインの追加」と進み、
先ほど取得したFacebookのコードを貼り付けます。




これでOKです。

・・あ、あとマイページの「配置設定」から
「フリープラグイン」をちゃんと配置するのを、忘れずに。

WordPressには「テーマ」と呼ばれる存在があり、
これがWordPressを使う大きな魅力の1つになってます。

WordPressのテーマは、
アメブロでいう「デザインの変更」に似ています。

デザインを変更すれば、
記事の内容などはそのままで見た目を自由に変更できる。

ただWordPressテーマが
アメブロのそれよりスゴイ点が、いくつかあります。

デザインだけでなく、機能や管理画面もカスタマイズできる

アメブロのデザインは見た目しか変えられませんが、
WordPressテーマは、Webサイトの「機能」や管理画面の内容まで変えられます。

機能というのは、例えば・・

・ヘッダー画像をボタン1つで自由に差し替えられる
・広告を表示させるエリアを作る
・記事の一覧ページをキレイに表示する(続きを読む、とか)
・各記事にアイキャッチ画像を設定可能にする

などなど。

また、全体のレイアウトも
Web上で表現できる限り何でもOK。

よくあるブログのように
「左に記事、右にメニュー」というレイアウトでも良いし、
他にも下のように様々なレイアウトのテーマが作成可能です。


プログラミングスキルがあれば誰でも自由に作って公開できる

さらにWordPressは
オープンソースなコミュニティで運営されているので、
テーマの「規格」が公開されています。

つまり、この「規格」に沿って作れば
誰のどのWordPressでも使えるテーマを作って自由に公開できます。
(テーマを有料で販売する事も可能)

この仕組みがあるおかげで、
世界中のWordPress技術者やデザイナーが
様々なデザイン&機能のWordPressテーマを公開してくれています。

例えば公式のテーマだけでも、
以下のページに大量にあるので好きなものを選ぶ事ができます。

http://wordpress.org/themes/

こうした既存のWordPressテーマから
自分のイメージに合いそうなものを選んで、
自分で設置したり制作依頼したりする事ができるのも、
WordPressの大きな魅力です。

ホームページ制作業者に依頼して
まったくのゼロからデザインして作ってもらうと
普通に数十万とか掛かってしまうので(笑)

予算や今の状況に合わせて、
どんな選択肢があるか知っておくと
できる事の幅も広がってくるかと思いますー。