htmlでホームページを作ってみよう

こんにちは。Isodaです。
最近はウォーキングを夕方するのが日課になってきました。
前は夜だったんですけど、日が暮れるのが早くなってきたので、
寒くなる前にやって、夜はPC作業にあてています。

前よりもパソコン時間が長く取れるようになったので、結構なペースでデスクワークを進められるようになりました。これは逆にラッキーでしたね。
腹筋もやんなきゃと思いつつ、ついサボり気味になってしまう今日この頃です。

さて表題の通り、テーマは「htmlでホームページを作ってみよう」です。

htmlとは何ぞやって話しですが、皆さんが今見ているホームページは全てこのhtmlってやつで書かれています。
タグで囲まれた英語っぽいやつで、わかる人にはわかる、わからん人にはさっぱりわからんアレです。

まず今回は基本中の基本「htmlで文字を書いてみよう」てのをやってみましょう。

まず用意するのはパソコン、テキストエディタ、ブラウザの3種。
パソコンは説明要らず。
テキストエディタってのは、文字をテキストのみで表すメモ帳みたいなものです。

windowsなら最初から「メモ帳」が入っていますし、有名どころでは「terapad」っていうテキストエディタもあります。
ちょこっと試す程度なら「メモ帳」でオーケー。
真剣にやりたいなら「terapad」をダウンロードしてインストールしてください。

ブラウザってのは、今このサイトを見ているのに使っているソフトのこと。
windowsならInternet Explorerとか、Firefox、 Chromeとかがそうです。
MacならSafariとかいろいろありますね。
スマホでもFirefox、 Chromeとか多いです。
これらを総称してブラウザと言います。

この3種の道具があればホームページは作成できます。
(ホームページ作成ソフトについては、後ほど解説しましょう)

では早速、このテキストエディタに下記のタグを書いてみましょう。
まずは超シンプルに、たったの5行です。

書き終わったら「test.html」と名前を付けて、
デスクトップにでも保存してください。

で、保存した「test.html」をクリックして、
そのままブラウザの上で離してみましょう。
(そのままダブルクリックして可の場合あり)

するとあら不思議。
今書いた文字「本日は晴れです。」がブラウザ上に表示されます。

どうでしょう。
ちょっと文字を追加してみましょう。

で、そのまま上書き保存。
今度はブラウザの更新ボタンをクリックしてみましょう。
(Firefoxの場合は下記の赤丸)
文字が追加されましたか。

文字を改行してみましょう。
改行する所に

を入れます。
(他にもいろんな方法がありますが、今回はこれでいきます)

ブラウザの更新ボタンをクリック。

どうですか。改行されましたか。
意外と簡単だったのではないでしょうか。

htmlはタグの使い方さえわかれば、そんなに難しいものではないんです。
要はやる気の問題ですね。
「元気があれば何でもできる」っていう名言がありますが、
「やる気があれば何でもできる」って名言?も付け加えておきましょう。

今回は短めですが、ここまでにしときます。
(チェックしてないので、誤字脱字があったら失礼!)

まぐまぐ読者登録ページ

ここのブログをメルマガ発行サイトの「まぐまぐ」より、
ほぼ月刊で発行しています。

「まぐまぐ」での発行タイトル
「ホームページ制作のここだけの話」

読者登録をして頂ければ、自動でお手元に届きます。
ご希望の方は下記よりご登録ください。

ホームページ制作はHTMLかwordpressかのメリット、デメリット

Design Office MacsのトップへGO.

こんにちはIsodaです。

昨日は台風が関東を横断したようで、雨風がすごかったですね。
瓦が飛ぶんじゃないかと思って、ヒヤヒヤもんでした。

台風一過ですっきりと晴れるかと思いきや、晴れるのは晴れても、なんとなくパッとしないというか。

今日も朝から曇り空で、太陽の光で洗濯乾かしたいなあと思う今日この頃です。

さて、今回のテーマは表題の通り。
ホームページを制作する際にHTMLでいくか、wordpressを使うか、ちょっと考えますよね。

サイト構成とかボリュームとか、納期とか、いろんな情勢で変わってくるとは思いますが、ここで一考してみましょう。

HTMLはホームページ制作の基本中の基本。
ちょっと前はHTMLタグを使ってサイトを作る以外の方法はありませんでした。
なので、昔からサイト制作している人はHTMLを使うのになんの抵抗もありません。

一方、今流行りのwordpress。phpを使ってサイト構成しているのですが、そういった知識を制作側に一切求めていません。
HTMLのタグを知らなくてもサイト構築ができてしまう。
要は「簡単」なんですね。

wordpress導入の時にインストールの手間がかかりますが、
一度入れてしまえば、更新もブラウザでできるし楽です。

ではwordpressのメリットをあげてみましょう。

●タグなどの知識が要らないので、サイト構築が簡単。

サイトを作るにあたって、タグを全く意識しないで作れます。
初心者でもマニュアル通りに作っていけば、きれいなサイトができてしまう。
これはCMS(コンテンツ マネジメント システム)の一番の利点でしょう。

●プラグインが豊富なので、やりたい仕様を構築しやすい。

こういった事がしたいなとか、作っているうちにやりたい仕様が出てくるのですが、検索するとプラグインが結構出てくるので、プログラムを組まなくても簡単に導入できてしまう。
その分、時間の節約になる。(しかし、プロフェッショナルとしての腕は上がらない)

●ブログはお任せ。

言わずもがな。もともとブログを簡単に作れるように始まったプロジェクトなので、こいつは独壇場。

●グローバルメニューなどを増やす時に、1箇所増やせば全てのページに反映される。

個人的にはこれと次の件が一番の導入メリットだ。
長くサイトを運営しているとメニューの追加は避けられないのだが、これが簡単に全ページに反映できるので、思いっきり楽。
これをHTMLでやろうとするとプログラムを組むか、地道に手仕事でやるかしかない。

●スマホやタブレットに対応しているので、それぞれの専用ページを作る必要がない。

これも一番のメリットでしょう。
wordpressで普通にパソコン用のサイトを作れば、スマホ、タブレット対応になる。
今やホームページのアクセスはスマホで見るのが普通でしょう。
で、家に帰ってからパソコンで真剣に見ると。
ホームページのスマホ対応は必須なので、これが簡単にできるのはメリット。

一方、デメリットは。
●wordpress自体がデータベースを利用して作られているので、
ホームページを置く場所が、それらに対応していないと構築できない。

これは一般の人には関係ないですが、
wordpressはデータベースを利用して構築するので、データベースを使えるサーバと契約しないと使えないんです。
で、サーバ代が月々かかります。安いところで月数百円。月数千円のところも結構あります。
なので、wordpressは無料でも、サーバに置くのにコストがかかるので、完全無料というわけにはいかない。
ランニングコストがかかります。

●インストールに若干の知識がいる。

まあ、この位ができないのであれば、HTMLで作りなさいといったところ。
あっ、あくまでも制作サイドの意見で、一般の利用者は関係ないです。

●タグの知識は要らないが、それでもwordpress専用の知識はいる。

タグを全くいじらないで、サイトが完成してしまう。
必要な所を埋めていくだけです(これはメリット)。
しかし、wordpressで構築する知識を別途必要とします。
更新が頻繁に行われているので、絶えず新しい知識を入れていかないといけない。
勉強好きにはメリットにもなる。

●細かい所を手直しする時に、phpの知識がいる。

wordpressがphpを使って構築されているので、
細かいところを直す時にphpの知識が要ります。

プラグインとかぶると動かない時もあるので、
動きのあるサイトを独自で作りたい時はwordpressでは作りずらい。

●将来的に無料である保証はない。

wordpress自体のシステムは今のところ無料ですが、将来的にも無料である保証はありません。
wordpressの更新は頻繁に行われているので、コアチームの人件費やシステム維持費は絶対かかっているはず。
どこまで無料で公開できるかは、wordpressの構築チームの裁量。
OSのLinuxは無料で公開しているが、企業がスポンサードして運営しているので、wordpressもどこかの企業がスポンサーに付かないと、いずれは無償公開に???がつくでしょう。
月々の有料化は避けたいよなあ。

●HTMLで作ったサイトをwordpressに移行する時に面倒

wordpressはphpを使っているので、拡張子がhtmlやhtmでないんですね。
通常のHTMLで作ったサイトは、◯◯◯.htmlとかで作られているので、移行した時に一手間掛けないといけない。
元のページが少なければなんてことないですが、ページ数が多い上にフォルダが別れていたり、子フォルダなどの構成になっていると結構大変。
この作業は手間代が別にかかりますなあ。

では、HTMLのメリットはどうかと。

●自由に設計開発できる。
なんの制約もないです。やるだけやれます。

●昔からある構築法なので、情報やテンプレートが豊富にある。
検索すれば、情報満載。無料テンプレートもある上にビルダーや
dreamweaverなどの制作ソフトにも雛形があるので、すぐにできる。

●なんと言ってもプロとしてサイトを作るのなら、タグの知識は必要。そのための勉強になる。

タグを使えないプロはいないでしょう。なので、タグに触れながらサイト構築をすることで、自分の腕を上げながら制作できる。
まさに職人。

●phpやjavascriptなどのプログラムを組む時に、自由に設計できる。

プログラムを邪魔する言語ではないので、好きなだけ構築できます。
何をしようと自由自在。WEBプログラマーからすれば最高の素材。

●サーバに空きスペースさえあれば置けるので、初期導入が楽。

サーバに空きの容量があればOK。通常使っているプロバイダのサーバにも置けるので、無料でホームページを構築できる。
ただ、プロバイダ契約をしていない人は置くスペースを借りないといけない。
無料スペースもあるが、サイトに広告が入る場合あり。

デメリットは。

●タグの知識が要る。
作る側からすればプロとして当然。
これがわからないのなら…。言わずもがな。

●サーバ関連、FTPなどのアップロード関連、などの知識が多少要る。

パソコン上で作ってもサーバにアップロードしないといけないので、多少のサーバ周りの知識が要る。
これも大したものではないので、デメリットと言うほどのものではないが。

●スマホ対応のページを作るのに専門知識が要る。

今やスマホ対応は必須。ここがHTMLの一番のネック。
専用のページを別に作るか、レスポンシブにするか。
いずれにせよ、知識が要ります。

こんな感じでしょうか。

トータル的に見ると、スマホ対応のサイトを簡単に作りたいのであれば、wordpressの方が楽でしょう。
作る側からすれば、HTMLでもどちらでも作れた方がいいのは言うまでもない。

wordpressの月々のコストが負担にならなければ、wordpressで制作。
一切コストを掛けたくないのなら、HTML&設置は無料スペース&広告入りで作りましょう。

一方、ちゃんとした企業サイトを作るのなら、独自ドメイン(◯◯◯.jpとか◯◯◯.net)は必須なので、月々のランニングコストは多少かかる。
そうなるとHTMLでもwordpressでも、どちらで作るのかは大した問題ではないです。

これから、自社のホームページを作りたい人は、
周りの詳しい人に聞いてから始めてください。
facebookやツイッターやってるから、自サイトは要らないってのは、IT戦略上いけません。
特定のページをいろんな人に見せたいのであれば、SNSだけでは不利です。

今は簡単にホームページを作れる時代なので、自分でとっとと作っちゃいましょう。

で、自分で作るのが面倒な人は、有償で頼んだ方が無難です。
デザインをそんなに凝ったものにしないのなら、フリーランス(個人事業者)ならページ数千円〜1万円ちょっとでも作れる。
制作専門会社なら、ページ2万円〜3、4万円でやってくれるでしょう。
制作費は無料、月々の更新料のみでOKなんて所もありますが、サーバ代とかを別途取られるので、トータル的には高くつきます。

一番安く作りたいのなら、自分で作る。
それが面倒なら、フリーランス(個人事業者)に頼む。
費用を掛けられるのなら、制作専門会社に頼む。
こんな感じで使い分けてください。

ちなみに、フリーランス(個人事業者)と制作専門会社の値段の違いですが、これは単純にコストの違いです。
会社というのは、家賃、人件費、光熱費、電話代などのコストが結構かかってるんですね。税金も法人住民税は赤字でも払わないといけない。
なので、その分の経費が制作代に乗っかってきます。

一方フリーランスの方は自宅で作業している場合が多く、スタッフも自分一人って場合が多いので、コストが会社に比べて安いんですね。なので、制作費も安くつく。

決してサイトの出来栄えの違いではないです。
腕のいいフリーランスはたくさんいるし、制作専門会社のボスだって元々はフリーランス上がりって場合もある。

クライアントが大企業になると個人事業者とは取引しない所が多いので、大企業、資金的に余裕がある中小企業の方は、制作専門会社へ発注。

一方、経費を押さえたい中小企業さん、個人商店、趣味のサイトなど、コストを掛けずに安く作りたいって場合は、フリーランスへ頼むのがベストな選択でしょう。

あっそうそう、ちなみにウチは他社さんと比べて、
比較的安価に構築できます(今のところページ単価5000円〜)。
自分で作るのが面倒な方は、ぜひご相談を!

あと、webデザインを勉強したい方、ウチではスクールもやっているので、ぜひご利用ください。

TD DesignSchool
http://dschool.toukiya.net/

詳しくは「お問い合わせ」からご連絡を!

Design Office MacsのトップへGO.

ホームページの制作はどの方法でいくか

Design Office Macsのサイトはこちら。

こんにちは。Isodaです。
今回はちょいと思考を変えて、テクニック集ではなく、読み物的なものを書いてみたくなりました。
秋なんですかねえ。
なんて言ってるうちに、いってみよう。

さて、ホームページと一口に言っても、今はいろんな制作方法があるんですね。
昔はエディタでタグをひたすら打ち込んで作っていた時代もあったんです。
それが進化して、winだとホームページビルダーとかの制作専門のソフトが出てきた。

今っていうと、代表的なのは以下の方法。
・HTMLとCSSを使って作る(Dreamweaver、ビルダーなど)。
・CMSを使って作る(wordpressとか)。
はたまた、フェイスブックなんかのSNS。
ブログで十分という方もあり。

どの方法で自分のサイトを作るのかはオーナーの自由だが、
商用で使うのなら、上記のHTMLとCSSかwordpressなんかの方法を使うのが無難でしょう。

フェイスブックもブログも表現や宣伝手段にはなるのだが、固定したページを見せるという点では少々弱いですね。
タイムラインでページが流れてしまうので、「企業概要」とか「製品情報」などの特定ページを見せずらい。

もちろんSNSで特定ページを先頭に常に配置っていう手法もあるでしょうけど、少々面倒くさい。

意外と若い人は一つ一つページを読んで、タイムラインで流れた所も探し出しますけど、少々年配の方はそんな面倒なことはしないですね。
なので、熟年層以上を対象としたビジネスだと見てもらえない確率が高くなる。

なので、BtoC(個人を対象としたビジネス)の若年層向けならSNSオンリーでも何とかなるかもです。
(一般の方は購買先の会社情報とかは気にしないので)

一方、BtoBビジネス(法人を対象としたビジネス)は自社サイトがないとまずいでしょう。

今や新規の取引先を調べる時は、まずネットですから、自社サイトが無いと経営大丈夫だろうかと余計な詮索されます。

法人相手のビジネスは、信用度を高める意味でも、他社広告なしの独自ドメイン(◯◯◯.comとか◯◯◯.jpなど)のサイトを持つようにしましょう。

そう考えると、理想は通常のホームページを1つ持つ。
プラスしてブログやSNSを使うという方法が、広告宣伝手法としてネットを活用するのには最適かと思うんですね。

でも、ブログなんかは比較的敷居が低いのだが、ホームページの制作ってのは結構面倒なんですよね。
そう、今は簡単に作れるんだけど、それでもちょいと「面倒」なんです。

なので、その面倒さを他人にしてもらうってのはアリでしょう。
もちろん、そこには有償である場合もあるし、PCの得意な人なら無料で作ってくれる場合もあります。

クオリティの高いサイトとなるとプロにお任せした方が手取り早いけど、個人や趣味のサイトなんかは、手作り感のある俺流のものでもいいんではないかと思う。

要は伝えたい事を伝えたい人に伝わればいい。
ホームページってのは、そんなもんです。

ただ、そこにオシャレ感とか、動きとか、クオリティの高さを要求したい時もある。
あと日々の時間に取られて、なかなか作る時間がない、なんて時もある。
そんな時はさっさとプロにお願いして作ってもらえばいい。

作れば反応はありますよ。世界中の誰かが必ず見てくれる。
作って損をするってことは、まずないです。

あっ、そうそう。ホームページ制作の何が一番手間がかかるかわかりますか?
写真やアイコンなんかの素材作りなんですね。

人は小さい時から文字は書いてきてるので、文章をちょこっと書くのは、そんなに大変ではないです。
もちろん、理路整然とした文章ってのはある程度の文筆力が要ります。

ただそれよりも写真を撮って、加工して、そこに文字を入れたり、対象物を切り取ったりってのが一番大変なんです。
あるいはイラスト画像を作ったりだとか。
難しい作業ではないんだけど、手間がかかる。

なので、プロに頼むと料金が発生しますが、
その大変さを代わりにやってくれる代金だと思えば何てことないです。

写真もスマホで撮ってそのままアップするのはSNSとか趣味ならOK。
でも、プロは一眼レフで撮影してphotoshopで加工して、クオリティを高める。
手間暇かけていいものを作る。そこに少々の料金が発生する。そんな感じです。

サイトの作り方は、お教えしますよー。
あっ、時間があったらのお話ですが…。

追伸: スクールもやってますので、よかったらどうぞ。
TDデザインスクールのサイトはこちら。

お問い合わせページを作ろう

こんにちは。Isodaです。
今日の熊谷は暑いですね。久々の真夏日なんじゃないですか。
車を路上にちょっと停めておくだけで、車内に入ると暑いのなんのって。
エアコンを全開にかけて、窓もフルオープンじゃないと走れません。
今週末もこんな陽気で、お出かけ日和のようです。

さて、今回のお題は「お問い合わせページを作ろう」です。

お問い合わせページってのは、こんな感じのページのことです。

よくありますよね。
このページのメリットは、メールアドレスを掲載しなくていいところ。
それによって、スパムメールのうっとうしさから解放されますね。

使うユーザ側からしても、いちいちメールアドレスをコピーして、メーラーを立ち上げて、ていう手間が省けます。

さあ、いいことずくめのお問い合わせページですが、これを通常のサイトで作ろうとすると結構面倒なんです。

ところが、wordpressだとサクッと作れてしまう。
それにはwordpressのプラグイン機能を使うこと。
こいつを使って、パパッと作っちゃいましょう。

では、管理画面の
「プラグイン」「新規追加」をクリック。

 

「プラグインの検索」のところに、
「Contact Form 7」と入力してください。

で、「今すぐインストール」 「有効化」をクリック。

これで「プラグイン」のページに「Contact Form 7」が追加されましたね。

で、「Contact Form 7」の「設定」をクリック。

すると、こんな画面が出るのですが、まずタイトルを入れましょう。

ここでは「お問い合わせ」と入れておきます。
あとは、デフォルトでメールアドレスやらが入っているので、 このまま右側の「保存」ボタンをクリックしましょう。

すると画面真ん中あたりに、青ラインのショートコードが現れるので、これをコピーします。

 

さて、あとは貼り付けです。
とりあえず、新規でお問い合わせページが欲しいので、
左側の黒タブの中から、
「固定ページ」 「新規追加」をクリック。

タイトルに「お問い合わせ」を入力し、
本文欄に先ほどの「ショートコード」をペーストします。

で、右側にある「公開」ボタンをクリックしてから、
タイトル欄の下にある「パーマリンク」をクリックします。

 

すると、あらお見事。素敵なお問い合わせページが現れます。

右側のサイドメニューが邪魔だったら
「固定ページの属性」「テンプレート」「サイドバーなし」を選択して、
更新ボタンを押してください。

 

こんな感じでサイトいっぱいに広く使えますね。

ここで実際にメール送信ができるかチェックしてみましょう。
空欄にそれぞれ適当に入力して、「送信」ボタンをおします。

下のように、「ありがとうございます。〜」が現れたら成功です。

各自のメールソフトで、メールが届いているか確認しましょう。
メール来ましたか。

届いてない場合は、
「プラグイン」「インストール済みのプラグイン」
「Contact Form 7」「設定」で、
先ほど作った「お問い合わせ」をクリック。

「コンタクトフォームの編集」画面の
「メール」タブをクリック。

「送信先」の所に、あなた宛てのメールアドレスが書いてあるかチェックしましょう。
もし、違うアドレスが書いてあったら、書き直してください。

で、もう一度メール送信のテストをしてみましょう。
今度はバッチリじゃないでしょうか。

ここまで作り終わったら、メニューに追加しておきましょう。
「外観」「メニュー」をクリック。

「固定ページ」  今作った「お問い合わせ」にチェックを入れて、
「メニューに追加」ボタンを押します。

すると「メニュー」にお問い合わせが追加されます。
「メニューを保存」ボタンをクリック。

トップ画面を見てみましょう。

メニューも変わってますね。

こんな感じでお問い合わせページ&新メニューの完成です。
wordpressだとかんたんに作れて便利。
ぜひ皆さんも作ってみてください。

WordPressで複数のサイトを運営するには?

こんにちは、Hokutoです。こちらでは初めて記事を書かせていただきます^^
これまでIT関連の仕事をしていましたが、今回はこちらのブログの執筆にあたり、Wordpressの再研究をすることにしました。

ということで、少し調べてみましたが、奥が深い!こりゃ一気に書き込んでいくのは無理だ。(笑)

少しずつ研究成果を公表していきます。

こちらを見てくださっている方には、Wordpressをいじる中で
「あぁあぁ゛〜わからない」って時、このサイトを見返して、
冷静さを取り戻していただければ嬉しいな、って思います。
前置きが長くなりましたが、いきましょう。
「WordPressで複数のサイトを運営するには?」について。

wordpressでは、マルチサイト機能というものを利用して、
複数のサイトを運営することができます。
前回の記事である程度サイトを形にすることができたと思うので、今度はサイトの充実にシフトしていきましょう。

たとえば、
「関連会社のサイトを立ち上げたい」
「スタッフブログも立ち上げてみたい」
「ECサイトも立ち上げたい」

そんなとき、単にリンクを分けるのではなく、マルチサイト機能を活用すれば、より良いサイト作成が可能になります。
方法は二つ。
① サブディレクトリ方式 と ② サブドメイン方式

サブディレクトリ式
http://www.△△△.com/1
http://www.△△△.com/2
http://www.△△△.com/3
「.com」のスラッシュの後に連ねることができます。
これをサブディレクトリ式サイトと呼びます。

サブドメイン式
http://www.△△△.com/
http://※※※.△△△.com/
http://●●●.△△△.com/
「www」の部分がそれぞれ、「※※※」、「●●●」となります。
これがサブドメイン式サイトとなります。

ーー違いはなんなのか?
サブディレクトリ式は、何パターン設定しても、
同サイト、一つのサイトとみられます。
つまり、作れば作るほど大規模サイトになっていきます。

一方で、サブドメイン式サイトは同じサイトとは見なされず、
それぞれが独立した別のサイトとして認識されます。

<具体例>
それでは、サブディレクトリ式のサイトから具体例をみてみましょう。

http://www.athome.co.jp

http://www.athome.co.jp/vox/

http://www.athome.co.jp/film/

アクセスして閲覧すると一目瞭然。
同一ドメインですが、全く異なるサイトのような見た目です。
このように別サイトのように運営することも可能なのです。

続いて、サブドメイン式の例。

http://www.yahoo.co.jp

http://auctions.yahoo.co.jp

http://weather.yahoo.co.jp/

ここまで大手さんが運営するサイトともなれば、サブドメイン式でも十分検索の上位表示もされるでしょうが、
もし、「会社のHPとスタッフのブログを立ち上げる」程度でお考えであれば、サブディレクトリ式の方をおすすめします。

サイト規模が大きいほうが、検索された際に上位表示されやすいので、せっかく作ったサイトをいろんな方に見ていただける可能性は高まるでしょう。

ということで、次回のテーマは
「サブディレクトリ式でブログを作成する方法」に決定。

近いうちに更新します^^

「サイトのタイトル」と「キャッチフレーズ」を変えてみる

こんにちはIsodaです。
スタッフのnaru君の書いた原稿にアクセスできず、今回はピンチヒッターで登場しました。
今後とも、ちょこちょこ代打で出ようと思っています。

昨日は熊谷も台風の影響を受けましたね。夜は結構、雨風が強かったです。
瓦大丈夫かいなーなんて思いながら床につきましたが、いつのまにか朝を迎えて、台風一過のいいお天気日和になっていました。
いつものことながら、台風が過ぎるとカラッと晴れてそこそこ気持ちいいものですね。
熊谷も久々の30度超えのようです。

さて、wordpressでの制作の方ですが、
いい按配でサイトの方も完成してきたのではないでしょうか。

前回はグルーバルナビゲーションでしたよね。いわゆる上部のメニューバーのことです。
では、今回はサイトのタイトルを変えてみましょう。

えっ、サイトのタイトルを変えていいのかって。
wordpressはインストール前にサイトタイトルを記述してからインストするのですが、意外と真剣に考えてなかったりするんですよね。

で、作っていく過程でいいタイトルが浮かんだりするもんです。
なので、後からサイトタイトルを変えるってのは、結構あるんじゃないでしょうか。

まあ、クライアント様からタイトルを指定されて制作している場合は、勝手には変えられませんが、たまにタイトル変更の通知もくる時があります。
そんな時のために、知っといて損はないです。

まず「管理画面」から「外観」 「ヘッダー」 をクリック。

「カスタマイズ中」の左印「<」をクリックします。

すると「サイト基本情報」が出てきますね。

で、「サイトのタイトル」と「キャッチフレーズ」の両方を変えちゃいましょう。

 

タイトルを「くまがや商店」、
キャッチフレーズはサイトのURL「(仮)http://www.test.comcom」を入れてみましょう。
入れ終わったら、上の「保存して公開」をクリックします。

ついでにその下にある「サイトアイコン」も追加しましょう。
サイトアイコンとはブラウザ上のタブのところのサイト名の先頭に出る小さい画像のことです。
例えば、ヤフーなら下記の右上赤丸でくくった所。

 

縦横512ピクセル以上の画像を用意して、「画像の変更」ボタンをクリック。
あとは画面の指示通りにいけば、サイトアイコンの完成です。

今回制作した写真がこちら。

 

だいぶホームページっぽくなりましたね。
今回はここまで。

グローバルナビゲーションを作っちゃおう

こんにちはスタッフのnaruです。

将来メタボ腹になりそうなので軽い筋トレを最近始めました。まずは3か月続けたいな。(`・ω・´)キリッ

これを読んでくれているあなたと同じようにnaruも記事を書きながらお勉強中です。|ω・)

さて、今回の内容ですが、前回の続きWordPressでのウェブサイトの作り方です。

まず目次。

  1. グローバルナビゲーション(サイトメニュー)の設定
  2. トップページの作成

1.グローバルナビゲーション(サイトメニュー)の設定

グローバルナビゲーション:

Webサイト内のページ上部の目立つところにあり、リンクを飛ばしているメニュー

ウェブサイトを訪れる人が見やすいようにグローバルナビゲーションと呼ばれるメニューを作成します。

以下はグローバルナビゲーションの例です。

さて、「管理画面」から「固定ページ」を開いて「サンプルページ」をゴミ箱に移動します。

この「サンプルページ」は文字通りお試しページなので消してしまって問題ありません。

 

次に管理画面から「外観 」- 「メニュー」を選択します。

メニュー構造の中の「ホーム」という項目は不要なので削除してください。(必要なら後で作ることができますのでご安心を)

前回の記事で作成できているはずの4つの固定ページが確認できたら「メニューを作成」ボタンを押してください。

また、「メニュー」内の順番を決めることができます。

それぞれの固定ページ項目を左クリックしながら動かせるので順番を変えたいときにやってみてください。

メニュー作成ボタンを押した後、下の画像のようにメニュー設定という項目が現れます。

「メニューの位置」「 メインメニュー」のチェックを入れて「メニューを保存」を押すと・・・

このようにグローバルナビゲーションが現れてよく見かけるウェブサイトに近づきました。

2.トップページの作成

まずウェブサイトを開いたとき最初に出てくるページ(フロントページ)を「トップページ」に変更しましょう。

上の写真のように、「管理画面」 – 「設定」 – 「表示設定」の「フロントページの表示」で、「固定ページ」にチェックを入れて、

「フロントページ」を「トップページ」に変更します。忘れずに変更保存ボタンを押してください。

次に、フロントページを表示させると、下の画像のように「トップページ」と表示されていて見栄えがわるいので消してしまいましょう。

「管理画面 」- 「固定ページ 」- 「トップページ」を開き、タイトル入力場所に<!–トップページ–>と入力します。

<!–消したい文字–>とすることで表示を無効化することができます。

しかしこのままだとグローバルナビゲーションのトップページが消えてしまうので以下の設定をします。

「管理画面」 – 「外観」 – 「メニュー 」のメニュー構造のトップページをクリックし、ナビゲーションラベルから<!– –>を消してメニューを保存してください。

これでバッチリ、グローバルメニューの完成です。
めでたし、めでたし。

 

今回の記事はここまででーす。

メニューバーを作ろう

こんにちは。naruです。

最近は雨続きで、たまにはパッと晴れないかなーなんて思っております。
あっ、今日はちょっと晴れたかな。。

さて、本題へ。
(今回は時間の都合で短めです)

*****

WordPressはブログとして使われることが多いので、

企業用のウェブサイトを作るなら不必要な機能やウィジェットを削除します。

外観 – ウィジェットからサイドバーの中身を全て削除。

 

 

● TOP、事業内容、運営者情報、お問い合わせのページを作成

初めに考えた構成のように固定ページを作っていきます。

「固定ページ」 – 「新規追加」から「TOP」、「事業内容」、「運営者情報」、「お問い合わせ」の4ページを作ります。

表示するとこのような感じになります。

簡単に作成できるので4ページ作ってみましょう!(・ω・)ノ

詳しいやり方は次の記事で説明します。