Author Archives: %s

【コメント管理】コメントの投稿方法と投稿されたコメントの閲覧方法

15 6月 15
北川 哲平

No Comments

ホームページを閲覧した読者の方は記事に対してコメントを書き込みこむことができます。
ここではコメントを投稿するにはどのように行うのかを確認します。
また投稿されたコメントを管理者の方が閲覧する方法について解説します。

1.コメントの投稿方法と表示
2.投稿されたコメントの閲覧
3.コメントで使用可能なHTMLタグと属性

 

コメントの投稿方法と表示

①それではまず読者の立場でコメントをどのように行うのかを確認してみます。ホームページ画面を表示して下さい。

ブログ画面

②使用されているテンプレートによって表示のされ方は異なるのですが、
記事毎のどこかにコメントを投稿するためのリンク、またはコメント欄があります。
上記では「LEAVE A COMMENT」の部分となります。

③入力する項目は「Name」「E-mail」「Website」「Message」の4つです。
現在の設定では、全て入力が必須となっています。
(必須ではない設定にすることも可能です)。

入力項目

④入力が終わりましたら画面下部の「Send」ボタンをクリックして下さい。
コメントが投稿されます。

コメントの投稿

⑤投稿されたコメントはそのまま掲載される場合もありますし、承認されてはじめて掲載される場合もあります。
現在は承認なしですぐに表示される設定にしていたため、記事の下の方に投稿したコメントがすぐに表示されました。

表示確認

 

投稿されたコメントの閲覧

①次に管理者の立場でホームページに投稿されたコメントを閲覧する方法を確認します。

コメント閲覧

②管理画面にログインし、左側メニューの中の「コメント」メニューをクリックして下さい。

③「コメント」画面が表示されます。

コメント閲覧

④ここでは投稿されたコメントの一覧が表示されています。
ホームページ上に表示されているコメントだけではなく承認待ちのコメントも合わせて表示されます。
またコメントにマウスを合わせて頂くと次のようなメニューが表示されます。

コメント閲覧

各メニューの使い方は次のページ以降で順に確認していきます。

⑤また記事一覧の画面でも記事毎にコメントがいくつ投稿されているのかを確認することができます。
管理画面の「投稿」メニューから「投稿一覧」メニューをクリックして下さい。「投稿」画面を表示されます。

投稿一覧

⑥投稿一覧の次の列がコメントに関する情報です。
コメントが投稿されている記事はコメントの数が表示されます。

投稿一覧

このように投稿されたコメントの詳細は「コメント」画面で確認することができる他に、
記事一覧の画面で記事毎のコメント数を確認することができます。

 

コメントで使用可能なHTMLタグと属性

コメント欄にはテキストだけでなくいくつかのHTMLタグと属性を使用することができます。

<a href=”” title=””> <abbr title=””> <acronym title=””> <b> <blockquote cite=””> <cite> <code> <del datetime=””> <em> <i> <q cite=””> <strike> <strong>

①では試してみます。下記ではコメント欄の中で <a href=”” title=””> と <strong> を使ってみました。

タグの利用

②コメントを送信し、その後で記事に表示されたコメントを見てみると
コメント欄に記述したHTMLタグが反映されていることが確認できます。
コメントに記載されたリンクはクリックすればリンク先に移動します。

リンク

なお、コメント欄の中にリンクが指定数以上記載されている場合、管理人の承認を必要とするという設定にすることが可能です。

【カテゴリーとタグの設定】カテゴリーからタグ、タグからカテゴリーへの変換(Categories to Tags Converter Importer)

15 6月 15
北川 哲平

No Comments

作成済のカテゴリーをタグに一括変換したり、逆に作成済のタグをカテゴリーに一括変換する方法について解説します。
WordPressで用意されている変換ツールを使用します。
 
1.変換ツールのインポート
2.カテゴリーをタグに変換
3.タグをカテゴリーに変換

 

 

変換ツールのインポート

 
①カテゴリーとタグの変換を行うにはまず変換ツール(プラグイン)をインポートします。
「ツール」メニューの中にある「インポート」メニューをクリックして下さい。
 
インポート


②「インポート」画面が表示されます。
 
インポート画面


③いくつかのツールが表示されています。この中の「カテゴリーとタグの変換ツール」と書かれたリンクをクリックして下さい。
 
カテゴリーとタグの変換ツール


④画面に「注意: このプラグインは現在使用している WordPress のバージョンではテストされていません。」と表示されます。
現在のバージョンで動作するかどうかは保証されませんがそれをご了承頂いた上で使用してみたい場合には「いますぐインストール」と書かれたところをクリックして下さい。
 
いますぐインストール


⑤次のような画面が表示されたらプラグインのインストールは完了しています。
 
インストール完了


⑥続いてプラグインを有効化します。
管理画面の「プラグイン」メニューの中にある「インストール済みプラグイン」メニューをクリックして下さい。
 
インストール済みプラグイン


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


⑧表示されているプラグインの中から「Categories to Tags Converter Importer」の箇所に表示されている「有効化」と書かれたリンクをクリックして下さい。
 
有効化


⑨プラグインの有効化が完了しました。
 
有効化完了


これで準備は完了です。
 

 

 

カテゴリーをタグに変換

 
①まずはカテゴリーをタグに変換してみます。
指定したカテゴリーをタグに変換すると、そのカテゴリーが設定されていた記事からカテゴリーが削除され、
代わりに削除されたカテゴリーと同じ名前のタグが同じ記事に対して設定されます。
 
②管理画面の「ツール」メニューの中にある「インポート」メニューをクリックして下さい。
 
インポート


③「インポート」画面が表示されます。「Categories and Tags Converter」をクリックして下さい。
 
インポート画面


次のような画面が表示されます。
 
インポート画面


④画面上では「カテゴリー (xx) をタグに変換します。」のように表示されていると思いますが、
もし「タグ (xx) をカテゴリーに変換します。」のように表示されている場合は、画面上部の「カテゴリーをタグに変換」ボタンを押して下さい。
 
⑤作成済のカテゴリー一覧が表示されていますので、タグに変換したいカテゴリーにチェックを入れて下さい。
今回は「レビュー」と「買い物」にチェックをしました。
 
チェック


⑥チェックが終わったら画面左下の「カテゴリーをタグに変換」ボタンをクリックして下さい。
 
カテゴリーをタグに変換


⑦先ほどチェックした「レビュー」と「買い物」カテゴリーがタグへ変換されました。
 
変換完了


⑧では確認してみます。「投稿」メニューの中の「投稿一覧」メニューをクリックして下さい。
「投稿」画面が表示されます。カテゴリーからタグへの変換前は次のように表示されていました。
 
表示確認


⑨カテゴリーからタグへ変換後に改めて確認してみると次のように「レビュー」カテゴリーが「レビュー」タグに変換されています。
 
カテゴリーとタグの変換


 

 

 

タグをカテゴリーに変換

 
①次にタグをカテゴリーに変換してみます。
先ほどと同じように「Categories and Tags Converter」の画面を表示して下さい。
 
画面


②画面上部の「タグをカテゴリーに変換」ボタンをクリックして下さい。
 
タグをカテゴリーに変換


③次のように「タグ (xx) をカテゴリーに変換します。」と表示されます。
 
変換開始


④作成済のタグ一覧が表示されていますので、カテゴリーに変換したいタグにチェックを入れて下さい。
今回は「レビュー」と「買い物」にチェックをしました。
 
チェック


チェック


⑤チェックが終わったら画面左下の「タグをカテゴリーに変換」ボタンをクリックして下さい。
 
タグをカテゴリーに変換


⑥先ほどチェックした「レビュー」と「買い物」タグがカテゴリーへ変換されました。
 
変換完了


⑦では確認してみます。「投稿」メニューの中の「投稿一覧」メニューをクリックして下さい。
「投稿」画面が表示されます。
一度「レビュー」タグに変換されていた「レビュー」カテゴリーが、再び「レビュー」カテゴリーになっていることが確認できます。
 
表示確認


このように指定したカテゴリーをタグに変換したり、逆にタグをカテゴリーに変換することができます。

【カテゴリーとタグの設定】タグ別アーカイブの表示

15 6月 15
北川 哲平

No Comments

記事にタグを設定しておくと、同じタグが設定された記事だけを表示することができます。
このような同じタグが設定された記事一覧のことをタグ別アーカイブと呼びます。
ここではタグ別アーカイブの表示方法などについて解説します。
 
1.タグ別アーカイブの表示
2.記事からタグを指定

 

 

タグ別アーカイブの表示

 
①タグ別アーカイブがどのように表示されるのかを確認します。ホームページのサイドバーを見て下さい。
 
サイドバー


②タグクラウドが表示させるように設定されている場合、記事に設定されているタグが表示されています。
(タグクラウドを表示させる方法は「タグクラウドウィジェットの設定」を参照されて下さい。)
 
タグクラウドウィジェット


③タグクラウドに表示されているタグの名前をクリックすると、そのタグが設定されている記事の一覧が表示されます。
例として「ビジネス」と書かれたリンクをクリックします。すると次のように「ビジネス」タグが設定された記事の一覧が表示されます。
 
ビジネスタグ


④指定した名前のタグが付けられた記事一覧のことをタグ別アーカイブと呼びます。
このように同じタグが付けられた記事一覧を簡単に確認することができます。
 

 

 

記事からタグを指定

 
先ほどはサイドバーに表示されたタグの名前をクリックすることでタグ別アーカイブを表示しました。
それ以外にもホームページの各記事に表示されているタグ名をクリックすることでタグ別アーカイブを表示することができます。
 
①それではホームーページを表示して下さい。
 
ホームページの表示


ホームページの表示


②記事にタグが設定されていると、表示された記事のいずれかに設定されているタグの名前が表示されています。
 
名前の表示


③このタグの名前に設定されているリンクをクリックするとタグ別アーカイブが表示されます。
 
別アーカイブ


このようにホームページで公開されている記事を見ている時に、同じタグが設定された記事の一覧を見たくなった場合にも、簡単に同じタグが設定された記事一覧を見ることができます。

【カテゴリーとタグの設定】タグクラウドウィジェットの設定

15 6月 15
北川 哲平

No Comments

タグクラウドウィジェットを使ってホームページのサイドバーに記事に設定されているタグを表示する方法について解説します。
タグクラウドではタグを表示するだけではなくカテゴリーを対象としてタグクラウドを表示することもできます。
 
1.タグクラウドウィジェットの表示
2.タグクラウドウィジェットの設定

 

 

タグクラウドウィジェットの表示

 
カテゴリーウィジェットはデフォルトで表示されるように設定されていますが、タグクラウドウィジェットはデフォルトでは表示されるように設定されていません。
そこでまずはタグクラウドウィジェットを表示するように設定します。
 
①管理画面の「外観」メニューの中にある「ウィジェット」メニューをクリックして下さい。
 
ウィジェット


②「ウィジェット」画面が表示されます。
 
ウィジェット画面


③「利用できるウィジェット」の中に「タグクラウド」があります。
これをドラッグアンドドロップで右側の「メインサイドバー」のところへ移動させて下さい。
(ドロップする場所は任意です。ホームページを表示した時にドロップしたところにタグクラウドが表示されます)。
 
タグクラウド


タグクラウド移動


④メインサイドバーの中に「タグクラウド」が表示されます。
 
タグクラウド反映


⑤それではホームページを表示してみます。
するとサイドバーにタグクラウドが表示されていることが確認できます。
 
タグクラウド表示


⑥タグクラウドはホームページの中で使われているタグが順に表示されているものですが、
使用されている頻度が高いタグは大きいフォントで目立つように表示されています。
 
頻度


⑦タグクラウドを表示することで、このホームページではどのようなキーワードの記事があり、
そしてどんなキーワードがよく使われているのかを直観的に表現することができます。
 

 

 

タグクラウドウィジェットの設定

 
①先ほどはタグクラウドウィジェットを追加した時に何も設定を行いませんでしたが、
いくつか設定項目が用意されています。タグクラウドウィジェットの設定を行うには、
「ウィジェット」の画面にてタグクラウドウィジェットの右側に表示されている▼マークをクリックして下さい。
 
▼マーク


②タグクラウドウィジェットに関する設定項目が表示されます。
 
設定項目


③まずは「タイトル」を設定してみます。
「タイトル」はサイドバーに表示されたタグクラウドの上に表示されるものです。
デフォルトでは「タグ」と表示されています。
 
サイドバータイトル


④「タイトル」を任意のテキストに変更したい場合は、タグクラウドウィジェットの設定画面で「タイトル」の下のテキストボックスにタイトルに設定したいテキストを入力して下さい。
入力が終わりましたら「保存」ボタンをクリックすると反映されます。
 
保存


⑤改めてホームページを表示してみると、先ほど設定したテキストがタイトルとして表示されていることが確認できます。
 
表示


⑥次は「分類」の設定です。
デフォルトではタグクラウドで表示される対象は「タグ」となっていますが「カテゴリー」に変更することができます。
「分類」を変更したい場合は、タグクラウドウィジェットの設定画面で「分類」の下のドロップダウンメニューをクリックし、
表示されたメニューの中から「カテゴリー」を選択して下さい。
選択が終わりましたら「保存」ボタンをクリックすると反映されます。
 
保存


⑦改めてホームページを表示してみるとタグではなくカテゴリーの名前がタグクラウドで表示されています。
 
タグクラウド

【カテゴリーとタグの設定】タグの編集と削除

15 6月 15
北川 哲平

No Comments

作成済みのタグを編集及び削除する方法について解説します。
また既に記事に設定されていたタグを変更した場合、そして記事に設定済のタグを削除した場合にどのような影響があるのかついても確認します。
 
1.タグの編集
2.記事に設定されていたタグへの影響
3.タグの削除
4.記事に設定されていたタグが削除された場合の挙動

 

 

タグの編集

 
①作成済のタグを編集するには、「投稿」メニューの中にある「タグ」メニューをクリックして下さい。
 
タグメニュー


②「タグ」画面が表示されます。
 
タグ画面


③タグを編集する場合には編集を行いたいタグにマウスを合わせて下さい。
次のようなメニューが表示されます。表示されたメニューの中の「編集」と書かれたリンクをクリックして下さい。
 
編集


④「タグの編集」画面が表示されます。
 
タグの編集


⑤編集可能な項目は新規にタグを作成した時に入力した項目と同じです。
必要な箇所を修正して頂き、画面下部に表示されている「更新」ボタンをクリックして下さい。
今回は「スラッグ」を編集しました。
 
スラッグ


⑥タグに関する修正が反映されました。
 
修正反映


⑦画面右側に表示されているタグ一覧も編集した内容が反映されています。
 

 

 

記事に設定されていたタグへの影響

 
タグが修正されると、そのタグが設定されていた記事にも自動的に反映されます。
例えば「パンケーキ」というタグが設定されている記事があったとして、
「パンケーキ」というタグの名前を「ケーキ」に変更すると、先ほどの記事に設定されていたタグも「ケーキ」に変わります。
 
①それでは実際に試してみます。下記の記事には「パンケーキ」というタグが設定されています。
 
パンケーキ


②タグの編集を行い、「パンケーキ」タグの名前を「ケーキ」に変更します。
 
ケーキ


③タグの名前を変更後に先ほどと同じ記事を閲覧してみると、
記事に設定されていたタグが自動的に「ケーキ」に変更されていることが確認できます。
 
ケーキに変更


このようにタグの名前を変更した場合には自動的に記事にも反映されます。
 

 

 

タグの削除

 
①次にタグを削除してみます。編集の時と同じく「タグ」画面を表示して下さい。
 
タグ画面


②削除を行うタグにマウスを合わせて下さい。
次のようなメニューが表示されます。
表示されたメニューの中から「削除」と書かれたリンクをクリックして下さい。
 
削除


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


④タグが削除されました。
 
削除


⑤画面右側のタグ一覧にも表示されていないことが確認できます。
記事を削除した場合と違い、タグにはゴミ箱に相当する機能はありませんのでご注意ください。
 

 

 

記事に設定されていたタグが削除された場合の挙動

 

カテゴリーの場合と異なり、タグは記事に最低でも1つ設定される必要はありません。
その為、タグが削除された場合には記事に設定されていたタグが削除されるだけです。
 
削除


記事に設定されていたタグが削除されたので、タグが何も設定されていない状態となっています。

【カテゴリーとタグの設定】新規タグの作成

15 6月 15
北川 哲平

No Comments

記事に設定するタブを作成する方法について解説します。
タブはあらかじめ作成しておく方法と記事を作成する時に合わせて作成する方法があります。
なおWordPressではカテゴリーとタブがありますが、カテゴリーは主に同じような記事を分類するために使われることが多いのに対してタブは記事の中で使われている重要なキーワードを分かるように使います。
 
1.タグの作成
2.記事作成時にタグも同時に作成

 

 

タグの作成

 
①管理画面の「投稿」メニューの中にある「タグ」メニューをクリックして下さい。
 
タグメニュー


②「タグ」画面が表示されます。
 
タグ画面


③画面右側に作成済のタグ一覧が表示されます。
タグにはカテゴリーの記事毎に必ず一つタグ設定されるといったルールはありません。
その為、デフォルトタグというものは存在しません。
 
新規にタグを追加するには画面左側のテキストボックスに入力を行います。
 
テキストボックス


④「名前」にはタグ名を入力します。
記事にタグを設定した場合、ホームページを表示した時にここで入力したタグの名前が表示されます。
 
⑤「スラッグ」は記事をデフォルトではないパーマリンク形式で表示する場合や、タグ一覧のページを表示する場合などにURLの一部として使用されます。
日本語でも指定は可能ですがURLの一部で使用される場合があるので、半角英数とハイフンだけを使って指定することをお勧めします。
 
⑥入力が終わりましたら画面下部にある「新規タグを追加」ボタンをクリックして下さい。
 
新規タグを追加


⑦タグが新しく作成されました。作成されたタグは画面右側のタグ一覧の中に表示されます。
 
タグ一覧


作成したタグを記事を作成する時に指定することができます。タグを記事に指定する方法については『タグの設定』をご覧下さい。
 

 

 

記事作成時にタグも同時に作成

 
先ほどはあらかじめタグを作成しておく方法をご紹介しましたが、
記事を新規に作成する時に記事に設定したいタグを同時に作成することもできます。
タグは複数の記事で同じタグを設定できますが、利用の仕方として記事毎に都度設定することが多いものなので、あらかじめ作っておくよりも記事作成時に合わせてタグを作成するといった利用の方が多いかと思います。
 
①記事の新規作成画面を表示して下さい。
 
新規作成画面


②右サイドバーにタグを設定するブロックがあります。
タグを作成するにはテキストボックスにタグの名前を入力して下さい。
入力が終わりましたら「追加」ボタンをクリックして下さい。
 
追加ボタン


③新しいタグが作成され記事に追加されます。追加されたタブはテキストボックスの下に表示されます。
 
テキストボックス下


このように記事を作成する時に合わせてタグを作成する方法は便利なのですが注意点もあります。
あらかじめタグを作成する場合は「スラッグ」を指定できるのですが、記事と同時に作成する場合はスラッグを指定する箇所がなくタグの名前に入力した値が自動的にスラッグにも設定されます。
 
「投稿」メニューの中にある「タグ」メニューをクリックし「タグ」画面を表示してみると、
先ほど作成したカテゴリーのタグが名前と同じ値になっていることが確認できます。
 
タグの値


スラッグは日本語でも問題ありませんが、URLの一部にも使われます。
必要であればあとからタグを編集し、スラッグを半角英数の値で設定して下さい。

【カテゴリーとタグの設定】デフォルトカテゴリーの設定

15 6月 15
北川 哲平

No Comments

WordPressにはデフォルトカテゴリーと呼ばれるカテゴリーがあります。
デフォルトカテゴリーは自動で作成されており名前は「未分類」となっています。
ここではデフォルトカテゴリーがどのように使用されるのかについて解説します。
 
1.デフォルトカテゴリーの確認
2.記事作成時にデフォルトカテゴリーが自動で設定されることの確認
3.デフォルトカテゴリーの名前の変更

 

 

デフォルトカテゴリーの確認

 
①最初にカテゴリー一覧のページを表示し、デフォルトカテゴリーが作成されていることを確認してみます。
管理画面の「投稿」メニューの中にある「カテゴリー」メニューをクリックして下さい。「カテゴリー」画面が表示されます。
 
カテゴリー


②「名前」が「未分類」となっているカテゴリーがデフォルトカテゴリーです。
 
デフォルトカテゴリー


③デフォルトカテゴリーの「名前」は変更することができますが削除することはできません。
その為、デフォルトカテゴリーにマウスを合わせても、他のカテゴリーと異なり「削除」メニューが表示されません。
 
削除メニュー


④このようにデフォルトカテゴリーはホームページを作成時に自動で作成されており削除することができません。
 

 

 

記事作成時にデフォルトカテゴリーが自動で設定されることの確認

 
WordPressでは記事に必ず一つカテゴリーが設定されます。
記事作成時に何もカテゴリーを指定しなかった場合は、自動的にデフォルトカテゴリーが設定されます。
 
①実際に記事を一つ作成してみます。
 
記事の作成


②カテゴリーを設定するところを見て頂くと、自分で作成したカテゴリーの他にデフォルトカテゴリーも表示されています。
他のカテゴリーと同様にデフォルトカテゴリーを明示的に設定することもできます。
 
明示的設定


③今回はカテゴリーを何も設定せずに公開してみます。
公開が終わりましたら「投稿」メニューの中の「投稿一覧」メニューをクリックして下さい。「投稿」画面が表示されます。
 
投稿


④先ほど公開した記事のカテゴリーのところを見て頂くと、
カテゴリーは何も設定していなかったので自動的にデフォルトカテゴリーである「未分類」が設定されていることが確認できます。
 
未分類


このように記事を新規作成した時にカテゴリーを設定しなかった場合には自動的にデフォルトカテゴリーが設定されます。
 
なお、例えばデフォルトではないカテゴリーが設定されていた記事に対して、あとからカテゴリー全て削除した場合も自動的にデフォルトカテゴリーが設定されます。
詳しくは「カテゴリーの編集と削除」をご参照下さい。
 

 

 

デフォルトカテゴリーの名前の変更

 
①デフォルトカテゴリーを削除することはできませんが「名前」を変更することはできます。
デフォルトでは「未分類」となっていますが、例えば「その他」や「雑談」などのように名前を変更しておくと、
カテゴリーを設定しなかった記事に「その他」というデフォルトカテゴリーが自動的に設定されます。
 
①「名前」を変更する手順は他のカテゴリーと同じです。
管理画面の「投稿」メニューの中にある「カテゴリー」メニューをクリックして下さい。
「カテゴリー」画面が表示されます。
 
カテゴリー


②デフォルトカテゴリーにマウスを合わせて頂くと次のようなメニューが表示されますので「編集」メニューをクリックして下さい。
 
編集


③「カテゴリーの編集」画面が表示されます。
 
カテゴリーの編集


④今回は「名前」を「その他」に、「スラッグ」を「other」に変更してみます。
変更が終わりましたら画面左下の「更新」ボタンをクリックして下さい。
 
更新


⑤デフォルトカテゴリーの「名前」が「その他」に変更されました。
 
その他


このようにデフォルトカテゴリーは削除することはできませんが「名前」を変更することはできます。
自動で設定されるカテゴリーですので「名前」をうまく設定することでより便利に使用することができます。

【カテゴリーとタグの設定】カテゴリーウィジェットの設定

15 6月 15
北川 哲平

No Comments

サイドバーに表示されているカテゴリーウィジェットのタイトルを表示したり表示方法を変更する方法について解説します。
 
1.カテゴリーウィジェットの設定画面
2.タイトルの設定
3.ドロップダウンメニュー形式でカテゴリー名を表示
4.カテゴリーが設定された投稿数を合わせて表示
5.子カテゴリーを階層で表示

 

 

カテゴリーウィジェットの設定画面

 
カテゴリーウィジェットが表示されるように設定されていると、ホームページを表示した時にサイドバーに作成済のカテゴリーの名前が一覧で表示されます。
(カテゴリーウィジェットはデフォルトで表示されるように設定されています)。
 
サイドバー表示


①カテゴリーウィジェットの設定を行うには、管理画面の「外観」メニューの中にある「ウィジェット」メニューをクリックして下さい。
 
ウィジェットメニュー


②「ウィジェット」ページが表示されます。
 
ウィジェット


③「メインサイドバー」のところに「カテゴリー」ウィジェットが表示されていると思います。
右側に表示されている▼マークをクリックして下さい。カテゴリーウィジェットに関する設定項目が表示されます。
 
▼マーク


④設定可能な項目としてタイトルやサイドバーに表示される内容に関して設定できます。それでは順に試してみます。
 

 

 

タイトルの設定

 
「タイトル」はサイドバーに表示されたカテゴリーの名前一覧の上に表示されるものです。
デフォルトでは「カテゴリー」と表示されています。
 
カテゴリー


①「タイトル」を任意のテキストに変更したい場合は、カテゴリーウィジェットの設定画面で「タイトル」の下のテキストボックスにタイトルに設定したいテキストを入力して下さい。
入力が終わりましたら「保存」ボタンをクリックすると反映されます。
 
保存ボタン


②改めてホームページを表示してみると先ほど設定したテキストがタイトルとして表示されていることが確認できます。
 
タイトル表示


 

 

 

ドロップダウンメニュー形式でカテゴリー名を表示

 
①カテゴリー名をリスト形式ではなくドロップダウンメニュー形式で表示させるには、カテゴリーウィジェットの設定画面で「ドロップダウン」にチェックをして下さい。
「保存」ボタンをクリックすると反映されます。

ドロップダウン表示


②ホームページを表示して確認してみると、カテゴリーの名前をリスト形式で表示するのではなく、ドロップダウンメニュー形式で表示されています。
 
ドロップダウンメニュー形式


③ドロップダウンメニューをクリックするとカテゴリーを選択することができます。
 
カテゴリー選択


 

 

 

カテゴリーが設定された投稿数を合わせて表示

 
①デフォルトではカテゴリーの名前だけが表示されていますが、名前と一緒にカテゴリーが設定済の記事数を合わせて表示することができます。
表示させるにはカテゴリーウィジェットの設定画面で「投稿数を表示」にチェックをして下さい。
「保存」ボタンをクリックすると反映されます。
 
保存


②ホームページを表示して確認してみると、カテゴリーの名前の右側にカテゴリーが設定された記事数が一緒に表示されています。
 
記事数表示


 

 

 

子カテゴリーを階層で表示

 
WordPressではカテゴリーに親カテゴリーを設定することができます。
デフォルトでは子カテゴリーであっても特別表示方法を変えていませんが、親と子の関係が分かるように階層構造で表示させることができます。
 
①表示させるにはカテゴリーウィジェットの設定画面で「階層を表示」にチェックをして下さい。
「保存」ボタンをクリックすると反映されます。
 
保存


②ホームページを表示して確認してみると、子カテゴリーや孫カテゴリーにはインデントが設定されてカテゴリーの親子関係が分かるように表示されています。

【カテゴリーとタグの設定】カテゴリー別アーカイブの表示

15 6月 15
北川 哲平

No Comments

記事にカテゴリーを設定しておくと、同じカテゴリーが設定された記事だけを表示することができます。
このような同じカテゴリーが設定された記事一覧のことをカテゴリー別アーカイブと呼びます。
ここではカテゴリー別アーカイブの表示方法などについて解説します。
 
1.カテゴリー別アーカイブの表示
2.記事からカテゴリーを指定

 

 

カテゴリー別アーカイブの表示

 
①カテゴリー別アーカイブがどのように表示されるのかを確認します。ホームページのサイドバーを見て下さい。
 
カテゴリー別アーカイブ


②作成済のカテゴリーの名前が表示されています。
 
カテゴリー名


③表示されているカテゴリーの名前をクリックすると、そのカテゴリーが設定されている記事の一覧が表示されます。
例として「レビュー」と書かれたリンクをクリックします。
すると次のように「レビュー」カテゴリーが設定された記事の一覧が表示されます。
 
レビュー


指定した名前のカテゴリーが付けられた記事一覧のことをカテゴリー別アーカイブと呼びます。
 
このように作成した記事に適切なカテゴリーを付けておけば、ホームページを閲覧している人が同じ話題を扱う記事の一覧を簡単にまとめて閲覧することができます。
 

 

 

記事からカテゴリーを指定

 
先ほどはサイドバーに表示されたカテゴリーの名前をクリックすることでカテゴリー別アーカイブを表示しました。
それ以外にもホームページの各記事に表示されているカテゴリー名をクリックすることでカテゴリー別アーカイブを表示することができます。
 
①それではホームページを表示して下さい。
 
ホームページ表示


②記事にカテゴリーが設定されていると、表示された記事のいずれかに設定されているカテゴリーの名前が表示されています。
 
カテゴリー名


③このカテゴリーの名前に設定されているリンクをクリックするとカテゴリー別アーカイブが表示されます。
 
カテゴリー別アーカイブ


このように、ホームページで公開されている記事を見ている時に同じカテゴリーが設定された記事の一覧を見たくなった場合にも、簡単に同じカテゴリーが設定された記事一覧を見ることができます。

【カテゴリーとタグの設定】親カテゴリーと子カテゴリー

15 6月 15
北川 哲平

No Comments

WordPressではカテゴリーを階層構造にすることができます。
親となるカテゴリーを作成し、その親に対する子カテゴリーを作成することができます。
例えば親カテゴリーとして「レビュー」カテゴリーを作成し、その下に子カテゴリーとして「映画」カテゴリーや「書籍」カテゴリーなどを作成することができます。
ここでは親カテゴリーと子カテゴリーの作成方法について解説します。
 
1.親カテゴリーを持つカテゴリーを作成
2.孫カテゴリーの作成
3.作成する記事に子カテゴリーを設定

 

 

親カテゴリーを持つカテゴリーを作成

①「投稿」メニューの中にある「カテゴリー」メニューをクリックして下さい。
 
カテゴリー


②「カテゴリー」画面が表示されます。
 
カテゴリー画面


③例として「レビュー」カテゴリを親に持つ「映画」カテゴリーを作成します。
「名前」と「スラッグ」を入力してから「親」と書かれたドロップダウンメニューをクリックして下さい。
 
ドロップダウンメニュー


④作成するカテゴリーの「親」カテゴリーを選択します。
今回は「レビュー」を選択しました。
(なお「親」が無いカテゴリーの場合は「なし」を選択して下さい)。
 
親カテゴリー


③画面下部にある「新規カテゴリーを追加」ボタンを押して下さい。
カテゴリーが作成され、画面右側のカテゴリー一覧に次のように表示されます。
 
新規カテゴリーの追加


④親カテゴリーを持つ子カテゴリーは、親カテゴリーの下に表示されます。
今回であれば「映画」カテゴリーの親カテゴリーは「レビュー」カテゴリーですので、「レビュー」カテゴリーの下に表示されています。
また親カテゴリーがあるカテゴリーはカテゴリー一覧で表示した時に名前の先頭に「-」が自動的に付けられます。
(あくまでカテゴリー一覧で見た場合だけです)。
 
カテゴリー一覧


⑤では同じように「レビュー」カテゴリーを親に持つ「書籍」カテゴリーも作成します。
 
書籍カテゴリー


⑥このように1つの親カテゴリーの下に複数の子カテゴリーを作成することができます。
 

 

 

孫カテゴリーの作成

 
①より階層を深く、子カテゴリーを親カテゴリーとするような子カテゴリーを作成することもできます。
先ほど「レビュー」カテゴリーを親に持つ「映画」カテゴリーを作成しましたが、今度は「映画」カテゴリーを親に持つ「邦画」カテゴリーを作成してみます。
 
②新規カテゴリーの作成画面で「名前」と「スラッグ」を入力してから「親」と書かれたドロップダウンリストをクリックして下さい。
 
ドロップダウンリスト


③表示されたカテゴリーの中で「映画」や「書籍」カテゴリーは別のカテゴリーを親に持つ子カテゴリーです。
インデントされていることでいずれかの親カテゴリー持つ子カテゴリーであることが分かります。
 
④今回作成するカテゴリーの親カテゴリーとして「映画」を選択しました。
 
映画カテゴリー


⑤画面下部にある「新規カテゴリーを追加」ボタンを押して下さい。
カテゴリーが作成され、画面右側のカテゴリー一覧に次のように表示されます。
 
新規カテゴリーを追加


⑥親カテゴリーを持つ子カテゴリーを親に持つような子カテゴリーは、カテゴリー一覧で表示した時に名前の先頭に「--」が自動的に付けられています。
多段にしていくとこのように階層の分だけ「-」が自動的に付けられていきます。
 
このようにWordPressではカテゴリーの階層を多段にすることができます。
 

 

 

作成する記事に子カテゴリーを設定

 
①新しい記事を作成する時にカテゴリーを設定することができますが、
子カテゴリーや孫カテゴリーは次のように階層構造で表示されるため、どのカテゴリーの子カテゴリーなのか判別することができます。
 
子カテゴリー


②今回は「邦画」カテゴリーを設定しました。
 
邦画カテゴリー


③それでは記事を公開しホームページでどのように表示されるのかを確認してみます。
 
カテゴリー確認


④記事にはカテゴリ名が表示されていますが、子カテゴリや孫カテゴリであってもホームページに表示される形式は変わりがありません。
 
他のカテゴリーを親カテゴリーに持つ子カテゴリーや孫カテゴリーの作成方法について解説しました。
タグと違いカテゴリーは階層構造にできるので適度な階層を持たせることで、カテゴリーを使った記事の分類が分かりやすくなるかと思います。

【カテゴリーとタグの設定】カテゴリーの編集と削除

15 6月 15
北川 哲平

No Comments

作成済みのカテゴリーを編集及び削除する方法について解説します。
また既に記事に設定されていたカテゴリーを変更した場合、
そして記事に設定済のカテゴリーを削除した場合にどのような影響があるのかついても確認します。
 
1.カテゴリーの編集
2.記事に設定されていたカテゴリーへの影響
3.カテゴリーの削除
4.記事に設定されていたカテゴリーが削除された場合の挙動

 

 

カテゴリーの編集

 
①作成済のカテゴリを編集するには、「投稿」メニューの中にある「カテゴリー」メニューをクリックして下さい。
 
カテゴリーメニュー


②「カテゴリー」画面が表示されます。
 
カテゴリー


③カテゴリーを編集するには、編集したいカテゴリーにマウスを合わせて下さい。
次のようなメニューが表示されますので、その中の「編集」と書かれたリンクをクリックして下さい。
 
編集


④「カテゴリーの編集」画面が表示されます。
 
カテゴリーの編集


⑤編集可能な項目は新規にカテゴリーを作成した時に入力した項目と同じです。
必要な箇所を修正して頂き、画面下部に表示されている「更新」ボタンをクリックして下さい。
今回は「名前」と「スラッグ」を編集しました。
 
更新


⑥カテゴリーに関する修正が反映されました。
 
反映完了


 

 

 

記事に設定されていたカテゴリーへの影響

 
カテゴリーが修正されると、そのカテゴリーが設定されていた記事にも自動的に反映されます。
例えば元々「A」というカテゴリーが記事に設定されている状態で「A」カテゴリーを「B」カテゴリーに変更すると、
記事に設定されているカテゴリーは変更後の「B」に自動的に変わります。
 
①先ほど「外出」カテゴリーを「散歩」カテゴリーに変更しました。変更前に「外出」カテゴリーが設定されていた記事をみると、次のように記事に設定されているカテゴリー名が表示されていました。
 
カテゴリー変更


②カテゴリー変更後に同じ記事を表示してみると表示されているカテゴリー名も自動的に変更されています。
 
カテゴリー名変更


③このようにカテゴリーの名前を変更した場合には自動的に記事にも反映されます。
 

 

 

カテゴリーの削除

 
①次にカテゴリーを削除してみます。編集の時と同じく「カテゴリー」画面を表示して下さい。
 
カテゴリー


②削除したいカテゴリーにマウスを合わせて下さい。
次のようなメニューが表示されますので、その中の「削除」と書かれたリンクをクリックして下さい。
 
削除


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


④カテゴリーが削除されました。
 
カテゴリー削除


⑤画面右側のカテゴリー一覧にも表示されていないことが確認できます。
記事を削除した場合と違い、カテゴリーにはゴミ箱に相当する機能はありませんのでご注意ください。
 

 

記事に設定されていたカテゴリーが削除された場合の挙動

 
記事に設定されているカテゴリーが削除された場合、その記事のカテゴリーがどうなるのかは2つのパターンがあります。
 
1つ目は複数のカテゴリーが記事に設定されていて、その中の1つだけが削除された場合です。
この場合は単にカテゴリーが1つ削除されるだけとなります。
 
カテゴリー削除1パターン目


2つ目は1つのカテゴリーだけが記事に設定されていて、そのカテゴリーが削除された場合です。この場合はデフォルトのカテゴリーが代わりに設定されます。
 
カテゴリー削除2パターン目


このようにカテゴリーの削除によって記事に対して設定されていたカテゴリーがなくなってしまった場合でも
自動的にデフォルトのカテゴリーが設定されるため、記事も同時に削除されてしまったりとか、
カテゴリーが1つも設定されていない記事になってしまうということはありません。
(デフォルトのカテゴリーについては「デフォルトカテゴリーの設定」を参照して下さい)。

【カテゴリーとタグの設定】新規カテゴリーの作成

15 6月 15
北川 哲平

No Comments

記事に設定するカテゴリーを新規に作成する方法を解説します。
カテゴリーはあらかじめ作成しておく方法と、記事作成の時にあわせて作成する方法があります。
 
1.カテゴリーの作成
2.記事作成時にカテゴリーも同時に作成

 

 

カテゴリーの作成

 
①カテゴリーを作成するには管理画面の「投稿」メニューの中にある「カテゴリー」メニューをクリックして下さい。
 
カテゴリー


②「カテゴリー」画面が表示されます。
 
カテゴリー画面


③画面右側に作成済みのカテゴリー一覧が表示されます。
カテゴリーの中で「Lifespan経営塾」「Reクリエイト(株)」などは自分で作成したカテゴリーで「未分類」はデフォルトカテゴリーと呼ばれる特殊なカテゴリーです。
別のページで詳しく解説しますが、記事を作成する時にカテゴリーを指定しなかった場合はデフォルトカテゴリーが自動的に設定されます。
 
デフォルトカテゴリー


デフォルトカテゴリー


④新規にカテゴリーを追加するには画面左側のテキストボックスに入力を行います。
 
テキストボックス


⑤「名前」にはカテゴリー名を入力します。
ホームページを表示した時に記事にカテゴリーが設定されていると、ここで入力した名前が表示されます。
 
⑥「スラッグ」は記事をデフォルトではないパーマリンク形式で表示する場合や、
カテゴリ一覧のページを表示する場合などにURLの一部として使用されます。
日本語でも指定は可能ですがURLの一部で使用される場合があるので半角英数とハイフンだけを使って指定することをお勧めします。
 

パーマリンクについては「パーマリンクの設定」を御参照下さい。

カテゴリーは階層構造を持つことができます。例えば「レビュー」カテゴリーを親カテゴリーとして作成し、
その下に「本」カテゴリーと「映画」カテゴリーをそれぞれ子カテゴリーとして作成することができます。
新しく作成するカテゴリーをいずれかのカテゴリーの子カテゴリーとして作成する場合は、
ドロップダウンメニューから「親」カテゴリーを選択して下さい(作成済のカテゴリーから選択します)。
「親」を持たないカテゴリーの場合は「なし」を選択します。
 
親なし

親カテゴリーについて詳しくは「親カテゴリーと子カテゴリー」を御参照下さい。

「説明」はカテゴリーの説明です。
 
⑦入力が終わりましたら画面下部にある「新規カテゴリーを追加」ボタンをクリックして下さい。
 
新規カテゴリーを追加


⑧カテゴリーが新しく作成されました。作成されたカテゴリーは画面右側のカテゴリー一覧の中に表示されます。
 
カテゴリー一覧


⑨作成したカテゴリーを記事を作成する時に指定することができます。
カテゴリーを記事に指定する方法については「カテゴリーの設定」をご覧下さい。
 

 

 

記事作成時にカテゴリーも同時に作成

 
①先ほどはあらかじめカテゴリーを作成しておく方法をご紹介しましたが、
記事を新規に作成する時に記事に設定したいカテゴリーを同時に作成することもできます。
それでは実際に試してみます。記事の新規作成画面を表示して下さい。
 
新規作成画面


②右サイドバーにカテゴリーを設定するブロックがあります。
ここには既に作成済のカテゴリーが表示されており、カテゴリーを設定するにはチェックをするだけでカテゴリーの設定が行えます。
 
カテゴリーの設定


③記事作成時に新しいカテゴリーを作成する場合には、「新規カテゴリーを追加」と書かれたリンクをクリックして下さい。
 
新規カテゴリーを追加


④作成するカテゴリーの「名前」を入力するテキストボックスが表示されますので入力して下さい。
今回は「レビュー」と入力しました。親カテゴリーを設定したい場合はその下のドロップダウンメニューから選択できます。
入力が終わりましたら「新規カテゴリーを追加」ボタンをクリックして下さい。
 
新規カテゴリーを追加


⑤新しいカテゴリーが作成されます。
また記事に新しく作成したカテゴリーが設定されます(外すこともできます)。
 
新しいカテゴリー作成


⑥このように記事を作成する時、設定したいカテゴリーがない場合に合わせてカテゴリーを作成する方法は便利なのですが、注意点もあります。
あらかじめカテゴリーを作成する場合は「スラッグ」を指定できるのですが、
記事と同時に作成する場合はスラッグを指定する箇所がなくカテゴリーの名前に入力した値が自動的にスラッグにも設定されます。
 
⑦「投稿」メニューの中にある「カテゴリー」メニューをクリックし「カテゴリー」画面を表示してみると、
先ほど作成したカテゴリーのスラッグが名前と同じ値になっていることが確認できます。
 
スラッグの値


⑧スラッグは日本語でも問題ありませんが、URLの一部にも使われます。
必要であればあとからカテゴリーを編集し、スラッグを半角英数の値で設定して下さい。

【メディア(画像、動画)の利用】画像の挿入時、サムネイルなどのサイズが選択できない場合

15 6月 15
北川 哲平

No Comments

画像をアップロードする時に、元の画像のサイズは十分な大きさがあるのに
「サムネイル」や「中」「大」が選択できない場合があります。

上記では元の画像のサイズが 800×600 あるにも関わらず「サムネイル」と「中」が選択できない状態となっています。

このような場合はPHPでGDモジュールが有効になっていない可能性があります。
GDモジュールは現在のPHPでは別途インストールは不要で設定変更だけを行なえば利用可能です。

「php.ini」ファイルを開き「extension=php_gd2.dll」が書かれている場所を検索して下さい。

;extension=php_bz2.dll
;extension=php_curl.dll
;extension=php_fileinfo.dll
;extension=php_gd2.dll
;extension=php_gettext.dll
;extension=php_gmp.dll
;extension=php_intl.dll
;extension=php_imap.dll

「extension=php_gd2.dll」の先頭に「;」がが付いていたら削除して下さい。

;extension=php_bz2.dll
;extension=php_curl.dll
;extension=php_fileinfo.dll
extension=php_gd2.dll
;extension=php_gettext.dll
;extension=php_gmp.dll
;extension=php_intl.dll
;extension=php_imap.dll

ファイルを保存し、Apache等を再起動して下さい。これで完了です。

改めて同じ画像をアップロードしてみると次のように表示されます。

元の画像のサイズから選択可能な「サムネイル」「中」が選択可能となっていることが確認できます。

【メディア(画像、動画)の利用】画像のトリミングとサムネイル設定

15 6月 15
北川 哲平

No Comments

WordPressでは画像をアップロードした後でトリミング(画像の一部を切り出すこと)を行うことができます。
トリミングした画像を元に全てのサイズの画像を作成することもできますし、サムネイル用にだけオリジナルの画像からトリミングして任意の部分をサムネイルとして設定することも可能です。
ここでは画像のトリミングに使い方について解説します。
 
1.メディアの編集画面
2.画像のトリミング
3.幅と高さの比率を固定してトリミング
4.画像の回転と反転

 

 

メディアの編集画面

 
①管理画面左側にある「メディア」メニューの中の「ライブラリ」メニューをクリックして下さい。
 
ライブラリ


②「メディアライブラリ」の画面が表示されます。
アップロード済のメディア一覧が表示されますので操作を行いたい画像にマウスを合わせ、表示されたメニューの中から「編集」メニューをクリックして下さい。
 
編集


③メディアの編集画面が表示されます。
 
メディアの編集画面


④画像の左下付近に表示されている「画像を編集」ボタンをクリックして下さい。
 
画像を編集


⑤メディアの編集画面が表示されます。
 
メディアの編集画面


この画面にて画像のトリミングや回転といった操作を行います。
 

 

 

画像のトリミング

 
①オリジナルの画像の一部分だけを切り出して(こういった操作をトリミングと言います)
新しい画像を作成しオリジナルの画像と置き換えることができます。
 
②トリミングを行うには表示されている画像の上でまず切り出したい部分の左上にマウスを置き、ドラッグしながら切り出したい右下まで持っていって下さい。
 
元の画像


位置指定


③選択した領域の幅と高さは右側の「選択範囲」というところに表示されています。
 
選択範囲


④領域の左上は変更できませんが、幅と高さは数値を直接入力することができます。
例として幅を450px、高さを300pxにしてみます。
「選択範囲」のところのテキストボックスに表示されている数値を変更して下さい。
 
数値変更


⑤画像の選択されている範囲も変更されています。
 
⑥次にトリミングした画像をどの画像と置き換えるのかを指定します。
画像をアップロードすると「大」「中」「サムネイル」の3つのサイズで画像が自動的に作成されます。
この中のどの画像を新しくトリミングして作成した画像と置き換えるのかについて「すべての画像サイズ」「サムネイル」「サムネイル以外の全サイズ」から選択できます。
 
サイズ選択


⑦「すべての画像サイズ」を選択した場合は、トリミングした画像をオリジナル画像として、改めて「大」「中」「サムネイル」の3つの画像が作成されます。
「サムネイル」を選択した場合はサムネイルだけが作成されます。
「サムネイル以外の全サイズ」を選択した場合は「大」と「中」だけが改めて作成されます。
(いずれの場合も新しい画像が作成されるのは「大」「中」「サムネイル」に設定されている上限サイズなどの条件をクリアして画像の作成が可能な場合だけです)。
 
⑧今回は「すべての画像サイズ」を選択しておきました。
 
⑨選択範囲や変更の対象を選択しましたら、画像の上部に表示されているボタンの中から一番左にある「トリミング」ボタンをクリックして下さい。
 
トリミング


⑩トリミングした画像が新しいオリジナル画像として画面に表示されます。
 
トリミングしたオリジナル画像


⑪トリミング操作が終了しましたら画像左下に表示されている「保存」と書かれたリンクをクリックして下さい。
 
保存


⑫画像の保存が完了します。
 
保存完了


⑬サーバ側に保存されているメディアを確認すると、新しいオリジナル画像を含む5つの画像ファイルが作成されていました。
 
5つの画像ファイル


⑭元の画像はファイルとしては残っていますが、記事に挿入したりする場合に使用できるのは新しく作成された画像だけです。
 

 

 

幅と高さの比率を固定してトリミング

 
トリミングする時に選択範囲の幅と高さの比率を指定しておくことができます。
 
①指定する場合はトリミングを行う前に先に幅と高さの比率を入力して下さい。
 
比率入力


②それではトリミングを行いますが幅と高さの比率を固定したまま領域を選択するには、
[Shift]キーを押したまま最初に選択範囲の左側にマウスを置き、
[Shift]キーを押したままドラッグして範囲を指定して下さい。
すると自動的に指定した縦横比になるように選択されます。
 
指定縦横比


③幅と高さの比率を2対1と指定したので、選択された領域の幅が408pxで高さが204pxと2対1となっています。
 
④サムネイルを作成する場合で幅と高さが1対1のサイズになるように選択したい場合は、縦横比を1対1に指定しておくと便利です。
 
1:1指定


 

 

 

画像の回転と反転

 
①画像の編集機能には画像を時計回りと反時計回りに回転させる機能や水平または垂直方向に反転させる機能も用意されています。
 
②時計回りに90度回転させる場合は、画像の上部に表示されているボタンの中の左から3番目の「時計回りに回転」ボタンをクリックして下さい。
 
時計回りに回転


③画像が時計回りに90度回転しました。
 
90度回転


④時計を水平方向に反転させる場合は、画像の上部に表示されているボタンの中の左から5番目の「水平方向に反転」ボタンをクリックして下さい。
 
水平方向に反転


⑤画像が水平方向に反転しました。
 
反転完了


⑥通常こういった処理は画像をアップロードする前に行うことが多いと思いますが、
サムネイル画像を任意の範囲の画像に設定できる機能などは便利かなと思います。

【メディア(画像、動画)の利用】画像ファイルの大/中/サムネイルのサイズの設定

15 6月 15
北川 哲平

No Comments

画像ファイルをアップロードすると、オリジナルの画像の他にいくつかのサイズの画像が自動的に作成されます。
この自動で作成されるサイズを変更したり、不要なものを作成しないようにする設定について解説します。
 
1.自動で作成される画像ファイルの詳細
2.画像サイズが「大」や「中」の上限に設定されているサイズより小さい場合
3.大/中/サムネイルの上限サイズを変更
4.画像を自動で作成しないように設定
5.サムネイルを実寸法にトリミングする
6.アップロードした画像を年月のフォルダに分けて格納するかどうか

 

 

自動で作成される画像ファイルの詳細

 
①メディアとして画像を新規追加したり、記事に画像を挿入したりするとオリジナルの画像がサーバ側にアップロードされます。
同時にオリジナルとは異なるサイズの画像ファイルが自動的に生成されます。
 
②例えば1600×1200のサイズの画像をメディアに新規追加してみます。
 
メディアのサイズ


③アップロード先のディレクトリを見てみると次のようにオリジナルの画像の他に5つの画像ファイルが作成されています。
 
画像ファイル


④このように画像ファイルをアップロードすると、「サムネイル」「中」「大」の3つの画像ファイルが自動で作成されます。
「サムネイル」は正方形、「中」と「大」はオリジナルの画像の幅と高さの比率を維持したままオリジナルよりも小さいサイズに画像を縮小して作成されています。
 
⑤「サムネイル」「中」「大」がどのサイズになるのかは設定で次のように定義されています。
 

サムネイル:幅 150px 高さ 150px
中サイズ :幅 300px 高さ 300px
大サイズ :幅 1024px 高さ 1024px

 
⑥先ほど1600×1200のサイズの画像をアップロードしましたが、次のように各画像ファイルが作成されます。
 
⑦サムネイルはオリジナルの画像を150×150のサイズに縮小して作成されます。
 
中サイズと大サイズはオリジナルの幅と高さの比率を維持したまま、設定されている上限のサイズの範囲内で最大の大きさになるように縮小されます。
例えば中サイズで考えてみるとまず幅を上限の300pxとします。
比率は同じままなので高さは300×(1200÷1600)=225pxとなります。
この高さは上限の範囲内です。次に高さの方を上限の300pxとします。
比率は同じままなので幅は300×(1600÷1200)=400pxとなります。
この幅は上限を超えていますのでこのサイズは不可です。
結果として幅が300pxで高さが225pxの画像ファイルが作成されます。同じように大サイズの画像ファイルも作成されます。
 
改めて自動生成された画像を確認してみると、サムネイルや「大」「中」の画像ファイルがそれぞれどれなのかが分かります。
 
サムネイルサイズ


例えば記事に画像を挿入する場合、オリジナルの画像と自動で生成された「中」や「大」の画像を選択して記事に挿入されることになります。
 

 

 

画像サイズが「大」や「中」の上限に設定されているサイズより小さい場合

 
画像をアップロードすると自動的に3つの画像ファイルが作成されますが、
オリジナルの画像のサイズが「大」や「中」よりも小さかった場合は「大」や「中」の画像は作成されません。
例えばオリジナルの画像が1000×1000だった場合には「大」に設定されている上限の値1024pxよりも小さいため「大」の画像は作成されません。(「中」の上限は300×300ですので「中」の方は画像が作成されます。)
 
①例えば900×600のサイズの画像をメディアに新規追加してみます。
 
900×600サイズ


②アップロード先のディレクトリを見てみると、今度は「サムネイル」と「中」はありますが「大」のサイズの画像がありません。
 
サイズオーバー


③このように設定されている上限サイズよりも小さいサイズの画像をアップロードした場合には「大」や「中」の画像が作成されません。
 

 

 

大/中/サムネイルの上限サイズを変更

 
①自動で作成される画像の上限は決まっていると書きましたが値は変更することができます。
変更した場合には管理画面左側の「設定」メニューの中にある「メディア」メニューをクリックして下さい。
 
メディア


②「メディア設定」の画面が表示されます。
 
メディアの設定


③「サムネイル」「中」「大」の上限サイズがそれぞれ設定されていますので変更したい場合には新しい値を設定して下さい。
今回は例として「サムネイル」のサイズを100×100、「大」のサイズを500×500に変更してみます。
変更が終わりましたら「変更を保存」ボタンをクリックして下さい。
 
サイズ変更


④変更された設定は変更した以降にアップロードされる画像に適用されます。
既にアップロードされた画像が新しく設定したサイズで作り直されるようなことはありません。
 
⑤それでは先ほどアップロードした900×600のメディアをいったん削除してから、改めて900×600のサイズの画像をメディアに新規追加してみます。
 
900×600サイズ


⑥アップロード先のディレクトリを見てみると、新しく指定したサイズで画像が自動的に生成されていることが確認できます。
 
自動生成

 

 

画像を自動で作成しないように設定

 
①画像をアップロードするたびに「大」「中」「サムネイル」の画像ファイルが自動で作成されていくと、ファイルがどんどん増えていってしまいます。
もし「中」サイズや「大」サイズのファイルを使う機会がないのであれば作成しないようすることも可能です。
 
②作成して欲しくないサイズがある場合は、「メディア設定」の画面にて幅及び高さの上限サイズを0に設定して下さい。
例として「サムネイル」と「大」の上限サイズを0にしてみました。
 
上限サイズ変更


③それでは先ほどアップロードした900×600のメディアをいったん削除し、改めて900×600のサイズの画像をメディアに新規追加してみます。
アップロード先のディレクトリを見てみると、「中」サイズの画像だけが作成されており、「大」と「サムネイル」は作成されていないことが確認できます。
 
サムネイル生成制限


④このように自動で作成したくない画像サイズがある場合は、上限サイズを0に設定されてみて下さい。
 

 

 

サムネイルを実寸法にトリミングする

 
①自動で作成される画像の中で「大」と「中」についてはオリジナルの画像の幅と高さの比率を維持したままサイズが縮小されて作成されますが、
「サムネイル」はオリジナルの幅と高さの比率と関係無く、指定した上限のサイズに幅と高さを設定してサムネイルを作成します。
(オリジナルの画像を縮小した上で、指定のサイズで一部分を切り抜いて作成されるようです)。
 
サムネイルサイズ


②「サムネイル」についても「大」や「中」と同じような方式で画像を作成したい場合には、
「メディア設定」の画面で「サムネイルを実寸法にトリミングする」の箇所に付いているチェックを外して下さい。
 
メディア設定


③変更を保存した後で改めてメディアをアップロードして「サムネイル」画像を作成すると、
オリジナルの幅と高さの比率を維持したままサムネイルの上限サイズになるように縮小された画像が作成されました。
 
オリジナル寸法


④サムネイル画像の使い方に合わせてどちらの方式がいいのか選択されてみて下さい。
 

 

 

アップロードした画像を年月のフォルダに分けて格納するかどうか

 
①メディアをアップロードすると、アップロードした年月毎のフォルダに分かれて格納されます。
 
アップロード



2015



月別


②年月毎のフォルダを使用されたくない場合は、「メディア設定」の画面で「アップロードしたファイルを年月ベースのフォルダに整理」の箇所に付いているチェックを外して下さい。
 
メディア設定


③変更を保存した後でいったんアップロード済のメディアを全て削除します。
その後で改めてメディアをアップロードしてみると、今度は年月毎のフォルダを使用せずに「uploads」フォルダの中にファイルが格納されています。
 
アップロード



ファイル一覧


サーバ側のファイル管理などで変更した方が都合がいい場合などには変更されてみて下さい。

【メディア(画像、動画)の利用】メディア(画像ファイル)のアップロード

15 6月 15
北川 哲平

No Comments

WordPressでは画像や動画・音楽などをメディアと呼んでいます。
記事に画像を表示させたい場合などには記事作成時に画像をアップロードすることもできますが、あらかじめ画像などをアップロードしておき、アップロード済のメディア一覧から選択することもできます。
ここでは画像などのメディアをアップロードする方法を解説します。
 
1.メディアのアップロード方法
2.メディアのタイトル/キャプション/説明などを編集
3.メディアの削除
 
※ アップロード先ディレクトリは設定で変更が可能です。設定方法は「画像ファイルの大/中/サムネイルのサイズの設定」をご参照下さい。

 

 

メディアのアップロード方法

①画像などのメディアをWordPressにアップロードするには、管理画面にログインし左側メニューの中の「メディア」メニューの中にある「新規追加」メニューをクリックして下さい。
 
新規追加


②「メディアのアップロード」画面が表示されます。

メディアのアップロード


③画面には「最大アップロードファイルサイズ: 30MB」と表示されており、30MBまでのファイルをアップロードできます。

それではファイルをアップロードしてみます。
いくつか方法がありますが、画像ファイルをドラッグアンドドロップで画面上の点線で囲まれた中にドロップして下さい。
 
ドロップ


④ファイルのアップロードが完了します。
 
アップロード完了


⑤また「ファイルを選択」と書かれたリンクをクリックすることでもファイルをアップロードすることができます。
 
ファイルを選択からのアップロード


⑥ファイル選択ダイアログが表示されますので、アップロードしたファイルを選択し「開く」ボタンをクリックして下さい。
 
開く


⑦ファイルのアップロードが完了します。
 
アップロード完了


 

 

 

メディアのタイトル/キャプション/説明などを編集

 
①アップロードしたメディアにはファイル名などから自動的にタイトルが設定されています。
タイトルを編集したり、メディアの説明を付け加えるにはアップロード済のメディアの右に表示されている「編集」と書かれたリンクをクリックして下さい。
 
編集


②メディアの編集画面が表示されます。
 
メディアの編集画面


メディアの編集画面2


③「タイトル」は自動的に設定されています。
それ以外に「キャプション」「代替テキスト」「説明」などを追加で入力することができます。
 
④またアップロードしたメディアの格納場所が次のように表示されています。
「/wp-content/uploads/」ディレクトリの下にアップロードした日付毎にディレクトリが作成されメディアが格納されています。
 

https://(URL)/wp-content/uploads/2013/12/tori.jpg

 
⑤「タイトル」などを変更した場合には「更新」ボタンをクリックして下さい。メディアの更新が完了します。
 
メディア更新


⑥メディアをアップロードした直後はアップロード画面の下にアップロードしたファイルが表示されていますが、
後からメディアを編集したい場合には左側メニューの中の「メディア」メニューの中にある「ライブラリ」メニューをクリックして下さい。
 
ライブラリ


⑦「メディアライブラリ」画面が表示されます。この画面ではアップロード済のメディア一覧が表示されます。
 
メディア一覧


⑧編集したいメディアにマウスを合わせて頂くと次のようなメニューが表示されます。
この中から「編集」と書かれたリンクをクリックして下さい。
 
編集


⑨メディアの編集画面が表示されます。この編集画面は先ほどと同じですので、タイトルを変更したり説明を追加したりすることができます。
 
編集


 

 

 

メディアの削除

①アップロードしたメディアを削除したい場合には、先ほどと同じく「メディアライブラリ」画面を表示し、削除したいメディアにマウスを合わせて下さい。
次のようなメニューが表示されますので「完全に削除」と書かれたリンクをクリックして下さい。
 
完全に削除


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


③メディアが削除されました。
 
メディアの削除


④メディアの削除ではゴミ箱のようなものはありませんので、削除してしまうと元に戻すことはできません。ご注意下さい。

【エディタを使った記事の作成】フルスクリーンモード(全画面表示)での編集

15 6月 15
北川 哲平

No Comments

記事を新規作成したり編集したりする場合に、より入力作業に集中できるように記事入力の部分を大きく表示した集中執筆モードと呼ばれる機能があります。ここでは集中執筆モード(フルスクリーンモード)の利用方法について解説します。
 

フルスクリーンモード(全画面表示)での編集

 
①新しい記事を作成する場合、通常は次のような画面で編集を行います。
 
新規


②長い文章を入力する場合には集中執筆モード(フルスクリーンモード)を使用すると便利な場合があります。
利用するにはツールバー上の「集中執筆モード(Alt+Shift+W)」をクリックして下さい。
 
集中執筆モード


③編集画面が次のように切り替わります。少し広い画面で本文の編集などを行なうことができます。
 
集中執筆画面


④画面上からマウスを移動させると画面上部に表示されていたツールバーなども非表示になりタイトルと本文を入力するためのテキストエリアだけが表示されるようになります。
(マウスを画面上に持っていけばツールバーなどが再び表示されます)。
 
集中執筆画面


⑤元の画面に戻したい場合には、再び「集中執筆モード」をクリックして下さい。
 
⑥通常画面に戻ります。
 
フルスクリーン終了


集中執筆モード(フルスクリーンモード)に特別な機能があるわけではありませんので、使いやすいと思われた場合に使ってみて下さい。

【エディタを使った記事の作成】エディタ上で段落を分ける方法と改行する方法

15 6月 15
北川 哲平

No Comments

WordPressでエディタを使って本文を入力する場合、Enterキーを押した時の挙動について注意が必要です。
Enterキーを押し方によって段落が分けられたり同じ段落内で改行が行なわれたりします。
ここではビジュアルエディタとテキストエディタでそれぞれEnterキーを押した時にどのような扱いになるのか解説します。
 
1.ビジュアルエディタの場合
2.テキストエディタの場合

 

 

ビジュアルエディタの場合

 
①ビジュアルエディタ上でテキストを入力し、その後で[Enter]キーを押してから続けてテキストを入力してみて下さい。
 
テキストを入力


②[Enter]キーを押す前の行と押した後の行間が結構開いているように見えます。
これはビジュアルエディタでは[Enter]キーを押すと段落が分けられるためです。
この記事を公開しホームページで表示しソースを確認すると次のように作成されていることが分かります。
 

<p>教えない、一緒にやらない、環境も整備しないから人が育つ。</p>
<p>何もしない状態を作れないなら、人は育たない。</p>

 
Enterキーを押すことでそれまで入力された文章が<p></p>で囲まれていることが分かります。そしてEnterキーの後で入力された文章は別の<p></p>の中に記述されています。
 
③次に[Shift]+[Enter]キーを押してから続けて文章を入力してみて下さい。
 
[Shift]+[Enter]


④今回はキーを押す前と押した後で行間が開いていません。
これはビジュアルエディタで[Shift]キーと[Enter]キーを同時に押すと改行が行なわれるためです。この記事を公開しホームページで表示しソースを確認すると次のように作成されていることが分かります。
 

<p>教えない、一緒にやらない、環境も整備しないから人が育つ。<br />
何もしない状態を作れないなら、人は育たない。</p>

 
[Shift]キーと[Enter]キーを同時に押すと、その場所に<br />が挿入されています。
 
このように段落を分けたい場合には[Enter]キーを、単に改行したい場合には[Shift]キーと[Enter]キーを同時に押して下さい。
 
なおいったん[Shift]+[Enter]キーで改行した後で次の行の先頭に戻り再び[Shift]+[Enter]キー押すと画面上は次のように表示されます。
 
[Shift]+[Enter]


この場合、改行が2回行なわれたように見えますが、この記事をホームページで表示しソースを確認すると次のようになっています。
 

<p>教えない、一緒にやらない、環境も整備しないから人が育つ。</p>
<p>何もしない状態を作れないなら、人は育たない。</p>

 
段落が分けられています。このようにビジュアルエディタでは[Shift]+[Enter]キーを押して改行をしたとしても、連続して2つ改行があると自動的に段落が分けられるようです。
 

 

 

テキストエディタの場合

 
①先程と同じようにテキストエディタ上でテキストを入力し、その後で[Enter]キーを押してから続けてテキストを入力してみて下さい。
 
テキストエディタの場合


②ビジュアルエディタの場合と違い、テキストエディタでは[Enter]キーを押すと改行が行なわれます。
この記事を公開しホームページで表示しソースを確認すると次のように表示されます。
 

<p>教えない、一緒にやらない、環境も整備しないから人が育つ。<br />
何もしない状態を作れないなら、人は育たない。</p>

 
[Enter]キーを押した場所に<br />が挿入されています。
 
ただしこちらはビジュアルエディタの場合と同じですが、2回[Enter]キーを押して連続して改行を行なうと段落が分けられます。
 
改行


③この記事を投稿しホームページで表示しソースを確認すると次のようになります。
 

<p>教えない、一緒にやらない、環境も整備しないから人が育つ。</p>
<p>何もしない状態を作れないなら、人は育たない。</p>

 
段落が分けられていることが確認できます。
 
このようにビジュアルエディタとテキストエディタでは[Enter]キーを押した時の挙動が異なります。
段落を分けたり改行したりするのは基本的な操作なので、それぞれのエディタで意図した通りの結果に出来るように使い方と挙動を覚えておいて下さい。

【エディタを使った記事の作成】続きを読む(Moreタグ)の設定

15 6月 15
北川 哲平

No Comments

ホームページを表示すると公開済の記事が時系列順に並び、各記事のタイトルと本文が全て表示されますが、
ホームページを表示した時に本文を全て表示するのではなく一部だけを表示しておき、全ての本文を読むには
「続きを読む」と書かれたリンクをクリックした時に表示させるように設定することができます。
ここでは「続きを読む」を設定する方法について解説します。
 
1.「続きを読む」の設定方法
2.「続きを読む」を解除

 

 

「続きを読む」の設定方法

 
「続きを読む」を設定する場合、ホームページ単位ではなく記事単位で設定します。
また本文のどこまでをまず表示させるのかについても指定することができます。使用するボタンは次のものです。
 
続きを読むタグ


①まず新しい記事を作成し本文を入力するか公開済の記事を編集画面で開いて下さい。
 
編集画面


②本文に2つの文が含まれていますが、最初の文だけを表示し2つ目の文は「続きを読む」がクリックされた時に表示するようにしてみます。常に表示したい文の最後にカーソルを合わせ、その後でツールバー上の「Moreタグ挿入(Alt+Shift+T)」をクリックして下さい。
 
続きを読むタグを挿入


③先ほどカーソルを置いていた位置の後ろに点線が表示され、本文が上下に分割されます。
点線より上の部分が最初から表示される部分となり点線より下の部分が「続きを読む」がクリックされた後で表示される部分となります。
 
分割部分確認


④テキストエディタで確認してみると、「続きを読む」が設定された場所に次のタグが記述されていました。
 

<!–more–>

 
⑤では記事を公開しホームページでどのように表示されているか確認してみます。
 
表示確認


⑥本文の中で一部分だけが表示されていることが確認できます。また最後に「続きを読む」と書かれたリンクが表示されています。
 
続きを読むリンク挿入完了


⑦では「続きを読む」と書かれたリンクをクリックして下さい。個別記事のページに移動し記事の本文が全て表示されます。
 
リンククリック


⑧「続きを読む」をクリックした時、ホームページのメインページ上で残りの部分が表示されるのではなく、記事の個別ページが表示させることで本文全体を表示するようです。
 

 

 

「続きを読む」を解除

 
①本文に設定した「続きを読む」を解除したい場合、編集画面上に表示されている「—More—」と表示されているところをクリックして下さい。
 
more削除


②次のような状態になりますのでキーボードの「Delete」キーを押して下さい。
 
Delete


③「続きを読む」が解除されました。
 
続きを読むの解除


「続きを読む」を設定し本文の一部だけをメインページに表示させる方法について解説しました。数多くの記事をメインページ上で表示させたい場合には表示される本文を短くすることで閲覧性が向上するかと思います。

【エディタを使った記事の作成】YouTubeなどの動画を挿入

15 6月 15
北川 哲平

No Comments

YouTubeを例にして動画を挿入する方法について解説します。
WordPressではYouTubeを含む多くのサービスでURLを記述するだけで動画が埋め込むことができます。
※なお、動画自体を埋め込む必要は無く、URLやテキストを表示してリンクさせたい場合は、
<a href=”httpss://www.youtube.com/~”>○○○○</a>などのタグを使用してリンクさせることも可能です。
 
1.YouTubeの動画の挿入
2.メディア埋め込み機能を使えるサイト
3.[EMBED]ショートコード
4.YouTubeで提供されている埋め込みコードを使う

 

 

YouTubeの動画の挿入

 
①記事の新規作成画面を開いて下さい。
 
新規投稿


②YouTubeの動画を挿入する場合には、本文中に挿入したい動画のURLを直接記述するだけで挿入することができます。
 
URLを直接記述


③注意点としては
(1)URLがリンクにならないように挿入して下さい。
(2)URLは独立した行として記述して下さい(URLの前後に他の文字などを記述すると、動画を正しく挿入することができません)。
(3)限定公開動画、非公開動画は挿入できません。
⇒ 詳しい設定方法に関しては「Youtubeのプライバシー設定(公開設定)について」をご覧下さい。
 
④ではプレビューでどのように表示されるのかを確認してみます。
 
埋め込み完了


⑤YouTubeの動画が埋め込まれていました。
普通に再生して閲覧することが可能です。もしYouTubeの動画が埋め込まれなかった場合は、
先ほどの注意点にひっかかっていないかどうかを確認してみて下さい。
 
⑥この方法で動画を埋め込む場合はサイズの指定はできません。
埋め込まれた動画の幅は投稿画面の横幅に合わせて自動的に設定されます。
 
 

 

 

メディア埋め込み機能を使えるサイト

 
①WordPressでURLを記述するだけでメディアの埋め込みが可能なサイト(サービス)はどのようなものがあるのかについては
下記を参照されてみて下さい。
 
Embeds « WordPress Codex
blip.tv
Bunkr
DailyMotion
Flickr
FunnyOrDie.com (WordPress 3.0)
Hulu
Instagram (WordPress 3.5)
Qik
Photobucket
PollDaddy
Rdio (WordPress 3.6)
Revision3
Scribd
SlideShare (WordPress 3.5)
SmugMug (WordPress 3.0)
SoundCloud (WordPress 3.5)
Spotify (WordPress 3.6)
Twitter (WordPress 3.4)
Viddler
Vimeo
YouTube
WordPress.tv
カッコ内に記述があるものは、どのバージョンのWordPressから対応したのかを表しています。
 
 

 

 

[embed]ショートコード

 
URLを記述するだけで動画を埋め込みすることができますが、この方式ですと動画のサイズを指定することができません。サイズを指定したい場合には[embed]ショートコードを使用して下さい。
 
[embed width=”幅” height=”高さ”]https://www.example.com/xxx/yyy[/embed]
幅及び高さについてピクセル単位でサイズを指定して下さい。ただし埋め込まれる動画の幅と高さの比率は変わりませんので両方を指定しても意味がありません(YouTubeに関しては幅の設定だけが使用されているように思われます)。
 
②では新しい記事に記述してみます。上がURLだけを記述して埋め込んだ場合、下が[embed]ショートコードを使って記述した場合です。
 
高さを指定


③ではプレビューでどのように表示されるのかを確認してみます。
 
表示確認


④YouTubeの動画が指定した幅で埋め込まれました。
 
なお[embed]ショートコードを使って記述した場合は、独立した行として記述しなくても動画を埋め込むことができます。
下記では動画の前に「Look」というテキストを記述しています。
 
Loook


⑤ではプレビューでどのように表示されるのかを確認してみます。
 
Look確認


⑥URLを記述して動画を埋め込んだ場合は独立した行にURLが記述されていないので動画の埋め込みが行われずにURLがそのまま表示されています。
 
[embed]ショートコードを使った場合は動画の前に他の文字があっても動画の埋め込みが行われています。
 
 

 

 

YouTubeで提供されている埋め込みコードを使う

 
YouTubeの動画の場合は、YouTube側で提供される埋め込みコードを使用することもできます。
なお、動画の埋め込みに関しては、その動画に所有権を持つユーザーが埋め込みを許可していない場合、
動画の埋め込み設定を行うことができません。

 
Youtube埋め込みコード


①動画のサイズを「カスタムサイズ」に変更し幅と高さを指定します。(幅と高さの比率は変えられません)。
 
カスタムサイズ


②それでは新規投稿画面を表示します。
 
新規投稿画面


③「テキスト」タブをクリックしテキストエディタに切り替えます。
 
テキストエディタ


④YouTubeの画面に表示されていた埋め込みコードを動画を埋め込みたい場所にそのまま記述します。これで埋め込みは完了です。
 
埋め込み完了


なおビジュアルエディタに切り替えると次のような感じで表示されています。
 
ビジュアル切り替え


⑤では動画を投稿しどのように表示されるのかを確認してみます。
(YouTubeの埋め込みコードを使用する場合はプレビューでは動画が表示されません)。
 
結果表示


⑥指定したサイズで動画を埋め込むことができました。
なお動画の幅に投稿画面の幅を超えるサイズを指定しても投稿画面の横幅に合わせて自動的に調整されて表示されます。
 
YouTubeの動画を例に動画を記事に埋めこむ3つの方法についてご紹介しました。利用方法に合わせて使い分けして下さい。