タグ: Wordpressの基本

【テーマを使った外観の変更】ナビゲーションの階層化

31 8月 15
北川 哲平

No Comments

WordPressでは作成するナビゲーションのメニューに対して親となるメニューを設定し階層化することができます。
階層化することで、コンテンツの種類ごとに情報が整理され、閲覧や編集の際、便利になります。
navi_image_plus2

 

ナビゲーションの階層化

 
①まずは、ダッシュボードを表示していただき「外観」の「メニュー」をクリックして下さい。
 
navi_menu_del_1

②「メニュー構造」の中の移動させたい項目をドラッグし、移動完了後、クリックをお放し下さい。
 
navi_layer_1

navi_layer_2

③移動が終わったら、「メニューを保存」をクリックして下さい。
 
navi_layer_3

④ホームページを表示し、ナビゲーションのメニューにカーソルを合わせると階層化したメニューが表示されます。
今回の例としてメニュー1の下にメニュー2とメニュー3、メニュー4の下にメニュ-5を階層化しています。
 
navi_layer_4

navi_layer_5

このナビゲーションの階層化はテーマに依存するため、テーマによってはナビゲーションの階層化ができないものもあります。

【テーマのインストール】テーマの削除

17 8月 15
北川 哲平

No Comments

 

テーマの削除

 
インストールしたテーマを削除する方法について解説します。左側メニューの中の「外観」メニューの中にある「テーマ」メニューをクリックして下さい。
 
wp356


「テーマ」画面が表示されます。
 
wp357


現在有効になっているテーマは削除することができません。削除したいテーマを今使われているのであれば、別のテーマを有効にしておいて下さい。
 
それでは削除したいテーマの上にカーソルをあわせ、表示された「テーマの詳細」をクリックして下さい。
テーマの詳細画面が表示されます。
削除するテーマに間違いが無ければ、右下にある「削除」をクリックして下さい。
 
wp358


確認ダイアログが表示されます。削除して宜しければ「OK」ボタンを押して下さい。
 
wp359


テーマが削除されます。
 
wp360


テーマがインストールされていたディレクトリからもファイルが削除されています(一部ファイルが残るケースもあるようです)。
 
wp361


なお削除したいテーマに関するファイルを直接削除することも可能ですが現在使っているテーマを削除してしまう恐れもあるので管理画面から削除された方が良いのではないかと思います。

【基本編集項目】コピーライトの表記設定

22 7月 15
北川 哲平

No Comments

多くのサイトでは、ページの最下部にコピーライトを表示しています。
コピーライトとは著作権のことを指しまして、本などと同様、Webページも著作物に含まれます。
コピーライトの表記はしてもしなくても、他者が作成したものをコピーすれば違法になるので、意味は無い表示ではあるんですが、
念のための無断使用の抑止効果としてコピーライトは表記されてたらどうでしょうか。という感じです。
 

コピーライトの表記設定

 
①ページの下部をご覧頂きますと、コピーライトが表示されています。
今回変更を解説させていただくのは「Copyright © 2015 ほんまる.com All rights Reserved.」とある部分の、「ほんまる.com」の部分のみになります。
 
コピーライト表記 


②ログインした状態で、ダッシュボードを表示して下さい。
左記メニューの「設定」から「一般」をクリック。
一般設定画面が表示されます。
一番上にある「サイトのタイトル」をご覧下さい。
 
サイトのタイトル


③こちらがページ下部に表示される部分となります。
コピーライト部分には、ホームページのタイトルを読み込む構築がされていますので、
サイトのタイトルを変更することで、同時にコピーライト部分も変更される形となります。
 
④その他にも、ログイン状態での左上の表示・タイトルロゴを設定していない場合にも、サイトタイトルが反映されます。
 
その他表示箇所

【基本編集項目】連絡先の設定

22 7月 15
北川 哲平

No Comments

ここでは、右上にある連絡先の設定方法についてご説明します。
変更したい方、表示させたく無い方はご参考にご覧下さい。
 

連絡先の設定

 
①まずは、ログインした状態でダッシュボードを表示して下さい。
左記メニューの「外観」から「テーマの設定」をクリック。
テーマに対するオプション設定画面が表示されます。
 
テーマの設定


②中ほどまでスクロールしていただくと、連絡先の設定が表示されます。
こちらの「お問い合わせ電話番号」「住所」を、任意のものにご変更下さい。
 
連絡先の設定


③空白にしていただくと、表記自体が削除されます。
再度表示させたい場合は、同手順で変更して下さい。
 
表示有無

【基本編集項目】ヘッダー画像の設定

21 7月 15
北川 哲平

No Comments

サイトを訪問した際に、多くの人の目を引くのがメイン画像である「ヘッダー」です。
そのヘッダー画像の変更の方法について解説します。
 

ヘッダー画像の設定

 
①まず、ログインした状態でダッシュボードを表示させ、
左記のメニューより「外観→ヘッダー」を選択して下さい。
 
ヘッダー


②サイトのカスタマイズ画面に切り替わります。
左記のメニューの中から「ヘッダー画像」の右側にある▼をクリックして下さい。
 
ヘッダー画像


③ヘッダー画像の編集画面が展開されます。
「新規画像を追加」をクリックして下さい。
 
新規画像を追加


④画像の追加に関しては、「ファイルをアップロード」「メディアライブラリ」の2種から選択できるようになっていますので、
新たに作成した画像を追加する場合は「ファイルをアップロード」。以前にアップロードしていたものを使用する場合は「メディアライブラリ」をご利用下さい。
今回は、「ファイルをアップロード」に関して説明いたします。
 
⑤ファイルをアップロード画面をご覧頂くと、真ん中にある「ファイルを選択」の下に注意書きがあります。
 
アップロードサイズ


最大アップロードサイズ:30MB 推奨画像サイズ:880×328px(ピクセル)
とあるように、上限が設定されておりますので、それにあわせた形で事前に画像を作成しておいて下さい。
サイズに関しては、推奨サイズより大きくても切り抜く事が可能ですが、
想像と出来上がりが違うといった事態を防ぐ為にも、出来るだけ推奨サイズで作成して下さい。
 
⑥「メディア(画像ファイル)のアップロード」が完了しますと、
メディアライブラリの左上に、先ほどアップロードした画像が表示されています。
こちらが選択された状態で、右下の「選択して切り抜く」をクリックして下さい。
 
画像の選択


⑦画像の切り抜き画面に切り替わります。
推奨サイズより大きなサイズの画像を作成していた場合はここで切り抜きを、同サイズで作成していた場合は右下の「切り抜かない」をご選択下さい。
 
画像切り抜き


⑧ヘッダー画像が切り替わりました。
切り替え後、左上にある「保存して公開」をクリックいただくと、サイトの方へ変更が反映されます。
 
保存して公開

【基本編集項目】バナーの設定

21 7月 15
北川 哲平

No Comments

こちらは、サイドバーに表示するバナーの設定になります。
バナーとは、ウェブページ上で他のウェブサイトを紹介する役割をもつ画像(アイコンの一種)のことを指し、特別に紹介したいページなどのリンクを視覚的に見やすくしているものです。
こちらの「バナーの設定」は、「ロゴの設定」の①~⑥までが同じ流れになりますので、そちらをご確認下さい。
初期画像のサイズ設定は「W:233px(ピクセル) H:120px」となっております。
 

バナーの設定

 
⑦無事にメディアライブラリ画面に戻れましたら、左記メニューの中から「外観」→「テーマ設定」をクリックして下さい。
 
「バナーの設定」までスクロールし、先ほどコピーした「URL」を「画像URL」に貼り付けて下さい。
 
バナーの設定1


⑧次に「画像の説明(alt属性)」の編集になります。
alt属性とは、メニュー構造の際にも説明した「title属性」と類似したものになります。
主に画像に対して設定する場合が多く、画像にカーソルを合わせた際に吹き出しとして表示される文字を設定しておくものになります。
クローラーに対する信頼度がtitle属性より高く、SEO効果として期待できる為、設定することを推奨します。
 
⑨次に「リンク先のURL(リンク先は空でも問題ありません)」の編集になります。
こちらにURLを記載すると、サイト上に表示された画像をクリックすると、そのリンク先に飛べる仕組みになっています。
特に飛ばす必要が無く、デザインとして画像を表示しておくだけでしたら、URLを設定する必要はありません。
必要に応じて記載して下さい。
 
⑩全ての記載が完了しましたら、すぐ下にある「変更を保存」をクリック。
 
⑧無事変更が完了しました。
「バナーの設定2」にあるものも、同様の手順で変更が可能です。
 
バナーサイト表示

【基本編集事項】ロゴの設定

21 7月 15
北川 哲平

No Comments

こちらでは、企業や個人のイメージとなる画像を設定することができます。
初期設定では各テーマに用意されているサンプル画像が表示されていますので、こちらをオリジナルのものに変更しましょう。
 

ロゴの設定

 
①まずは、画像をご用意下さい。
会社名の記載があるものやオリジナルキャラクターのロゴ等何でも構いません。
サイズに関しては、初期画像サイズが「W:210px(ピクセル) H:34px」となっております。
大きく見せたい方は大きい画像でもそのまま表示出来ますが、全体のバランスを考えたサイズのものをご用意下さい。
今回は、初期画像サイズと同じ「W:210px H:34px」のものを用意しました。
 
サンプルロゴ


②ご用意いただいた画像をメディアにアップロードして下さい。
アップロードの方法に関しては、更新マニュアルの「メディア(画像ファイル)のアップロード」をご覧下さい。
 
③使用画像のアップロードが完了しましたら、ダッシュボードを表示して下さい。
左記のメニューから「メディア」→「ライブラリ」を選択し、画像の一覧を表示して下さい。
 
ライブラリ


④画像の一覧の中から、先ほどアップロードした使用画像をクリックし、添付ファイルの詳細を表示させて下さい。
 
メディア


⑤右側にその画像に対する詳細が表示されます。
その中の「URL」をご確認下さい。そちらが先ほどアップロードした画像を保管している場所になります。
そちらのURLをコピーして下さい。
 
コピー


⑥コピーが完了しましたら、添付ファイルの詳細の右上にある×で閉じて下さい。
※この際、表示画面上の右上にある赤色の×を閉じないよう注意して下さい。ブラウザを閉じてしまうと、保存していない情報が失われる可能性がございます。
 
⑦無事にメディアライブラリ画面に戻れましたら、左記メニューの中から「外観」→「テーマ設定」をクリックして下さい。
 
「ロゴの設定」までスクロールし、先ほどコピーした「URL」を貼り付けて下さい。
貼付終わったら、すぐ下にある「変更を保存」をクリック。
 
⑧無事変更が完了しました。
 
設定完了


サイトの表示も確認いたします。
 
サイト表示


無事に、サイトの表示の方にも反映されました。
 
 

【基本編集事項】ナビゲーションの設定

21 7月 15
北川 哲平

No Comments

 
1.ナビゲーションの設定
2.メニューの削除方法

 

 

ナビゲーションの設定

 
①まずは、ダッシュボードを表示していただき「外観」の「テーマ設定」をクリックして下さい。
 
テーマ設定


②テーマの設定として、各項目が表示されます。
ご選択いただいたデザインテーマによって、編集できる項目が変わります。
今回は、「どスタンダード」で説明いたします。
 
③「テーマの特徴」は、メニュー・日付・ページナビゲーション・コメント機能の設定項目になります。
日付・ページナビゲーション・コメント機能に関しては、テーマに対しての特徴になりますので、変更等は出来ません。
変更可能な箇所として「メニュー」があります。
テーマの特徴の説明部分か、左記の表示メニューの中から「メニュー」をクリックして下さい。
※説明部分の「メニュー」なら別タブに表示、左記の表示メニューの「メニュー」なら、現在表示されているページにそのまま表示されます。
説明を見ながら操作されたい方は、説明部分の「メニュー」をクリックして下さい。

 
メニュー


 
④こちらのテーマでは「Main Navigation」と「Footer Navigation」を編集することが可能です。
 
メイン・フッターナビ


⑤まずは、「新規メニューを作成」から任意の名前でメニューを作成して下さい。
分かりやすい名前なら何でも構いませんが、今回はそのまま「Main Navigation」と名付けます。
名付け終わったら、右の上下に表示されているAかB、どちらかの「メニューを作成」をクリックして下さい。
 
wpm11_1



 
メニュー構造


⑥「メニュー構造」の設定画面が表示されました。
その下の説明にもある通り、次は左カラムからメニュー項目を追加します。
「Main Navigation」に追加したい項目を選び、□にチェックをお付け下さい。
選び終わったら、最後に「メニューに追加」をクリックして下さい。
 
メニューに追加

 
追加完了


⑦選んだものが「メニュー構造」に追加されました。
現在のままでは左に表示されている順番のままになっているので、順番を入れ替えます。
上から表示されている順番が、サイト上で左から表示される順番になりますので、それを踏まえた上で移動させます。
 
⑧移動させたいタイトルの上にカーソルを合わせると、白色の十字矢印が表示されます。
それをクリックしたまま表示させたい位置にドラッグし、移動完了後、クリックをお放し下さい。
 
メニュー移動


⑨全ての移動が完了したら、次は各項目の編集に移ります。
編集したいタイトル項目の右にある「固定ページ▼」の▼をクリックして下さい。
各項目に対する編集画面が展開されます。
 
詳細設定

ナビゲーションラベル:サイト上にそのまま表示されるタイトルです。元の固定ページのタイトルが長いものでも、省略して表示させることが可能です。
 
タイトルの属性:そのままtitle属性に当たります。カーソルを置いた時に、吹き出しとして表示される(ブラウザによる)上、多少のSEO効果も期待できます。
 
説明:テーマによっては対応していません。説明のテーマでは、説明部分に英語表記などを入れ、表示タイトルの補足として表示しています。

 
⑩メニュー構造の各項目の編集が完了すると、次は「メニュー設定」に移ります。
こちらは、先ほど作成したメニューを実際にどこに表示させるのかを指定するものになります。
「このメニューに新しいトップレベルのページを自動追加」は、左の□にチェックを入れると
最上位階層のページが作成されたとき、そのページを自動的にメニューに追加してくれます。
 
wpm17_1


⑪今回は、「Main Navigation」への関連付けを行います。
「Main Navigation」の左の□にチェックを入れ、右の上下に表示されているAかB、どちらかの「メニューを作成」をクリックして、編集したものを保存して下さい。
左上に「Main Navigation を更新しました。」と表示されていれば成功です。メニューが更新されました。
 
メニュー更新


 
⑫それでは、ホームページ上の表示を確認してみましょう。
左上のサイトタイトルから、「サイトを表示」をクリックして下さい。
 
サイトを表示


 
サイトの表示が先ほど編集したものに変わりました。
例として、商品一覧のタイトルの属性には「商品」、説明には「Item」と編集したものがそのまま反映されています。
 
表示変更確認


⑬このように、表示させるタイトルに関する変更は、「メニュー」から行うことが可能です。
 

 

 

メニューの削除方法

 
①まずは、ダッシュボードを表示していただき「外観」の「メニュー」をクリックして下さい。
 
navi_menu_del_1


②「編集するメニューを選択」から、削除するメニューを選択し、「メニューを削除」をクリックして下さい。
 
navi_menu_del_2


②確認ダイアログが表示されます。削除して宜しければ「OK」ボタンをクリックして下さい。
 
navi_menu_del_3


④選択していたメニューが削除されます。
 
navi_menu_del_4

WordPressマニュアル

02 7月 15
北川 哲平

No Comments

会社経営をしてるなら、ホームページは自社を宣伝する時に一番有効なツールのひとつですよね。
言うまでもなく、今の時代、パソコンやタブレット、スマートフォンから簡単にインターネットを閲覧できる環境があります。
そのホームページ制作に『WordPress』という便利なツールが存在してます。

ここではホームページ制作に特化したWordPressについて紹介しときます。
 
1.WordPressとは
2.WordPressの特徴

 

 

WordPressとは

WordPressはCMS(Contents Management System)、直訳すると「コンテンツ管理システム」のひとつです。
通常Webサイトを制作するには専門知識が必須のはずだったのですが、
WordPressを利用すれば専門知識がなくても文章や画像といったコンテンツを準備するだけでWEBサイトを制作でき、公開することが出来ます。
知識がなくてもWEBサイトの運営ができる便利なアプリケーションツールです。
 

 

 

WordPressの特徴

WordPressの特徴は大きく分けて5つ。

1.無料で使えるアプリケーションです。ホームページやサイトなどを制作するときに無料で使用することができます。

2.独自ドメイン(ネット上の土地の住所のようなものでURLのこと)が使えます。完全オリジナルのドメイン名にすることでSEO対策にも有利になります。

3.テーマ(テンプレート)が豊富です。テーマとはWordPressで作成したホームページやサイトのデザインのことです。無料で使用できる範囲や、商用利用ができるかどうかなど、利用上の制約を事前に調べておくべきなど注意点はありますが、更新の際など、あれこれ探してみるのもアリな感じです。

4.プラグイン(機能を拡張するツール)による拡張機能です。
パソコンでいうソフトウェア、スマートフォンでいうアプリみたいなもので、ホームページの機能をカスタマイズして、どんどん機能強化をしていくことが可能です。

5.WordPressは常に進化し続けています。2003年5月公開以来、常にバージョンアップしています。機能面だけではなくセキュリティ面も次々進化しているので安心です。
 

当社が1万円コースや3万円コースといった格安でホームページ制作サービスを提供できるのも、
WordPressという便利なアプリケーションツールを活用し、さらにその制作業務を徹底的にシステム化したサービスになっているからです。凄い時代になりました。

プラグインの停止と削除

16 6月 15
北川 哲平

No Comments

有効化しているプラグインを一時的に使わないようにするには停止を、恒久的に使用しない場合には削除を行います。
ここではプラグインの停止と削除の方法について解説します。
 
1.プラグインの停止
2.プラグインの削除

 

 

プラグインの停止

 
プラグインを一時的に使用しないようにするにはプラグインを停止します。
 
①プラグインを停止するには管理画面の「プラグイン」メニューの中にある「インストール済みプラグイン」メニューをクリックして下さい。
 
インストール済みプラグインメニュー


②「プラグイン」画面が表示されます。
 
プラグイン画面


③表示されているプラグインを見て頂くと、現在有効になっているプラグインには「停止」と「編集」の2つのメニュー。
有効化されておらず停止中になっているプラグインには「有効化」「編集」「削除」の3つのメニューが表示されています。
 
メニュー表示


④プラグインを停止するには、対象のプラグインに表示されている「停止」と書かれたリンクをクリックして下さい。
 
停止


⑤プラグインの停止が完了します。
 
停止の完了


⑥プラグインは停止しても「インストール済みプラグイン」で表示される画面に表示されたままです。
停止したプラグインは再度「有効化」メニューをクリックすることで有効にすることができます。
 

 

 

プラグインの削除

 
①停止した時と同じ手順で「プラグイン」画面を表示して下さい。
そして削除したいプラグインに表示されている「削除」と書かれたリンクをクリックして下さい。
 
削除


※ 有効化されているプラグインには「削除」メニューが表示されません。削除するにはまずプラグインを停止させて下さい。
 
②確認画面が表示されます。
削除して宜しければ「はい、これらのファイルを削除します」と表示されたリンクをクリックして下さい。
 
ファイルの削除


③プラグインが削除されました。
プラグインが削除されるとインストールされていたファイルも自動的に削除されます。

【テーマを使った外観の変更】カスタムヘッダーの設定

16 6月 15
北川 哲平

No Comments

ホームページのヘッダーに関する設定を行います。
任意のヘッダー画像を設定する方法やテキストの色の指定方法について確認します。
 
1.ヘッダーに使用する画像をアップロード
2.アップロードした複数の画像をランダム表示
3.画像をトリミング
4.ヘッダー画像を削除
5.ヘッダーテキストを非表示
6.ヘッダーテキストの文字色を変更

 

 

ヘッダーに使用する画像をアップロード

 
①ヘッダーの編集を行なうには管理画面にログイン後、左側メニューの中の「外観」メニューの中にある「ヘッダー」メニューをクリックして下さい。
 
thema_custem_1


②「カスタムヘッダー」画面が表示されます。
 
thema_custem_2


③デフォルトの設定は使用しているテーマで予め用意されている8つの画像をランダムに表示する設定になっています。
 
thema_custem_3


④画像は予め用意されているものを使い、ランダムではなく常に同じ画像を表示したい場合には、その画像をクリックして選択して下さい。
 
thema_custem_4


⑤任意の画像をアップロードして設定することも可能です。
画像の大きさを1000 x 288ピクセルにしてアップロードすると、そのままのサイズでヘッダーの画像として表示されます。
 
⑥「ファイルをアップロード」のところにある「ファイルを選択」ボタンを押してアップロードする画像を選択して下さい。
ファイルを選択したら「アップロード」ボタンを押して下さい。
 
thema_custem_5


thema_custem_6


⑦ヘッダーの画像がアップロードした画像に置き換えられます。
 
thema_custem_7


⑧ではホームページを表示してみます。
 
thema_custem_8


ホームページのヘッダーが先程アップロードした画像に変更されていることが確認できます。
 

 

 

アップロードした複数の画像をランダム表示

 
複数の画像をアップロードすると、アップリードした画像の中からどの画像を使用するのかを選択できます。
また自分がアップロードした複数の画像をランダムに表示させることが可能です。
 
2つ以上画像をアップロードすると次のような表示となります。
 
thema_custem_9


いずれか一つを固定的に表示させる場合は、その画面をクリックして下さい。
アップロードした画像全てを使ってランダムに表示させたい場合は「アップロード済みヘッダをランダム表示」をクリックして下さい。
 

 

 

画像をトリミング

 
①アップロードする画像が 720 x 960ピクセル よりも大きいサイズだったり小さいサイズだった場合などは、
アップロードした後に画像のどの部分を使用するのかを範囲指定します。
 
②720 x 960ピクセルの画像を実際にアップロードしてみると次のような画面となります。
 
thema_custem_10


③ヘッダー画像として使いたい部分をマウスを使って選択したあと「画像切り抜き」ボタンを押して下さい。
 
thema_custem_11


④指定した範囲がヘッダー画像として使用されます。
 
thema_custem_12


⑤なお画像の選択する大きさは 720 x 960ピクセル である必要はありません。
縦と横の比率は決まっていますがサイズは大きくも小さくも指定できます。
そして選択した範囲の画像を 720 x 960ピクセル に拡大または縮小してヘッダーの画像として使用します。
 

 

 

ヘッダー画像を削除

 
①ヘッダーに画像を表示させないようにするには「ヘッダー画像」のところにある「画像を非表示」ボタンを押して下さい。
 
thema_custem_13


②ヘッダーから画像が削除されました。
 
thema_custem_14


③ホームページを表示してみると次のように表示されます。
 
thema_custem_15


④ヘッダーから画像を削除した後で改めて画像を表示させたい場合は、元々用意されていた画像か自分でアップロードしたいずれかの画像を選択し、画面左上の「保存して公開」ボタンを押して下さい。
 
thema_custem_16


⑤再びヘッダーに画像が表示されます。
 
thema_custem_17


 

 

 

ヘッダーテキストを非表示

 
ヘッダーに表示されているホームページタイトルなどのテキストを非表示にすることができます。
 
①「サイトタイトルとキャッチフレーズ」のところにある「ヘッダーテキストを表示する」のチェックを外して下さい。
 
thema_custem_18


②ヘッダーのテキストが非表示になりました。
 
thema_custem_19


③ホームページを表示してみると、ヘッダーに画像だけがありテキストが非表示になっていることが確認できます。
 
thema_custem_20


 

 

 

ヘッダーテキストの文字色を変更

 
①ヘッダーテキストを表示している場合は、テキストの文字色を指定することができます。
 
thema_custem_21


②デフォルトの色は「#000」となっています。
色の指定はHTMLカラーと同じで「#RRGGBB」の形式で直接値を入力するか、
「色を選択」ボタンを押すと表示される色のサンプルから色を選択して下さい。
 
thema_custem_22


③変更すると反映されヘッダーのテキストが指定した色に変更されます。
 
thema_custem_23


④なお色を入力するテキストボックスに表示されている「デフォルト」ボタンを押して頂くと元の色に戻すことができます。

【テーマを使った外観の変更】テーマの設定変更

16 6月 15
北川 哲平

No Comments

設定されているテーマによっては設定項目が用意されていて設定を変更できるものがあります。
以前のバージョンのWordPressで、デフォルトでインストールされているTwenty Elevenテーマでも「色の設定」「リンク色」「レイアウト」の3つの設定項目が用意されています。
ここでは設定変更の方法と、その結果どのようにホームページの外観が変更されるのかを確認します。
 
1.色の設定
2.リンク色
3.レイアウト

 

 

色の設定

 
①Twenty Elevenテーマの設定を変更するには管理画面にログイン後、左側メニューの中の「外観」メニューの中にある「テーマ設定」メニューをクリックして下さい。
 
thema_elevenedit_1


②「Twenty Eleven テーマ設定」画面が表示されます。
 
thema_elevenedit_2


③「色の設定」についてデフォルトで設定されている「ライトカラー」の他に「ダークカラー」が用意されています。
変更する場合はダークカラーを選択し、画面左下の「変更を保存」ボタンを押して下さい。
(ダークカラーに変更すると自動的にリンク色も適したものに変更になりました)。
 
thema_elevenedit_3


④それではそれぞれの値を設定した時にどのようにホームページが表示されるのかを確認してみます。
 
ライトカラー:
 
thema_elevenedit_4


thema_elevenedit_5


ダークカラー:
 
thema_elevenedit_6


thema_elevenedit_7


 

 

 

リンク色

 
「リンク色」はホームページの中でリンクが設定されているテキストの色です。
ホームページでは例えば次のようなところに他のページへのリンクが設定されています。
 
thema_elevenedit_8


デフォルトの色は「色の設定」がライトカラーの場合で「#1b8be0」、ダークカラーの場合で「#e4741f」のようです。
 
thema_elevenedit_9


①色の指定はHTMLカラーと同じで「#RRGGBB」の形式で直接値を入力するか、
「色を選択」ボタンを押すと表示される色のサンプルから色を選択して下さい。
 
thema_elevenedit_10


今回は「#ff0000」を指定しました。
 
thema_elevenedit_11


②変更を保存した後でホームページを表示してみると、リンクが設定されているテキストの色が変更されていることが確認できます。
 
thema_elevenedit_12


 

 

 

レイアウト

 
「レイアウト」はサイドバーの設置位置の違いで3種類用意されています。
コンテンツを左でサイドバーを右に設置するか、コンテンツを右でサイドバーを左に設置するか、
又はサイドバーを設置しないかを選ぶことができます。
 
thema_elevenedit_13


①それではそれぞれの値を設定した時にどのようにホームページが表示されるのかを確認してみます。
 
左コンテンツ(右サイドバー):
 
thema_elevenedit_14


右コンテンツ(左サイドバー):
 
thema_elevenedit_15


一列・サイドバーなし:
 
thema_elevenedit_16


今回はデフォルトで使用しているTwenty Elevenテーマで用意されている設定項目について確認しました。
どのような設定変更が管理画面から可能なのかはテーマによって異なりますので、別のテーマをご利用になる場合は今回ご説明した内容と異なっている場合があります。

【テーマを使った外観の変更】現在のテーマとファイル構成

16 6月 15
北川 哲平

No Comments

まず最初に現在設定されているテーマの確認と、
そのテーマで使用されているPHPファイルの場所へ編集方法について簡単にご説明します。
 
1.現在のテーマの確認
2.テーマで使用しているファイル
3.管理画面上でファイルを編集

 

 

現在のテーマの確認

 
①管理画面にログイン後、左側メニューの中の「外観」メニューの中にある「テーマ」メニューをクリックして下さい。
 
theme_file_1


②「テーマ」画面が表示されます。
 
theme_file_2


③「有効」と書かれたところにあるのが現在のホームページで設定しているテーマです。
 
theme_file_3


④「有効」以外のテーマは、インストール済みですが、現在使用していないものが表示されています。
別のページで解説しますが、WoredPressで任意のテーマを使用するには、まずテーマをインストールして利用可能な状態にした後でそのテーマを有効にします。
 
theme_file_4


 

 

 

テーマで使用しているファイル

 
テーマというのはホームページをどのように画面に表示するのかを定義したPHPファイルやスタイルシートなどの集まりです。
テーマをインストールすると、そのテーマで使用されるPHPファイルなどがWordPressをインストールしたディレクトリ以下に配置されます。
 
theme_file_5


theme_file_6


配置される場所は「(wordpressをインストールしたディレクトリ)/wp-content/themes/」以下となります。
このディレクトリ以下にテーマ毎にディレクトリが作成されテーマで使用するファイルが格納されます。
 
インストールされているテーマは、現在使用している「keni6_wp_corp_130802」とそれ以外にインストールしたものです。
その為、”themes”ディレクトリ以下に複数のディレクトリが作成されています。
 
では「twentyeleven」ディレクトリの中を確認してみます。
 
theme_file_7


theme_file_8


PHPファイルなどが格納されています。これらがテーマを構成するファイルとなります。
ホームページのヘッダー画像などを変更する程度であればPHPファイルを直接編集する必要はありませんが、
より細かくテーマをカスタマイズする場合は、これらのファイルを直接修正することになります。
(カスタマイズについては別のところで詳しく解説する予定です)。
 
参考までにファイルを1つ開いてみます。テキストエディタで”category.php”というファイルを開いて下さい。
 
theme_file_9


ファイルの中身はこのように自由に修正することが可能です。
 

 

 

管理画面上でファイルを編集

 
また左側メニューの中の「外観」メニューの中にある「テーマ編集」メニューをクリックすると「テーマの編集」画面が表示されます。
 
theme_file_10


右側にテーマで使用しているPHPファイルやスタイルシートなどのファイル名が一覧で表示されています。
編集したいファイル名をクリックすると画面中央でファイルの中身が表示され編集を行なうことができます。
(ファイルに対する書き込み権限が設定されている必要があります)。
 
テーマで使用しているファイルの編集については、またカスタマイズのカテゴリにて改めて詳しく解説いたします。

【管理画面とホームページの基本設定】投稿されている不要な記事などを削除

14 6月 15
北川 哲平

No Comments

WordPressでホームページを作成するとサンプル記事とサンプル固定ページがそれぞれ投稿されています。
ホームページの利用を開始する前に、こららの自動で投稿されたものを削除しておきましょう。
記事の削除に関する詳しい手順は別のページにて解説しますので、ここでは手順だけご紹介します。

1.サンプル記事の削除
2.サンプル固定記事の削除

 

 

サンプル記事の削除

①まずサンプル記事の削除から行ないます。「投稿」メニューの中にある「投稿一覧」メニューをクリックして下さい。

投稿一覧


②「投稿」画面が表示されます

投稿画面


③一番上に「サンプル記事」が1つ投稿されています。この記事にマウスを合わせると「ゴミ箱」と書かれたリンクが表示されますのでクリックして下さい。

ゴミ箱


④投稿されていた記事が削除されてゴミ箱に入りました。これで投稿されていた不要な記事は削除されました。

記事削除


 
 

 

 

サンプル固定記事の削除

①続いてサンプル固定ページを削除します。
「固定ページ」メニューの中にある「固定ページ一覧」メニューをクリックして下さい。

固定ページ一覧


②「固定ページ」画面が表示されます

固定ページ


③一番上に「サンプル固定ページ」が1つ作成されています。
このページにマウスを合わせると次のように「ゴミ箱」と書かれたリンクが表示されますのでクリックして下さい。

ゴミ箱


④作成されていた固定ページが削除されてゴミ箱に入りました。これで作成されていた不要な固定ページは削除されました。
 
固定ページ削除


【管理画面とホームページの基本設定】検索エンジンへのインデックス許可の設定

14 6月 15
北川 哲平

No Comments

WordPressでは記事単位で非公開にすることはできますがホームページ全体を非公開にするという設定は用意されていません。
非公開にされたい場合にはWordPressではなくWebサーバ側の設定で認証機能を付けたりする必要があります。

ただGoogleやYahoo!など検索エンジンにインデックスされないように設定を行なうことはできます。
検索エンジンにインデックスされるというのは、簡単に言うとご自身のホームページや投稿した記事が検索エンジンに登録され、検索結果として表示されるようになることです。
検索結果に表示されるようにされたい場合はインデックスを許可し、検索結果に表示したくない場合はインデックスしないように設定する必要があります。

ここでは検索エンジンにインデックスされるようにするかどうかの設定方法と、設定を変更した場合にホームページのHTML文にどのような違いが出てくるのかについて解説します。

1.インデックスを許可するかどうかの設定方法
2.設定変更した場合のHTML文の違い

 

インデックスを許可するかどうかの設定方法

①インデックスに関する設定を変更するには、「設定」メニューの中にある「表示設定」メニューをクリックして下さい。

表示設定


②「表示設定」画面が表示されます

表示設定画面


③「検索エンジンでの表示」というチェックボックスがあります。
作成したホームページを検索エンジンにインデックスさせてもいい場合はチェックを外し、インデックスさせたくない場合はチェックをして下さい。

インデックス有無


④今回は設定変更を行いませんが、変更を行なった場合は忘れずに「変更を保存」ボタンを押して下さい。

⑤なお注意点として、インデックスを許可する設定にしても、それはインデックスを拒否しないという設定を行っているだけで実際にインデックスされるかどうかは検索エンジン側次第ということになります。
またインデックスを拒否する設定にしても、ホームページの表示そのものを禁止しているわけではないので、ホームページのURLを知っている方であれば閲覧は自由に行なえます。
 
 

 

設定変更した場合のHTML文の違い

インデックスできないように設定した場合、ホームページには次のような文が挿入されます。

<meta name='robots' content='noindex,follow' />

metaタグの詳しい意味については下記のGoogle公式ヘルプをご参照下さい。

参考:メタタグによるサイトへのアクセスのブロック – ウェブマスター ツール ヘルプ

メタタグアクセスブロック


参考:rel=”nofollow” – ウェブマスター ツール ヘルプ

ウェブマスターツールヘルプ


例えば公開準備中の間はインデックスされないように設定された場合、いざホームページを正式に公開されてもこの設定を元に戻すことを忘れてしまうと、いつまでたっても検索エンジンで検索されない状態となってしまいますのでご注意下さい。

【管理画面とホームページの基本設定】ホームページのタイトルとキャッチフレーズの設定

14 6月 15
北川 哲平

No Comments

WordPressをインストールする時にホームページのタイトルを指定しますが、あとから変更することが可能です。
またタイトルとは別にキャッチフレーズが表示されています。
ここではタイトルとキャッチフレーズを変更する方法について解説します。
 

ホームページのタイトルとキャッチフレーズの設定

 
①タイトルとキャッチフレーズは例えばホームページ上で次のように表示されています。

タイトルとキャッチフレーズ


②上記の場合であれば「北川哲平.com」がタイトル、
「自分の価値は自分でつくり、価値の源泉を自分につくる」がキャッチフレーズとなります。

③タイトルやキャッチフレーズの変更を行う場合、管理画面の左側に表示されているメニューの中から「設定」メニューをクリックし、その中にある「一般」メニューをクリックして下さい。

一般


④「一般設定」画面が表示されます

一般設定


⑤一般設定画面では今回変更を行なうタイトルやキャッチフレーズの変更の他に時刻やURLの設定などを行うことができます。
これらの変更方法について別のページで解説します。

⑥現在「サイトのタイトル」と「キャッチフレーズ」は次のように設定されています。
変更する場合は、それぞれお好きな「サイトのタイトル」「キャッチフレーズ」に変更してください。

タイトル・キャッチフレーズ


⑦変更が終わりましたら画面下部にある「変更を保存」ボタンを押して下さい。

変更を保存


⑧画面上部に「設定を保存しました」と表示されれば設定変更は完了です。

設定変更完了


使用テーマによっては、ホームページのトップページのtitleタグの値は次のように「タイトル」と「キャッチフレーズ」が組み合わさったものになるものもあります。

タイトルタグ

<title>Twenty Fourteen | A beautiful magazine theme<title>

ホームページの画面上でも確認をされてみて下さい。

【管理画面とホームページの基本設定】管理画面のメニューの使い方とホームページ画面との切り替え

14 6月 15
北川 哲平

No Comments

WordPressを使って作成したホームページに対し設定を変更したり新しい記事を投稿するには管理画面から行います。
ここでは管理画面へログイン後、用意されているメニューの使い方について解説します。
また管理画面からホームページ画面への切り替え、そしてホームページ画面から管理画面への切り替え方法についても確認します。
 
 
1.管理画面のメニューの使い方
2.管理画面とホームページ画面の切り替え
3.ログインしている場合とログインしていない場合でのホームページ画面の違い
 
 

 

 

管理画面のメニューの使い方

①管理画面にはブラウザから「https://(サイトのURL)/wp-login.php」へアクセスします。
ローカルにインストールしている場合には「https://localhost/wordpress/wp-login.php」となります。

ログイン


②ユーザー名とパスワードを入力後に「ログイン」ボタンを押して下さい。次のような画面が表示されます。

ダッシュボード


③最初にログインすると「ようこそ」の画面が表示されます。
WordPressで行なうことができる設定へのリンクが表示されています。
この画面はいつでも参照できますので取りあえず非表示にします。
画面右上にある「非表示にする」と書かれたリンクをクリックして下さい。

ようこそ画面


④「ようこそ」の部分が非表示になります。

ようこそ非表示


⑤次に画面左側を見て下さい。色々なメニューが表示されています。

メニュー


⑥各メニューの中にはサブメニューが用意されており、メニューをクリックするとサブメニューが表示されます。
現在は「ダッシュボード」メニューがクリックされて、その中にある「ホーム」と「更新」というサブメニューが表示されている状態です。

⑦サブメニューを表示するにはメニューにマウスを合わせて下さい。
するとそのメニューのサブメニューが右側に表示されます。
この状態でサブメニューをクリックすることも可能です。
例として「外観」メニューにマウスを合わせると次のように表示されます。

外観


⑧さらにメニューにマウスを合わせるだけでなくメニューをクリックしてもらうと、先ほど右に表示されていたサブメニューがメニューの下に展開して表示されます。

メニュー下表示


⑨サブメニューを展開して表示できるのは一つだけですので、「投稿」メニューのサブメニューを表示すると「ダッシュボード」メニューのサブメニューは表示されなくなっています。

⑩サブメニューをクリックすると、サブメニューに対応した画面が表示されます。
(メニューをクリックすると、そのメニューに含まれる一番上のサブメニューをクリックしたことと同じになります。)
例として「投稿」メニューの中の「新規追加」メニューをクリックすると、記事を新規投稿するための画面が表示されます。

新規追加


⑪再びダッシュボードに戻りたい場合は「ダッシュボード」をクリックして下さい。

ダッシュボード


このページ以降で解説する色々な操作はここで紹介したメニューを介して行っていきます。
なお管理画面からログアウトする方法は『管理画面からのログアウト』を参照して下さい。
 
 

 

 

管理画面とホームページ画面の切り替え

管理画面で記事を投稿したり設定を変更したあとで実際のホームページ画面で確認することになりますが、管理画面とホームページ画面は簡単に切り替えを行うことができます。

①管理画面の画面左上を見て下さい。作業しているホームページのタイトルが表示されてます。

ホームページタイトル


②このタイトルにマウスを合わせると「サイトを表示」と書かれたメニューが表示されます。
このメニューをクリックして下さい(タイトルをそのままクリックして頂いても同じ結果となります。)

サイトを表示


③ホームページの画面が表示されます。

ホームページ画面


④なおWordPressの管理画面にログインしている状態で対象のホームページを表示すると、ホームページの上部に次のようなメニューバーが表示されます。

メニューバー


⑤次にホームページ画面から管理画面に戻す場合です。
画面左上に表示されているホームページタイトルにマウスを合わせて頂くと管理画面の左側に表示されていたメニューの中からいくつかが表示されます。

wp20


⑥例えば「ダッシュボード」メニューをクリックすると管理画面のダッシュボードが表示されます。

ダッシュボード


⑦このようにWordPressにログインしている状態であれば、管理画面と実際のホームページ画面を簡単に切り替えることができます。
 
 

 

 

ログインしている場合とログインしていない場合でのホームページ画面の違い

①先ほどWordPressにログインした状態でホームページを表示しましたが、ログインした状態でホームページを閲覧すると画面上部にメニューバーが表示されます。

メニューバー


②他の人などホームページの管理画面にログインしていない状態でホームページを閲覧すると画面上部にはメニューバーは表示されません。

メニューバー表示無し


③このようにホームページの画面上部にメニューが出るのはそのホームページの管理画面にログインしている人だけですのでご安心下さい。

WordPressのダウンロード及びインストール

14 6月 15
北川 哲平

No Comments

ここではWordPress(2015年7月の時点での最新バージョンはWordPress4.2.2)のダウンロード方法及びインストール手順について順に解説します。
(こちらの解説は、ローカル環境へのインストールです)

1.WordPressのダウンロード
2.ファイルの配置
3.WordPressのインストール
 

 

 

WordPressのダウンロード

①それではWordPressのダウンロードから行います。次のURLから開始します。
https://ja.wordpress.org/
 
wp1


②画面右下に表示されている「WordPress 4.2.2 をダウンロード」と書かれた箇所をクリックして下さい。
必要なファイルのダウンロードが開始されますので適当な場所に保存しておいて下さい。
 
ダウンロードは以上で終了です。
 

 

 

ファイルの配置

ダウンロードしたファイルは圧縮ファイルとなっています。
解凍した上で使用するWebサーバへ配置します。
配置したファイルはインターネット経由でアクセスできる位置に配置して下さい。
WebサーバとしてApacheを使用しているのであればドキュメントルートの直下、または任意のディレクトリを作成して配置して下さい。
 
例えば「blog」というディレクトリを作成して配置するとインストール後にWordPressにアクセスする時に「https://www.example.com/blog/」というようなURLへアクセスすることになります。
WordPressをどのようなURLで公開したいのかを考えた上でディレクトリ名を決めて下さい。

ダウンロードしたファイルは元々「wordpress」というディレクトリの中にファイルが含まれていましたので、今回はローカルで動作させているXAMPPのドキュメントルートの下にそのまま解凍して配置しました。
 
展開されたファイルには「wp-admin」「wp-content」「wp-includes」と言う3つのディレクトリとHTMLファイルやPHPのファイルが含まれています。
 
今回のように「wordpress」と言うディレクトリの中にWordPressで使用するファイルを格納すると、作成したURLは「https://localhost/wordpress/」のような形式となります。
 

 

 

WordPressのインストール

①続いてインストールを行ないます。
ブラウザで「https://localhost/wordpress/」へアクセスして下さい。
(URLはWordPressのファイルを配置したWebサーバのURLやディレクトリに合わせて変更して下さい)。
 
②最初にアクセスすると「wp-config.phpが必要です」というメッセージが表示されます。
このファイルはWordPressの設定ファイルです。
手動で1から作成することもできますが、今回は画面上に表示されている「設定ファイルを作成する」と書かれたボタンを押して作成を行います。
 
③「設定ファイルを作成する」ボタンを押して下さい。
「wp-config.php」ファイルを作成するためのウィザードが開始されます。
 
wp2


④もしWordPressで使用するデータベースを準備していない場合は「WordPress推奨構成とMySQLデータベースの作成」を参考に必要な準備をしておいて下さい。
 
⑤準備が出来たら画面下部にある「さあ、始めましょう!」と書かれたボタンをクリックして下さい。
次のような画面が表示されます。
 
wp3


⑥事前に用意しておいた「データベース名」「ユーザー名」「パスワード」「ホスト名」を入力します。
(ご自分で作成したユーザー名やパスワードに合わせて変更して下さい)。
 

データベース名 : wordpress
ユーザー名 : ユーザー名
パスワード : パスワード
ホスト名 : localhost

 
⑦「テーブル接頭辞」というのが最後にあります。
WordPressではデータベース内に複数のテーブルを自動的に作成して利用するのですが、複数のWordPressをインストールする時に自動的に作成するテーブル名がバッティングしないようにWordPress毎にテーブル名の最初に付ける文字列を指定します。
最初のWordPressであればデフォルトのままの「wp_」のままで結構です(もちろん変更して頂いても構いません)。
 
⑧入力が終わりましたら画面下部にある「送信」ボタンを押して下さい。次のような画面が表示されます。
 
wp5


⑨上記のように「この部分のインストールは無事完了しました。
WordPress は現在データベースと通信できる状態にあります。
準備ができているなら…」と表示されれば、データベースの事前準備などが問題が無く”wp-config.php”が無事作成されたことを表しています。ここでエラーが出た場合は事前に作成したデータベースなどについて再度確認して下さい。
 
⑩では「インストール実行」と書かれたボタンを押して下さい。次のような画面が表示されます。
 
wp6


⑪作成するブログのタイトルである「サイトタイトル」、ブログの管理画面にログインする時に使用する「ユーザー名」「パスワード」「メールアドレス」を入力して下さい。
またブログを検索エンジンで検索されてもいい場合は「検索エンジンによるサイトのインデックスを許可する。」の左側にあるチェックボックスにチェックをして下さい。(サイトタイトルは後から変更できます)。
 

ユーザー名はデフォルトで「admin」となっていますが、デフォルトのままにしておくとセキュリティ的にあまり宜しくないと思われますので別の名前を設定されることをお勧めします。

 
入力が終わりましたら「WordPressをインストール」と書かれたボタンを押して下さい。
 
wp7


⑫次のように表示されればWordPressのインストールは無事完了です。
 
wp8


インストールの途中でエラーが出る場合は、PHPからMySQLが利用可能になっているかどうか、またApache経由でPHPが利用可能になっているかどうかなどを確認されてみて下さい。

【WordPressログイン・ログアウト】管理画面からのログアウト

07 6月 15
北川 哲平

No Comments

ここでは、利用が終わった後に管理画面からログアウトする方法について解説します。
 

管理画面からのログアウト

 
①管理画面の右上に表示されている「こんにちは、(ユーザー名)さん!」と書かれた箇所にマウスを合わせて下さい。
 
ユーザー名


②いくつかのリンクが表示されます。その中から「ログアウト」と書かれたリンクをクリックして下さい。
 
ログアウト


③ログイン画面が表示されてログアウトが完了です。
 
ログアウト

【WordPressログイン・ログアウト】管理画面へのログイン

07 6月 15
北川 哲平

No Comments

WordPressで各種設定を行ったり、記事を投稿する場合には管理画面にログインして行います。
ここではWordPressの管理画面にログインする方法について解説します。
 

管理画面へのログイン

 
①「https://サイトURL/wp-login.php」
にアクセスします。(例:https://honmaru.red/wp-login.php)
 
Googleトップ


②以下のログイン画面が表示されます。
 
ログイン画面


③「ユーザー名」と「パスワード」を入力します。
 
④「ログイン」ボタンを押します。
 
⑤以下のような管理画面(ダッシュボード)に切り替わります。
各種設定や投稿した記事の管理などはこのダッシュボードで行います。
 
ダッシュボード


これでログインは完了です。