WordPressテンプレート

Filed under: Wordpressを使ってみよう,インフォメーション — @ 2010年8月24日10:43 AM

ホームページテンプレート/mono-a-1-1ホームページの運営において手間のかかるのがその更新作業です。ホームページ作成ソフトで編集してFTPソフトでアップロード…ちょっとした更新ならまだしも、ページを追加したりすればそのほかのページのメニューの部分も書き換えなければならず、たった1ページ追加しただけなのに20ページにもわたってファイルを編集するなんてことはよくあることです。面倒だからと言って、だんだん更新が滞りだし、ついにはほったらかし…なんてサイトもよく見かけます。

そんなときに便利なのがCMS(コンテンツマネジメントシステム)。ほとんどの作業はブラウザ上で行ないます。ページを追加しても自動的にメニューに追加されていきます。インターネットにつながる環境であれば、管理画面にアクセスするIDとパスワードさえあればどこからでも更新作業ができます。高額なホームページ作成ソフトも必要ありません。

CMS(コンテンツマネジメントシステム)には様々なものがありますが、世界的にもユーザー数の多いWordpress(ワードプレス)がオススメです。Wordpressはサーバーにインストールして使うプログラムです。何だか難しそうに感じるかもしれませんが、これまでホームページの作成や運営を自分でやっていた方、FTPソフトも使ったことある方にとっては何も難しいことはありません。

また、ホームページを作成したり、運営したりしたことはないけどブログのサービスは使ったことがある…という方も大丈夫でしょう。なぜならいわゆるブログと呼ばれているものもCMSのひとつだからです。

WordPressを使ってみようと思った方…まずはレンタルサーバーにインストールしてみましょう。インストールさえできればテンプレートの適用はマニュアルどおりに進めればそれほど難しいものではありません。Wordpressを使ってみたことのない方、まずは「WordPressを使ってみよう」をよく読んで、試してみましょう。

WordPressを使うには無料のサーバーなどでは難しいでしょう。月々数百円のサーバーでもよいですからレンタルサーバーを借りましょう。Wordpressをインストールすることができるレンタルサーバーはたいていそのホームページに「Wordpressが使えますよ」とアピールしています。

WordPressのテンプレートはどんなの?

さて、こちらで販売するWordpressテンプレートは
HTMLテンプレートmonoシリーズと同じデザインです。
またデモサイトを用意しました。真ん中あたりのドロップダウンメニューで、デザインの変更が可能です。

期間限定のサポート特典付き、先行発売!!

今回、Wordpressテンプレートの販売開始にあたり、先着30名様もしくは2010年9月30日の期間限定で通常有料の30日間メールサポートを無料でサービスいたします。サポートはテンプレート適用に関することに限らせていただきます。Wordpressの使い方や、各種プラグインの使い方などはWordpressのフォーラムなどをご活用下さい。また、プラグイン適用などによるデザインの修正等は別途有料にて承ります。

クレジットカードでのお支払いの場合は

クレジットカード払いでWordpressテンプレートをご購入の方は、ご希望のテンプレートを選択して「今すぐ購入」をクリックしてください。

mono-aタイプ : 9,800円
mono-bタイプ : 9,800円
mono-cタイプ : 9,800円

銀行振り込みでテンプレートをご購入される方は

銀行振り込みにてWordpressテンプレートをご注文の方は以下のフォームにご記入の上、ご希望のテンプレートを選択し、「注文」ボタンをクリックしてください。

会社名

お名前 (必須)

メールアドレス (必須)

ご住所 (必須)

ご購入する商品、いずれか選択してください。
mono-Aタイプ : 9,800円
mono-Bタイプ : 9,800円
mono-Cタイプ : 9,800円

WordPress画像変更中

Filed under: インフォメーション — @ 2010年8月19日11:58 AM

このサイトのコンテンツ「WordPressを使ってみよう」で使用している画像を変更作業中です。Wordpressをダウンロードしインストールしたときのデフォルトのデザインや管理画面が変更されているためです。

作業中はこれまでのWordpress2.9のときのスクリーンショットとWordpress3.0のものが混ざっています。管理画面のレイアウト自体はそれほど変わっていませんので、戸惑うこともないと思います。

最新のWordpress のデフォルトのデザインはこんな感じです。

トップページ

ちょっと豪華な感じのテンプレート

Filed under: オリジナルカラー制作例 — @ 2010年5月27日4:50 PM

オリジナルカラーHTMLテンプレート「高級感のあるテンプレートに」というご要望でした。お客様からこんなサイトにしたいという具体的な色調をご提案いただきましたので、お客様も納得のいくテンプレートに仕上がりました。

テンプレートの元はmono-Bタイプです。

ターゲットは女性アスリートで落ち着いた雰囲気のテンプレートとなりました。

投稿やページに画像を貼り付ける(2)

Filed under: Wordpressを使ってみよう — @ 2010年4月9日5:12 PM

さて、それでは画像を貼り付けて見ましょう。「投稿」の場合も「ページ」の場合も貼り付け方は同じです。今回は例として新しく作成する「ページ」の記事の中にパソコンにある写真を貼り付ける手順です。まずダッシュボードにログインし「ページ」→「新規追加」をクリックします。

タイトル欄に「製品情報2」と入力します。そして取りあえず記事入力画面を「ビジュアル」にしておきましょう。そして記事入力欄の上の「アップロード/挿入」の横のマークをクリックします。

アップロード/挿入の横のマークをクリック

すると、以下のような画面になります。

ファイルを選択をクリック

ここで「ファイルを選択」をクリックするとあなたのパソコンを参照します。掲載する写真を選択するとアップロードが始まります。アップロードが完了すると以下のような画面になります。ちなみに今回アップロードした画像の横幅は500ピクセルです。

アップロード完了

ここでいくつか入力項目があります。「画像のタイトル」、「代替テキスト」必要があれば「キャプション」や「説明」も入力します。今回は「画像のタイトル」、「代替テキスト」、「キャプション」にそれぞれ「タイマー」と入力しました。

そして「リンク URL」です。この画像にリンクを作成するかどうかです。「必要ない」か、「この画像(ファイルのURL)にリンクする」か、「この記事にリンクする」、「どこか別のアドレスにリンクする」かを選択します。今回は「この画像(ファイルのURL)にリンクをする」ことにします。

「配置は」画像をどちらに寄せるかです。今回は右側にしました。

「サイズ」一番小さな「サムネイル」こうすると貼り付けた画像(サムネイル)はアップロードした画像「幅が500ピクセル」にリンクしていますので、サムネイルをクリックすると拡大して画像を見ることができるようになるのです。「投稿に挿入」をクリックします。

文章も入力しておきましょう。今回入力したのは次のとおり「シンプルなタイマーです。24時間までセットすることが出来ます。もちろん時計の機能もついていますので机の片隅においておいたり、キッチンでの利用にも便利です。背面はマグネットになっていますので冷蔵庫やオフィスデスクにも貼り付けておくことが出来ます。」

イメージを貼り付けて公開

「親ページ」を「製品情報」にして「公開」をクリックします。

さてその記事を確認してみましょう。以下のようになっているでしょうか?

記事を確認

小さいサムネイル画像をクリックしてみましょう。大きく表示されますね。

投稿やページに画像を貼り付ける(1)

Filed under: Wordpressを使ってみよう — @ 10:48 AM

WordPressでは「投稿」や「ページ」の記事にあなたのパソコンにある画像や、すでにサーバーにアップロードされている画像を貼り付けることが出来ます。

画像を貼り付ける作業をする前にひとつ確認をしておきましょう。その画像のサイズは適切でしょうか?デジカメで撮影した写真はたいていの場合ものすごく大きな写真です。横幅が3000ピクセル以上ある場合も良くあります。

ホームページのページの幅はたいていの場合800から1000ピクセル程度です。そこに貼り付ける写真は幅が何ピクセルが適切か良く考えましょう。少なくともホームページの幅より大きな写真は必要ありませんね。

ホームページ上で文章の右や左に配置されている画像の幅はたいてい100から400ピクセルくらいでしょう。今あなたのパソコンにある写真のサイズが大きなものであればそれをあらかじめ適切なサイズに変更しておくと良いでしょう。

WordPressでは大きな画像を縮小して表示したり、Wordpress上でサイズを変更することも可能ですが、サーバーのスペースを無駄に使ったり、画像のアップロードに無駄に時間がかかったりします。ですから、あなたのパソコンにあるうちにその画像のサイズはホームページ上で表示したいサイズに変更しておくのが賢明でしょう。

たいていの場合、デジカメを購入した際についている付属ソフトの中にカンタンな画像編集ソフトがついていると思います。それらを使って画像の編集を行いましょう。

画像サイズは適切に

※この上の画像は3000ピクセルの幅じゃありません。わかりやすくするためにかなり小さくしています。今ごらんのこのページの本文が書かれている背景が白い部分…ここの幅が635ピクセルです。

ビジュアルとHTML

Filed under: Wordpressを使ってみよう — @ 10:08 AM

投稿、ページいずれも記事の追加や編集を行う画面において、その内容を書くところの上に「ビジュアル」と「HTML」のタブがあります。

ビジュアルとHTML

これは内容を編集したり追加したりするときのその入力欄の表示形態を選択するものです。

「ビジュアル」その名のとおり概ね見た目のとおりに編集でき、HTMLを記述することが出来ません。「HTML」では見た目はすべてテキストになってしまいますが、HTMLのタグを直接入力することが出来ます。

ただ文章を書いていくだけなら、どちらでもかまいません。お好みで使うと良いでしょう。HTMLに慣れていない人は「ビジュアル」ほうがとっつきやすいかもしれませんね。

しかし、アフィリエイトなど、どこかのHTMLソースを貼り付ける必要があったりした場合には「HTML」での編集が必要ですね。

このタブは記事の編集途中でも切り替えられますので、そのつど自分にあった方で入力、編集すると良いでしょう。

親ページ、子ページ

Filed under: Wordpressを使ってみよう — @ 9:28 AM

WordPressのページの記事には階層を持たせることが出来ます。親ページ、子ページの関係を作ることが出来ます。

では先ほどの「製品情報」のページを親ページとする、「製品情報1」という子ページを作成してみましょう。ダッシュボードにログインし、左のメニューの「ページ」の下の「新規追加」をクリックします。

ページを新規追加

「新規ページ」画面でタイトルに「製品情報1」と入力し、記事内容に「これは製品情報1についてのページです。製品1はこれからの季節とても便利な道具です。お近くのショールームでご覧ください。試用体験も出来ます。」と書きました。もちろんタイトルや文章はあなたのサイトにあったもので…

ここがポイントです…画面右側の「属性」のところ、「メインページ(親なし)」のところをクリックすると「製品情報」が表示されますので「製品情報」を選択します。

製品情報を選択

そして「公開」をクリックします。それではトップページを見てみましょう。ヘッダーメニュー部分を注意深く見てみましょう。

トップページを確認

「製品情報」の下に「製品情報1」が表示されています。このようにページの記事では階層を持たせることが出来ます。

ページの記事を編集

Filed under: Wordpressを使ってみよう — @ 2010年4月8日2:16 PM

続いて、Wordpressのページの記事を編集してみましょう。ダッシュボードにログインし左のメニューの「ページ」の横の「▼」をクリックし、「編集」をクリックします。

ページの編集をクリック

すると以下のような画面になります。

ページの編集

そこで「紹介」という記事の下の「編集」をクリックします。

編集をクリック

すると以下のような画面になります。

ページ編集画面

ここでタイトルを「製品情報」とし、記事のところに「私たちは常にお客様のことを第一に考え、より使いやすく、より安全な製品作りを心がけています。では、私たちが自信を持っておすすめする製品をご紹介しましょう。」と入力しました。もちろんここはあなたのサイトにあった内容を書きましょう。
入力が終わったら、「更新」をクリックします。

そしてトップページに戻って確認してみましょう。以下のように「製品情報」というリンクが出来ています。

「製品情報」というリンクが出来ました

このページの記事はトップページには記事が表示されません。トップページに表示されるのは「投稿」で書いた記事だけです。このように「ページ」で書いた記事は時系列とは関係なく作成できるページです。ですからメニューのところにリンクが作成されるだけなのです。そしてこの「ページ」には階層をつけることが出来ます。親ページ、子ページという関係です。

「投稿」のときの「親カテゴリー、子カテゴリー」と混同しないでくださいね。

投稿記事をカテゴリー分けする

Filed under: Wordpressを使ってみよう — @ 2010年4月6日5:06 AM

さて、ここでいったんトップページに戻ってみましょう。ダッシュボードの左上の「サイトのタイトル」かその横の「サイトを表示」をクリックします。

はて・・・

何も変わりませんね。せっかく作ったカテゴリーはどこへ行ってしまったのでしょう???

大丈夫です。Wordpressではカテゴリーを作成してもその中に投稿記事が無ければメニュー部分には表示されないのです。ではもう一度ダッシュボードに戻ってください。「投稿」の下の「投稿」をクリックします。
そして、記事のタイトルの下に表示される編集をクリックします。

投稿記事の編集をクリック

すると、投稿記事の編集画面に移ります。その右側に「カテゴリー」を選択する部分がありますので現在チェックの入っている「未分類」のチェックをはずし、適切なカテゴリーにチェックを入れます。ここでは「最新情報」にチェックを入れました。

カテゴリーを変更

そして「更新」をクリックします。

同様に他の記事のカテゴリーも変更しましょう。ここでは「ようこそ」の記事も「最新情報」のカテゴリーに変更しました。では、もういちどトップページに戻ってみましょう。

どこか変わりましたか?

トップページの表示

右のメニューのカテゴリー名が「未分類」から「最新情報」に変わっていますね。

このカテゴリーの変更は「投稿」の下の「編集」をクリックした画面の各投稿記事タイトルの下の「クイック編集」でも出来ます。

クイック編集

クイック編集画面

試してみましょう。

親カテゴリー、子カテゴリー

Filed under: Wordpressを使ってみよう — @ 4:24 AM

WordPressではカテゴリーに階層構造を持たせることが出来ます。例をあげてみましょう。

前の解説で「最新情報」というカテゴリーと「スタッフブログ」というカテゴリーを作成しましたね。ではここでスタッフブログを書くAさんとBさんがいてそれぞれカテゴリーに分けるとしましょう。つまり「スタッフブログ」のカテゴリーの中に「スタッフAのブログ」というカテゴリーと「スタッフBのブログ」というカテゴリーを作成します。

先ほどと同じように「投稿」の下の「カテゴリー」をクリックします。

カテゴリー名に「スタッフAのブログ」、カテゴリースラッグに「staff-a」と入力し親のところで「スタッフブログ」を選択します。

スタッフブログを選択

そして必要であれば「説明」に入力し「新規カテゴリーを追加」をクリックします。すると以下のように「スタッフブログ」の下に「 スタッフAのブログ」という子カテゴリーが追加されます。

子カテゴリーを追加

同様にして「スタッフBのブログ」というカテゴリーをカテゴリースラッグ「staff-b」で親を「スタッフブログ」で作成します。すると以下のようになります。

もうひとつ子カテゴリーを追加

なんとなく階層をもっているようですね。

Page 1 of 512345