こんにちは、カプリです。
今回はワードプレスの記事投稿と編集画面の設定方法について説明します。
使用しているのは賢威7テンプレートです。
(動画準備中)
投稿・編集画面について
まずは管理画面の「投稿」から「新規追加」をクリックするか「投稿一覧」から編集したい記事のタイトルをクリックします。
すると投稿の編集画面が開きますのでタイトルから入力していきましょう。
投稿記事のタイトルですが、ここは必ずターゲットにしたキーワードを含めて下さい。
またキーワードは出来る限りタイトルの冒頭に入れたほうがSEOの効果は高いです。
タイトルに含めるキーワードの数ですが、多くても3つくらいが適しています。
というのは、キーワードが多すぎる場合でタイトルが不自然になるとスパム判定を受けたりすることがあるからです。
現在の検索エンジンは精巧に出来ていて、人間が読みやすいと感じる文章を理解しています。
なので、検索エンジンがどう感じるのかということを重視するよりも人にとってわかりやすいかどうかを重視するほうが重要です。
検索エンジンは人が利用した場合の利便性を追求しているので、人が読んでみてわかりやすいタイトルのほうを好むわけです。
ですから自分で読んでみて、何について書いた記事なのかよく分かるタイトルをつけていきましょう。
またタイトルの文字数は32~34文字くらいがいいです。
タイトルが長すぎると検索で表示された場合、後ろのほうが切れてしまいますので、しっかり読み手に内容が伝わりません。
どんなことを記事にしているのか、パッと見でよく分かるようにしたほうが、クリックされやすくなります。
次にパーマリンクを編集します。
タイトルを入力してから「下書きとして保存」をクリックすると自動的にタイトルに入力した文章が表示されるようになっています。
最近は日本語のドメインも増えてきていますし、日本語のままでも有効です。
ただし、何について書いているのか簡単にわかるもので、かつ半角英数にしたほうが良いのではないかなと思います。
またサイトのURLの構造は管理画面の「設定」にある「パーマリンク設定」から編集することができます。
ただしパーマリンクの設定は、一度だけにしておきましょう。
というのはパーマリンクは恒久的なもので、何度も変更を加えるべきではないからです。
たとえば、人気の高い記事はSNSなどでシェアされます。もしもパーマリンクを変更してしまったら、そのリンクは期限切れになり、404のエラーが表示されてアクセスができません。
もちろんサイトのアクセス数が少ない時期であれば大きな影響はないですが、ユーザー数がおおいのであれば、アクセスが大幅に激減してしまいます。
なので注意してくださいね。
検索エンジンに好まれるパーマリンクは短くてわかりやすいものです。
またコンテンツの作成には、ビジュアルモードかテキストモードを使います。
ただし、ワードプレスはオンラインのプラットファームなので、突然ネットの接続が途切れたりした場合、せっかく書き込んだ文章が消えてしまったりします。
こういう悲劇を回避するためにコンテンツの作成にはテキストエディタを使用していきましょう。
まずはエディタで下書きを作成してからコピペでワードプレスに貼り付ければ、プラットフォームに問題が発生してもコンテンツの全てを書き直さなければならないということにはなりません。
またコンテンツの作成にはCrescent Eveという無料のエディタソフトがおすすめです。
使いやすいテキストエディタなので使ってみて下さい。
それから編集エディタはテキストモードを使用するようにしましょう。
記事内に画像を挿入したりテーブルを設置したり……コンテンツを装飾するには、テキストモードを使わなくてはなりません。
ビジュアルモードでは、HTMLやJavaScriptの書き込みが出来ないので、基本的に記事の編集はテキストモードを使っていきましょう。
また、本文を記入する場所の上部にボタンが設置されています。
ボタンの表示はテンプレートによって違いますが、設置されているボタンをクリックすれば、コードが自動で出力されます。
ボタンの中には使用しないものもあるかと思います。
使用しないボタンを削除したり、頻繁に使用するものを追加することもできるのでやってみて下さい。
ボタンを追加したり削除したりする場合は「functions.php」のファイルを編集します。
ただしこのファイルに変更を加えるときには、必ずバックアップを取っておきましょう。
バックアップを取るには、バックアップ用のプラグインをインストールしてから有効にします。
バックアップ用のプラグインBackWPupのインストールと初期設定については別の記事でご紹介しています。
またテーマファイルを編集する際はFTPソフトが便利です。
FTPソフトはサーバーにアクセスして、ファイルをダウンロードしたりアップロードするためのソフトです。
テーマファイルに直接変更を加えて失敗すると、修正するのが大変です。
ですがFTPソフトを使えば、常にコピーファイルを作成することができるので、誤った場合でも簡単に元に戻せます。
無料のFTPソフトで一般的に使用されているのはFFFTPとFileZillaです。
どちらも使いやすいソフトですから使ってみてください。
ただしFFFTPはWindowsユーザー向けのソフトになるので、Macユーザーの方にはFileZillaをおすすめします。
ではボタンの追加と削除について説明します。
まずはfunctions.phpのファイルを開きます。
管理画面からfunctions.phpへアクセスするには「外観」から「Theme Editor」(テーマの編集)をクリックします。
すると画面右側にfunctions.phpがありますからクリックします。
ファイルを開いたら「Ctrl+F」か「command+F」で検索を開いて「装飾用タグ」と入力します。
すると以下のように装飾用のタグの一覧が表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // 装飾用タグ $button .= "QTags.addButton( 'br','改行(br)','[br num=\"1\"]', '', '','br', '')\n"; $button .= "QTags.addButton( 'hr','水平線(hr)','<hr>', '', '','hr', '')\n"; $button .= "QTags.addButton( 'h2','見出し(h2)','<h2>', '</h2>', '','h2', '')\n"; $button .= "QTags.addButton( 'h3','見出し(h3)','<h3>', '</h3>', '','h3', '')\n"; $button .= "QTags.addButton( 'h4','見出し(h4)','<h4>', '</h4>', '','h4', '')\n"; $button .= "QTags.addButton( 'h5','見出し(h5)','<h5>', '</h5>', '','h5', '')\n"; $button .= "QTags.addButton( 'black','太字(黒)','<span class=\"black b\">', '</span>', '','black', '')\n"; $button .= "QTags.addButton( 'red','太字(赤)','<span class=\"red b\">', '</span>', '','red', '')\n"; $button .= "QTags.addButton( 'orange','太字(オレンジ)','<span class=\"orange b\">', '</span>', '','orange', '')\n"; $button .= "QTags.addButton( 'green','太字(緑)','<span class=\"green b\">', '</span>', '','green', '')\n"; $button .= "QTags.addButton( 'blue','太字(青)','<span class=\"blue b\">', '</span>', '','blue', '')\n"; $button .= "QTags.addButton( 'f12em','文字1.2倍','<span class=\"f12em\">', '</span>', '','f12em', '')\n"; $button .= "QTags.addButton( 'f14em','文字1.4倍','<span class=\"f14em\">', '</span>', '','f14em', '')\n"; $button .= "QTags.addButton( 'f16em','文字1.6倍','<span class=\"f16em\">', '</span>', '','f16em', '')\n"; $button .= "QTags.addButton( 'f18em','文字1.8倍','<span class=\"f18em\">', '</span>', '','f18em', '')\n"; $button .= "QTags.addButton( 'f20em','文字2倍','<span class=\"f20em\">', '</span>', '','f20em', '')\n"; $button .= "QTags.addButton( 'al-l','左寄せ','<div class=\"al-l\">', '</div>', '','al-l', '')\n"; $button .= "QTags.addButton( 'al-r','右寄せ','<div class=\"al-r\">', '</div>', '','al-r', '')\n"; $button .= "QTags.addButton( 'al-c','中央寄せ','<div class=\"al-c\">', '</div>', '','al-c', '')\n"; $button .= "QTags.addButton( 'm60-t','余白(上60px)','<div class=\"m60-t\">', '</div>', '','m60-t', '')\n"; $button .= "QTags.addButton( 'm60-b','余白(下60px)','<div class=\"m60-b\">', '</div>', '','m60-b', '')\n"; $button .= "QTags.addButton( 'm120-t','余白(上120px)','<div class=\"m120-t\">', '</div>', '','m120-t', '')\n"; $button .= "QTags.addButton( 'm120-b','余白(下120px)','<div class=\"m120-b\">', '</div>', '','m120-b', '')\n"; |
まずはボタンを削除したい場合ですが、非表示にしたいボタンの前に「//」を追加して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | // 装飾用タグ $button .= "QTags.addButton( 'br','改行(br)','[br num=\"1\"]', '', '','br', '')\n"; $button .= "QTags.addButton( 'hr','水平線(hr)','<hr>', '', '','hr', '')\n"; $button .= "QTags.addButton( 'h2','見出し(h2)','<h2>', '</h2>', '','h2', '')\n"; $button .= "QTags.addButton( 'h3','見出し(h3)','<h3>', '</h3>', '','h3', '')\n"; $button .= "QTags.addButton( 'h4','見出し(h4)','<h4>', '</h4>', '','h4', '')\n"; $button .= "QTags.addButton( 'h5','見出し(h5)','<h5>', '</h5>', '','h5', '')\n"; $button .= "QTags.addButton( 'black','太字(黒)','<span class=\"black b\">', '</span>', '','black', '')\n"; $button .= "QTags.addButton( 'red','太字(赤)','<span class=\"red b\">', '</span>', '','red', '')\n"; $button .= "QTags.addButton( 'orange','太字(オレンジ)','<span class=\"orange b\">', '</span>', '','orange', '')\n"; $button .= "QTags.addButton( 'green','太字(緑)','<span class=\"green b\">', '</span>', '','green', '')\n"; $button .= "QTags.addButton( 'blue','太字(青)','<span class=\"blue b\">', '</span>', '','blue', '')\n"; //$button .= "QTags.addButton( 'f12em','文字1.2倍','<span class=\"f12em\">', '</span>', '','f12em', '')\n"; //$button .= "QTags.addButton( 'f14em','文字1.4倍','<span class=\"f14em\">', '</span>', '','f14em', '')\n"; //$button .= "QTags.addButton( 'f16em','文字1.6倍','<span class=\"f16em\">', '</span>', '','f16em', '')\n"; //$button .= "QTags.addButton( 'f18em','文字1.8倍','<span class=\"f18em\">', '</span>', '','f18em', '')\n"; //$button .= "QTags.addButton( 'f20em','文字2倍','<span class=\"f20em\">', '</span>', '','f20em', '')\n"; $button .= "QTags.addButton( 'al-l','左寄せ','<div class=\"al-l\">', '</div>', '','al-l', '')\n"; $button .= "QTags.addButton( 'al-r','右寄せ','<div class=\"al-r\">', '</div>', '','al-r', '')\n"; $button .= "QTags.addButton( 'al-c','中央寄せ','<div class=\"al-c\">', '</div>', '','al-c', '')\n"; //$button .= "QTags.addButton( 'm60-t','余白(上60px)','<div class=\"m60-t\">', '</div>', '','m60-t', '')\n"; //$button .= "QTags.addButton( 'm60-b','余白(下60px)','<div class=\"m60-b\">', '</div>', '','m60-b', '')\n"; //$button .= "QTags.addButton( 'm120-t','余白(上120px)','<div class=\"m120-t\">', '</div>', '','m120-t', '')\n"; //$button .= "QTags.addButton( 'm120-b','余白(下120px)','<div class=\"m120-b\">', '</div>', '','m120-b', '')\n"; $button .= "QTags.addButton( 'blockquote','引用セット','<blockquote>'+'\\n'+'<p>ここに引用文が入ります。</p>'+ |
こうすれば「//」の入ったボタンは編集エディタに表示されません。
また、完全に削除してしまうと再度追加したい時に新たに追加が必要ですが、
このようにしておけば表示・非表示の切り替えが簡単です。
それと、新しいボタンを作成する場合は下のコードをコピーしてペーストしていきましょう。
こちらは賢威7の装飾コードの一部です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | //文字の装飾 <p class="navy">文字色を紺色に変更することができます。</p> <p class="aqua">文字色を水色に変更することができます。</p> <p class="red">文字色を赤色に変更することができます。</p> <p class="orange">文字色をオレンジ色に変更することができます。</p> <p class="pink">文字色をピンク色に変更することができます。</p> <p class="purple">文字色を紫色に変更することができます。</p> <p class="green">文字色を緑色に変更することができます。</p> <p class="blue">文字色を青色に変更することができます。</p> <p class="yellow">文字色を黄色に変更することができます。</p> <p class="olive">文字色をオリーブ色に変更することができます。</p> <p class="lime">文字色をライム色に変更することができます。</p> <p class="black">文字色を黒色に変更することができます。</p> <p class="gray">文字色を灰色に変更することができます。</p> <p class="white">文字色を白色に変更することができます。</p> <p class="brown">文字色を茶色に変更することができます。</p> //マーカー表示 <p>文字に<span class="box-orange">オレンジ色の背景色</span>をつけることができます。</p> <p>文字に<span class="box-pink">ピンク色の背景色</span>をつけることができます。</p> <p>文字に<span class="box-yellow">黄色の背景色</span>をつけることができます。</p> <p>文字に<span class="box-lime">ライム色の背景色</span>をつけることができます。</p> <p>文字に<span class="box-gray">灰色の背景色</span>をつけることができます。</p> //ボタンセット <p><a href="#" class="btn btn-green"><span>お問い合わせ</span></a></p> <p><a href="#" class="btn btn-blue"><span>お問い合わせ</span></a></p> <p><a href="#" class="btn btn-orange"><span>お問い合わせ</span></a></p> <p><a href="#" class="btn btn-red"><span>お問い合わせ</span></a></p> //アイコンセット <p class="icon-point">ポイント</p> <p class="icon-caution">注意</p> <p class="icon-new">NEW</p> <p class="icon-wakaba">初心者</p> <p class="icon-blank">別ウインドウ</p> <p class="icon-zip">ZIP</p> <p class="icon-mail">メール</p> <p class="icon-cart">ショッピングカート</p> <p class="icon-search">虫眼鏡</p> <p class="icon-home">ホーム</p> <p class="icon-arrow-t">矢印上</p> <p class="icon-arrow-r">矢印右</p> <p class="icon-arrow-b">矢印下</p> <p class="icon-arrow-l">矢印左</p> <p class="icon-dl">ダウンロード</p> <p class="icon-pdf">PDF</p> <p class="icon-folder">フォルダ</p> <p class="icon-time">時計</p> <p class="icon-calendar">カレンダー</p> <p class="icon-building">ビル</p> <p class="icon-map">マップ</p> //大きなアイコン <p class="icon-point-l">ポイント</p> <p class="icon-caution-l">注意</p> <p class="icon-new-l">NEW</p> <p class="icon-wakaba-l">初心者</p> <p class="icon-blank-l">別ウインドウ</p> <p class="icon-zip-l">ZIP</p> <p class="icon-mail-l">メール</p> <p class="icon-cart-l">ショッピングカート</p> <p class="icon-search-l">虫眼鏡</p> <p class="icon-home-l">ホーム</p> <p class="icon-arrow-t-l">矢印上</p> <p class="icon-arrow-r-l">矢印右</p> <p class="icon-arrow-b-l">矢印下</p> <p class="icon-arrow-l-l">矢印左</p> <p class="icon-dl-l">ダウンロード</p> <p class="icon-pdf-l">PDF</p> <p class="icon-folder-l">フォルダ</p> <p class="icon-time-l">時計</p> <p class="icon-calendar-l">カレンダー</p> <p class="icon-building-l">ビル</p> <p class="icon-map-l">マップ</p> //小さなチェックリスト <ul class="check-list"> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> </ul> //大きなチェックリスト <ul class="check-list-l"> <li class="odd">チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。</li> </ul> //Q&A <dl class="qa-list"> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。。</dd> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> </dl> |
本文の下に当たる項目と画面の右側に表示される項目は、非表示にすることができます。
まずは画面右上の「表示オプション」をクリックしてください。
すると表示・非表示の選択ができる項目が出てきますから、表示させたい項目にチェックマークを入れます。
こうすれば画面全体がスッキリします。
次に「Canonical URL」を説明します。
Canonical URLは、ページのコンテンツが類似もしくは重複している場合に検索エンジンからの評価が分散されないよう、正規のURLがどれになるのか指定するときに使います。
たとえば、同じ機種のスマホをカラー別に紹介する記事を書くとします。
するとカラーの部分のみが異なりコンテンツがほぼ同じになるというような場合に使用します。
ただし、設定に誤りがあると検索エンジンにインディクスされなくなることもありますので、記述するときは注意が必要です。
関連記事設定ですが、既に公開されている記事から記事と同じ「カテゴリー」と「タグ」に含まれているものをランダムで5件まで表示することができます。
「カテゴリー」と「タグ」の両方にチェックマークが入っている場合は、カテゴリーが優先されます。
また表示させたいページがある場合は、URLを指定することで表示させることができます。
指定したURLを別ウィンドウで開くならば、各項目の最後にあるスクエアにチェックマークを入れていきましょう。
「抜粋」に入力した内容は、記事一覧が表示された場合に概要として表示されたりメタ・デスクリプションで利用されたりします。
ただし「メタデータ」を設定している場合はそちらが優先されます。
また「OGP・Microdata・Twitterカード」の個別設定をすることができます。
それからこの投稿のみに反映される「CSS」や「JavaScript」を設定する場合は「CSS/JavaScriptの個別設定」でおこないます。
ただし、CSSを記述するときとJavaScriptを記述するときは、それぞれ異なるコードが必要です。
CSSを記述する際は以下のようにします。
1 2 3 4 5 | <style type-"text/css"> <!-- CSSを記述 --> </style> |
CSS/JavaScriptを記述する際は以下のようにします。
1 2 3 | <script> JavaScriptを記述 </script> |
投稿画面サイドバーエリアの設定について
では、画面右側の説明に移ります。
まずはインディクスとフォローを指定してください。
インデックスさせない記事はコンタクトフォームや免責事項などオリジナル性に欠けていたりコンテンツの乏しい記事です。
なので通常の記事ならば、チェックは入れません。
記事が完成したら「公開」をクリックします。
公開状態は記事を公開した後でも変更可能ですし、公開日時を指定することも出来ます。
次に「カテゴリー」を設定していきます。
カテゴリーを指定する場合は複数選ぶのではなく、ひとつだけ選択したほうがいいです。
またここで選択したカテゴリーはメタキーワードで利用されます。
記事にタグを追加する場合は「タグ」で設定します。
ただし類似したタグが多い場合は、使いにくくなりますから、タグを追加・設置するときには厳選して下さい。
またここで選択したタグはメタキーワードで利用されます。
「レイアウト」は管理画面の「賢威の設定」で選択したものが自動で適用されますが、変更したい場合はここでおこなって下さい。
サイトタイトルの表示の有無、PVランキングから除外するか否かの設定ができます。
アイキャッチ画像とは、記事一覧で表示させるサムネイルのことです。
サムネイルを設定した場合、Facebookのウォ―ルでもサムネイルとして使われます。
「パンくず優先カテゴリ設定」は自動で設定されますからこのままの状態で特に問題はありません。
以上が固定ページと投稿画面の設定についての説明です。
それでは最後までお読み頂いてありがとうございました。