【図解】WordPressブログの始め方と全手順を初心者向けに解説

コメント

1. ノコノコ より:

   2017年3月30日 11:18 AM

   いつもブログ拝見させていただいてます。
   どの記事も詳細に解説しているのでとても助かっております。
   お忙しいところ恐縮ですが、どうしてもわからないことがあるので質問させてください。

   私はTwentytwelvedeでブログをやっているのですが、記事の全ページの途中に、見出しのラインが1本入ってしまって試行錯誤してもそのラインを消すことができません。ブラウザの開発者ツールで要素を検証してみたのですが、そのラインには、h2,h3,h4タグが含まれているようでした。
   ですが、そこから先がどうにもわからないのでご教示お願いできますでしょうか？

   返信
   • しげぞう より:

     2017年3月30日 9:11 PM

     ノコノコ様

     コメントありがとうございます。推測ですけど見出しの装飾としてアンダーラインが入っている感じかな？と思います。どちらにしても実際にブログを見て開発者ツールでチェックしてみないと分からないので、もし良かったらブログのURLを教えて下さい。コメント公開時にはURLは削除しますので、どうぞよろしくお願いします。

     返信
2. sweetapple より:

   2017年1月14日 9:41 PM

   お忙しいとおもいますが、すみません、力を貸していただけたら幸いです。突然の質問で恐縮ですが、自分では解決できず途方に暮れてしまい、このサイトをみて、質問したいとおもいメール致しました。

   ●質問したいこと

   wordpress 外観→「ヘッダー」画面を開くとカスタマイズ中と表示がでて、勝手に画面が切り替わります。ヘッダー画面のままに設定する方法を教えてください。

   ★前提・実現したいことと、発生している問題・エラーメッセージ

   wordpressでサイトを作っています。
   フロントページの画面のヘッダーの写真が大きすぎて（記事は下にスクロールしないとみえてきません。）、その写真自体を小さくしたいと思いました。
   そこで、外観→「ヘッダー」画面を開いて、編集できないかなと思いましたが、ヘッダーをクリックしたら、「カスタマイズ中」と表示がでて、二秒ほどで画面が、元のサイトのフロントページに切り替わります。編集ができないのです。
   ヘッダー画面で編集したいので、勝手にフロントページに切り替わらないようにするにはどうしたらいいかを知りたいです。

   ★補足情報

   テーマはGraiffeです。プラグインもしています。
   今入っているプラグを一旦全部停止にしても、同じ症状がでて、ヘッダーの編集ができません。他に何かしたら善処する策があれば、教えてください。

   私は全くの初心者です。他に情報がたりなければ、それもおしえてくださると助かります。

   返信
   • しげぞう より:

     2017年1月16日 12:42 PM

     sweetapple様

     コメントありがとうございます。原因が何かは分かりませんが、一度原因を切り分けるために別のブラウザでも確認してもらえますか？また、最初にその問題のヘッダー画像を設置した時も「外観」⇒「ヘッダー」画面で編集をされたのでしょうか？

     以上2点、それからもし良かったらサイトのURLも教えて頂けると助かります。どうぞよろしくお願い致します。

     返信
3. てんぷら より:

   2016年11月26日 12:31 PM

   突然すみません、今アドセンスの審査を受けているのですが、よくある「サイトダウンになってる」という返事が来ました。
   キャッシュを消す・クロームから申請することなど試してみましたがダメでした。
   一度目はhttpから入れて入力、二度目は○○.comなど独自ドメインのみ入力してやりました。
   ワードプレスでサイト、お名前ドットコムでドメインを取り、ロリポップでサーバー借りました。
   ホスト設定などが間違っているのでしょうか。
   DNS設定がだめなのでしょうか。
   わかりにくい質問で申し訳ないですが、「サーバーダウン」で検索してもプレビュー画面を審査に通してしまったなどの内容しか出てこなかったので解決できず…。
   自分の場合プレビュー画面で申請してはいないので、なにが原因なのか不明なのです。
   もう三年くらい苦戦してるので今回こそ解決できるよう助言くださいませ。

   返信
   • しげぞう より:

     2016年11月27日 11:08 AM

     てんぷら様

     コメントありがとうございます。自分が審査用に申請したURLでアクセスできるのか確認をしてみて下さい。また、違うブラウザでも同じように試してみて下さい、例えばスマホからとかでもOKです。まずはそれを確認してみて下さい。

     返信
4. 翔 より:

   2016年8月29日 7:47 PM

   しげぞう様

   何度も送信してしまい大変申し訳ございません。

   あのまま放置していても何もできないので、思い切ってサイトを削除しました。まだ一記事も投稿していないのが幸いでしたね。

   また一からインストールして設定をし直した後に、もう一度だけ別のやり方でチャレンジしてみました。

   めちゃ簡単なやり方でしたが、それで上手く消すことができました！

   これがそのやり方を紹介されている記事です
   http://tensblog.com/post-2633/

   こうしてみると、最初のアレは何だったんだろうと思いますね・・・

   今の所は異常なしですが、今後また何かあればまたご相談させてください。

   お忙しいのにお時間とお手間を取らせてしまって本当に申し訳ございませんでした

   またよろしくお願い致します。

   返信
   • しげぞう より:

     2016年8月30日 12:29 PM

     翔様

     返信ありがとうございます。無事に解決できたようで良かったです。また何かあればいつでもコメント下さい。今後もよろしくお願い致します。

     返信
5. 翔 より:

   2016年8月29日 4:41 PM

   しげぞう様

   ご回答ありがとうございます！

   1～3についてそれぞれ確認してみたところ

   1.　ログイン自体は可能です。設定などを触ることはできるのですが、管理画面からサイトを表示することができません。ページが機能していませんと表示されてしまいます。

   2.　これは自分でもよく分かっていないのですが、ドメイン直下がどの階層なのかよくわからなかったので、一番上の階層である /home/○○○/wwwという家マークのところに全てコピーしました。さくらサーバーのドメイン設定でマルチドメイン→指定フォルダ選択のところは空白にしてみたのですが上手くいかず・・・

   逆に、元々あった /home/○○○/www/○○○というフォルダにコピーした内容を再び戻して、指定フォルダもそのフォルダを指定してみたのですが、これも失敗です。

   3.　パーマリンク設定を確認してみましたが、表示はされていませんでした。

   自分でも現状が上手く把握できていない為、書いている内容がわかりづらくなってしまい申し訳ございません。。。

   最悪アドレスの末尾を消すのは諦めますが、サイトが表示されないのは困りますので、それだけでもなんとか解決したいです。

   お忙しいのに申し訳ないのですが、知恵をお貸しくださいませ。

   返信
6. 翔 より:

   2016年8月28日 8:07 PM

   しげぞう様

   随分とご無沙汰しております。翔と申します。

   不慣れながら、昨日よりワードプレスでブログの運営を開始しました。

   ドメインの取得はムームードメイン、サーバーはさくらサーバーで
   インストールはクイックインストールをで行いました。

   ただ、サイトアドレスの末尾にフォルダの名前が入るのが気になって
   しまうので、消す方法があるか調べてみました。

   とあるサイトがやり方を紹介していたので、
   それを参考に一度やってみることにしました。

   そうすると、うまくいかないどころかサイトを表示することが
   できなくなってしまいました（泣）

   ワードプレスの管理画面には入れるものの、そこからサイトを
   表示しようとしても

   ・HTTP 500内部サーバーエラー

   と出てしまいます。（検索にアドレスを打ち込んでも同じ表示です）

   その記事というのがこれなのですが・・・
   http://calcioaffi.com/post-1153/
   （公開されるときは消していただいてかまいません）

   自己責任でと書かれてますが、上記サイトを参考に本当にそこに
   書かれていることをそのままやりました。

   後で知りましたが、サイトアドレスはまだしもワードプレスの
   アドレスを変更するとサイトにアクセスできなくなるんですね。

   ずっと無料ブログばかりやってきたので、本当ワードプレスは
   ちんぷんかんぷんです。訳が分かりません。

   サイトアドレスの末尾を消すだけで
   こんなに苦労するとは思いませんでした。

   どうすれば、再びサイトを表示させることができ、
   末尾を消した状態にすることができるのでしょうか。

   どうかお助けくださいませ

   返信
   • しげぞう より:

     2016年8月29日 11:49 AM

     翔様

     コメントありがとうございます。別のサイトを参考にサイトアドレスやWordPressのアドレスを変更したら表示されなくなったという事ですよね。私自身さくらサーバーはほとんど使った事がないため、検証自体はできないのですが、幾つか原因を推測してみたので、確認をお願いします。

     １．ログイン自体はできますか？

     まず、サイトのアドレスなどを変更した時にログインできなくなる現象があると思うのですが、ログインなどはできるのでしょうか？

     ２．作成したフォルダのコピーができているのでしょうか？

     参考にされたサイトに書かれている内容としては最初にインストールした時に作成したフォルダをコピーしてドメイン直下に移動させるという内容でしたが、これドメイン直下にWordPress関連のフォルダがコピーできているのでしょうか？

     ３．パーマリンクの設定画面

     もしログインできる状態であれば「設定」⇒「パーマリンク設定」へ進んで下さい。それで、設定画面の下の方に「.htaccess が書き込み可能ならこの操作は自動的に行われますが…」的な表示がないか確認をしてみてください。もしこのメッセージがある場合には「.htaccess」というファイルに原因があるかもしれません。

     一応上記３つを確認して教えてもらえると助かります。冒頭でも書いたようにさくらサーバー自体にはあまり詳しくないので、解決できるかは分かりませんが、私も色々と調べてみますね！

     返信
7. うさ子 より:

   2016年7月19日 1:34 PM

   しげぞう様

   返信ありがとうございます！
   おかげ様で投稿日とタイトルの位置を無事に変更することができました。
   まだまだ道半ばですが、自分が思い描くサイトが少しずつ出来上がってきて嬉しいです。どうもありがとうございました！

   返信
8. うさ子 より:

   2016年7月18日 2:05 AM

   連続ですいません。
   先ほどの質問の続きなのですが、記事タイトルの位置が、今はアイキャッチ画像の下に来てしまうのですが、それだと何だか分かりづらい感じになってしまうので、画像の上に記事タイトルを持ってくる方法はありますでしょうか？
   質問ばかりすいません…。サイトのURLも一応貼っておきます。

   返信
   • しげぞう より:

     2016年7月18日 10:35 PM

     うさ子様

     コメントありがとうございます。返信も遅れてすみません！えっとですね、まず、記事タイトルの位置とアイキャッチ画像の位置の変更なんですが、これを先にしておく方が良いかな？と思いますので、以下の記事を参考に位置の入れ替えにチャレンジしてみて下さい。
     ⇒アイキャッチ画像のサイズと位置のカスタマイズ

     それで、本題の投稿日を表示させる方法ですが、これは私の場合なんですが、「content.php」のこの部分を探します。

     </header><!-- .entry-header -->

     これがヘッダーの終わりの部分なので、この下に以下のようなコードを追加してます。

     <div class="show-date">
     <?php the_time('Y/m/d'); ?>
     </div>

     これですね、投稿日を表示するコードの部分っていうのが真ん中の一行です。この部分。

     <?php the_time('Y/m/d'); ?>

     なので、例えば「投稿日：」とかテキストを追加してこんな感じにもできます（私のはアイコンを追加してます）。

     <div class="show-date">
     投稿日：<?php the_time('Y/m/d'); ?>
     </div>

     とりあえずこれでcontent.phpの編集を保存。

     それで、この部分には「show-date」という名前を付けているので、次はスタイルシートで位置調整をします。

     スタイルシートでこんな感じで位置調整が可能です。

     .show-date {
         text-align: right;
         margin-bottom: 15px;
         font-size:15px;
     }

     ・投稿日を右寄せに表示
     ・投稿日の下に余白を15px
     ・文字の大きさが15pxなどなど

     投稿日を追加する場所は別の場所でもOKなので、色々と試してみても良いと思いますし、使ってみたい画像やアイコンなどがあればそれも使ってみても良いと思います。

     また何か分からない部分があればコメント下さい。今後もよろしくお願い致します。

     返信
9. うさ子 より:

   2016年7月17日 4:06 PM

   はじめまして。
   自分には敷居の高いと思っていたWordPressですが、こちらのサイトのお陰でやっと理解を深めることができました。
   まずは、しげぞうさんに心から感謝の気持ちをお伝えしたいと思います。どうもありがとうございます！
   それで、質問なのですが、こちらのサイトでは投稿日が記事タイトル下に表示されていますよね？これはどうやったら良いのでしょうか？
   Twenty Twelveでは投稿日が記事下につくようになっているようで、カスタマイズを自分なりに試してみたもののうまくいきません。
   また、お暇な時で良いので、教えていただけたら嬉しいです。
   もしすでに質問などで回答済みでしたら申し訳ないです。。よろしくお願い致します。

   返信
10. シン より:

    2016年6月14日 11:01 AM

    しげぞうさん。ありがとうございます！

    marginを調整したらうまく収まりました。

    それとまた質問なのですが笑、以前教えてもらった「オススメ」のマークをcssで作って目次ページに挿入しようとしたのですが

    ・XXX
    オススメ
    ・YYY

    という感じにXXXの右側に十分なスペースがあっても下にマークが入ってしまいます。

    この場合どうしたらよいでしょうか？

    返信
    • しげぞう より:

      2016年6月14日 11:10 AM

      シン様

      返信ありがとうございます。えっとですね、目次の場合に「li」タグを使っていると思います。

      「＜li＞」から始まって「＜/li＞」で閉じる感じですよね。この閉じタグ「＜/li＞」の前におすすめマークを入れたらいいような気がします。一度試してみてもし上手く行かない場合には再度コメント下さい。よろしくお願い致します。

      返信
11. シン より:

    2016年6月11日 1:29 AM

    しげぞうさん。返信ありがとうございます！

    ただいま教えてもらった通りにやったところ、
    本来、「・」があった位置が空所になって

    ⇒XXX

    という感じに左側の方にスペースができてしまいます。

    この場合どうしたらよいでしょうか？

    毎回、答えてくださってありがとうございます。

    返信
    • しげぞう より:

      2016年6月11日 10:28 AM

      シン様

      返信ありがとうございます。左側にスペースができるというのは右に寄ってしまうという事でしょうか？もし右に寄ってしまうというのであれば前回スタイルシートのコードで「margin」で調整できるかと思います。

      前回は「margin」で「8px 0 8px 0」としていましたが、これ時計周りに「上、右、下、左」の順番で余白を設定できます。なので、最後の「 0 」の部分だけ「-10px」とかに置き換えるとその分マイナスのmarginで右に寄ると思います。一度試して見て下さい。

      それから反映されない場合や、質問の意図と違うという場合にはお手数ですが、一度URLを教えて頂けると助かります。どうぞよろしくお願い致します。

      返信
12. シン より:

    2016年6月9日 8:53 AM

    しげぞうさん。返信ありがとうございます！

    それでまた質問なんですが
    記事下にやを使って内部リンクを貼ろうとしたのですが形が

    ・XXX
    ・YYY

    という感じでこのサイトのように
    ⇒XXX
    ⇒YYY

    という感じにできませんでした。このような形にするにはどのようにコードを貼ればいいのでしょうか？

    返信
    • しげぞう より:

      2016年6月9日 1:28 PM

      シン様

      返信ありがとうございます。えっと、私のサイトの場合なんですが、普通の目次にはリストマーク「 ・ 」を入れる形にしていて、記事下の内部リンクでは「 ・ 」をいれずに「⇒」を入れるようにしてます。

      コレ実はちょっと面倒な部分で、本当はどちらかに統一すれば非常に簡単なんですが、私と同じように「・」「⇒」を使い分けるのであればスタイルシートの次の記述をします。

      .link-list li {
        list-style: none;
        margin: 8px 0px 8px 0px;
      }
      
      .link-list {
        margin-top:-22px !important;}

      最後のmragin-topの部分で「 -22px 」にしているんですが、リストにする項目をちょっと上に持ち上げるコードです。多分やってみれば分かると思いますので、ここの数値は後で変更してみても良いと思います。

      それで、上記をスタイルシートに追加したら記事下の内部リンクをする部分を次のように記述してます。記事投稿画面です。

      <ul class="link-list">
      <li>⇒リンク１</li>
      <li>⇒リンク２</li>
      </ul>

      こんな感じで書くと「・」のないリストになりますし、リストの上下に8pxずつの余白（ちょっと広め）をとってますので、誤クリックもないかなと思ってます。

      もしこれで反映されない場合にはお手数ですが再度コメント頂けると助かります。どうぞよろしくお願い致します。

      返信
13. シン より:

    2016年6月5日 10:22 PM

    しげぞうさん。もう一つ質問ありました！

    記事下でこのサイトのように内部リンクを貼るつもりなのですがこのリンクは目次ページのリンクのように、をつけた形にした方が良いのでしょうか？

    1記事あたり4、5ぐらい内部リンクを貼ろうと思うのですが普通のリンクを貼って問題ないでしょうか？

    返信
    • しげぞう より:

      2016年6月5日 11:53 PM

      シン様

      コメントありがとうございます。そうですね、私のブログの記事下でやっている内部リンクは目次ページの物と同じです。普通にリンクを羅列するよりも目次のようにリストタグ（ulとかli）を使って書いた方が良いと個人的には思ってます。普通に羅列してしまうとGoogleからキーワードの詰め込みと思われたら嫌なので、リストにして内部リンクにするのが良いと思います。

      それと「おすすめマーク」ですが、これはオリジナルで作成したやつで、アイコンフォントにして使ってますが、ダウンロードとか公開とかはしてません、というのもアイコンフォントにする手順の説明が長くなるので、省略しちゃった形です、すみません。

      手順的には画像（おすすめマーク）を作成して「icomoon」というサイトでインポートし、それをアイコンフォントとしてダウンロードして、各種設定をしていくような手順なので、これを説明するとなると長いですよね（笑）

      一応代替案として別のマークを以下の記事の中盤あたりで解説してます。

      ⇒アフィリエイト報酬を爆発的に増やした５つの施策

      返信
14. シン より:

    2016年6月5日 10:05 PM

    しげぞうさん。

    このページの赤い「オススメ」という表記はどうやってやればいいのでしょうか？

    このサイトのどこかに書かれていた気がするのですが見つけられなかったです。

    返信
15. よし より:

    2016年5月5日 12:46 PM

    続けてコメントすみません。
    Twitterについてですが、画像付きのリンクツイートをされていますがどうすればできますか？
    宜しくお願いします。

    返信
    • しげぞう より:

      2016年5月6日 11:50 AM

      よし様

      コメントありがとうございます。おそらく「Twitterカード」の事だと思います。これを設定しておけばブログのURLをツイートするとアイキャッチ画像と一緒にツイートできます。詳しくはこの記事の後半で解説してますので、一度試してみて下さい。
      ⇒プラグイン不要でWordPressにOGPを設定する方法

      返信
16. MAT より:

    2016年4月30日 11:34 AM

    しげぞう様

    FTPアカウントのメリットと日本語化プラグインのご回答ありがとうございます。

    重箱の隅をつつくような質問でしたが、セットアップやカスタマイズは、それだけこちらの記事がわかりやすかった、ということになります。^^

    おかげで、わずか1日で記事作成可能な所まで行きました。

    今後、ワードプレスの運用を頑張っていく予定です。^^)v

    返信
17. MAT より:

    2016年4月29日 11:57 AM

    3連投コメントで申し訳ありません。
    MATです。。。

    ワードプレスのインストール記事ありがとうございます。
    かなりわかりやすく助かっています。

    ただ、自分のサイト

    で子テーマを作り、style.cssに以下のカスタマイズを追加していったのですが、
    なぜかナビゲーションメニューの背景色がつきません。

    基本、コピーして追加しただけなのですが、何が悪いのか？おわかりになるでしょうか？

    右サイドバーの背景色はついているのですが。。。

    以下の記述をstyle.cssの下の方に追加していっています。

    /* フォントと文字の大きさ、色 */
    /* 本文中の行間 */
    /* サイドバーの行間と文字の大きさ */
    /* ブログタイトル部分 */
    /* 記事タイトル */
    /* ウィジェットタイトル部分 */
    /* 見出しh2 */
    /* 記事内のリンク */
    /* サイドバーの文字 */
    /* サイドバーのリンク装飾 */
    /* サイドバーのリンク間の境界線 */
    /* ナビメニュー */　　　　←おそらく問題の場所
    /* ナビメニューのを均等に配置する */
    /* ナビゲーションサブメニュ－ */

    サーバーはエックスサーバーです。

    もし、何かお心当たりがあるようでしたら、教えていただけないでしょうか？
    よろしくお願いいたします。

    P.S.こちらのブログのサイトドメインはコメントからは削除していただけると助かります。

    返信
    • しげぞう より:

      2016年4月30日 9:26 AM

      MAT様

      コメントありがとうございます！WordPressのブログ作成されたんですね！おめでとうございます。日本語化に対応するプラグイン 【WP Multibyte Patch】とプラグインの翻訳は関係はないと認識しております。インストールするプラグインに日本語化のファイルがあれば日本語に対応されます。

      なので、プラグインの更新などで日本語対応になったり、英語に戻ったりするプラグインもあります。現時点で英語のメニューになるプラグインは日本語対応のファイルが元々ないプラグインだと思われますし、現時点で私の場合もAkismetやBackWPupなどは英語表示になってます。

      日本語対応ファイルが別に準備されているプラグインもありますので、「プラグイン名＋日本語」などで検索して調べてみても良いと思います。ただ、基本的な使い方は同じなので、特に英語のままでも困る事はあまりありませんし、頻繁に使うようなプラグインってあまり多くはないので、最初の設定さえしっかりできればOKかなと思います。

      返信
18. MAT より:

    2016年4月29日 9:14 AM

    こちらの記事の通りにワードプレスをインストールしたのですが、新規でインストールしたプラグインの説明や設定ページの表記が全て英語になってしまいました。

    これは日本語化に対応するプラグイン 【WP Multibyte Patch】を先に入れておかなかったせいでしょうか？

    もしよろしければ「最初にしておくべきWordPressの初期設定」の所に「日本語化に対応するプラグイン 【WP Multibyte Patch】」の記事リンクを入れてもらないでしょうか？

    また、テーマの選び方を説明する記事リンクもあると助かります。
    自分の最初のテーマは別のだったので、まずはそちらと同じようにtwentytwelveにしようかな？と思ったのです。

    後、今からでもプラグインのAkismet、BackWPup、Category Order、Edit Author Slugの説明文の表記を日本語にすることはできないでしょうか？

    自分のはなぜか英語表記になっています。「作者」と「詳細を表示」だけ日本語です。^^;)

    返信
19. よし より:

    2016年4月28日 5:02 PM

    早速ありがとうございます。
    「 ?> 」の後ろに記述をしておりました・・・
    今無事に記述できましたのであとは様子を見てみます。
    こんな知識もないのにしげぞうさんのお陰でブログを作ることができました。
    初心者にも分かりやすく書いてくださってるので本当に感謝しております。
    （他のブログは難しくて参考にできません）

    Googleで動きがあったんですね。
    そうゆう時に焦って何かしない方が良さそうですね。
    いろいろとありがとうございました。

    返信
20. よし より:

    2016年4月28日 1:11 PM

    いつもありがとうございます。
    アクセス源についてアドバイスありがとうございます。
    このまましばらく様子を見てみます。

    構造化データのエラーについてもありがとうございます。
    記述追加をしましたがサイトを表示すると上部にこの記述がでてしまいます。
    functions.phpの一番下に記述をしましたが記述場所が間違っているのでしょうか？
    何度もすみませんが宜しくお願い致します。

    返信
    • しげぞう より:

      2016年4月28日 3:09 PM

      よし様

      返信ありがとうございます。サイトの上部に記述がでるのは多分どこか間違っていますね。確認するポイントは２つです。

      １．functions.phpの記述ですが、この記述になります。

      <?php
      
      //ここにコードの記述していきます
      
      ?>

      最後が「 ?> 」で終わっていれば問題ないと思いますが、これより後に書くと多分エラーになるかも？と思いますので、「 ?> 」の手前に記述がされているか確認をしてみて下さい。

      ２．うっかり別のファイルに記述していないか確認。

      私もよくやるのですが、functions.phpへの記述を別のファイルに書いている場合がありますので、これも確認してみて下さい。

      以上２点を確認して上手く行かない場合には再度コメント下さい。

      やはり最近Googleで動きがあるようで、アルゴリズム（順位の判断基準）がちょっと変更されている可能性があります。私の手持ちのサイトでも最近順位がおちたサイトが幾つかあります。なので、タグ自体が原因かどうかは私も分かりませんが、とりあえず順位が回復するように祈るのみですね！

      返信