WordPressまでの道のり
一番最初は、アメーバブログで「やっぱり服が好き」というブログをやっていました。
約2年間、記事にして70ほど書いたところで、アメブロの設定が大きく変わってしまい利用しづらくなったので、gooブログへ移動しました。
その後「やっぱり服が好き2」として3年半、99の記事をアップしてきました。
今回、Wordpressに挑戦しようと思ったのは “i-mac5k, 27inch” を買う(→ #15 iMac (Retina 5K, 27-inch, Late 2015 )予習としていろいろなブログを見たことがきっかけです。
多くのブロガーさんがWordpressを使っていて、ブログ画面が皆かっこいい!
「こんなブログができたらいいな」という憧れの気持ちからwordpressを始めました。
WordPressでブログを書き始めるまでの長い道のり
自由度が高いことが売りのWordpress。
最初は、本当に大変でした(今でも大変ですけど…)。
説明を見ても、何を言っているか分からない(汗)ので、分かりやすく書いてあるブログを捜すために、1時間くらいネットで調べることもざらでした。
誰かのためになればと、たどった手順を書き残しておきます。
- ドメインを申し込む
→ 年間1,274円(Xドメイン)でした。
→ ドメインとは “http://extra-vagant.xsrv.jp/” の “extra-vagant.xsrv.jp”のことです。住所みたいなものです。 - サーバーを申し込む
→ 後で気づいたのですが、サーバーを申し込むと、無料でドメインをもらえる「ドメインキャンペーン」をやってました。見なかったことにします。
→ 「初期サーバー設定費」なるものが3,000円。あとは月1,000円です(Xサーバー)。 - wordpressをインストール
→ サーバーの管理画面(サーバーパネル)の自動インストールボタンで、簡単にインストールできました。 - WordPressの初期設定
→ プラグイン(携帯電話でいうアプリみたいなもの)をいくつか有効にしました。① “Akismet”(スパム対策。これがないと一日数百通も迷惑メールなどが来るそうです。最初から入っているので、「有効」をクリックするだけ。)
② “Login LockDown”(ログイン画面でのパスワード入力を試みる回数を制限するもの。ダウンロードして「有効」をクリック)
③ “WP Multibyte Patch”(英語圏で作られた WordPress を日本語環境で正しく動作させるために必要となる機能。最初から入っているので、「有効」をクリックするだけ。絶対に必要なものなのだそうです)
④ “Google Analytics Dashboard for WP”(リアルタイム解析をしてくれるものです。ダウンロードして「有効」をクリックする必要があります。『Google Analyticsのアカウントが必要』という一文を見落とし、2時間くらいさまよいました(涙)。結局、英語のエラーメッセージで気付きました)
⑤ “WassUp”(これもアクセス解析プラグインです。使い方は 『ここ 』にあります)
⑥ “All in One SEO(Search Engine Optimization 検索エンジン最適化) Pack”(検索エンジンの検索結果ページで、ホームページが表示される順位を上げるためのものです。『ここ 』や『ここ 』を参照しました)
⑦ “Lightbox Plus Colorbox”(画像を拡大するものです。スライド形式にすることもできます。『ここ 』を参照しました)
⑧ “WordPress Popular Posts”(サイドバーに表示する人気記事一覧。『ここ 』と『 ここ 』を参照しました。特に後者は素晴らしい)
⑨ “Broken Link Checker”(自動でリンク切れのチェックと警告をしてくれるプラグイン)
⑩ “Optimize Database after Deleting Revisions”(編集するたびに保存されるバージョン履歴を削除するもの) - WordPressの基本的な使い方は 『ここ 』を参照しました。
今後の課題
設定全般とプラグインの学習は必須として、それ以外に、
『HTML/CSS/PHP の学習はしていかねばならない 』ようです。
『見た目のデザインを変えるのはCSS 』らしいので、まずはここから勉強していきます。
『HTMLの基本はここで勉強できる 』そうです。
『PHPはここを参照すると良い 』そうです。
半年後くらいにはよくなっているかなぁ(遠い目)。頑張ります!
その後
その後の経過は以下の通りです。
- 2016年2月3日(水)「現役アフィリエイターが教える!しっかり稼げる Googleアドセンスの教科書」をkindleで購入。
→ 3日かけて2度ほど読むが、実際に広告を貼る画面を見ながら学習する必要があると知る。
→ 【追記 2016年2月10日(水)】実際に広告を貼るようになると、広告の大きさなどの記述が良くわかるようになる。
→ “Adsense狩り”(広告タグをアダルトサイトや掲示板などに勝手に転載される。禁止行為)なるものがあることを知る。対策をしなければならないことも学ぶ。 - 2016年2月5日(金)ブログのサイドバーのいじり方を知る
→ Google Adsense の手順を学習中に、「管理メニュ」-「ウィジェット(ブログパーツのこと)」をクリック。その時、画面中央に「サイドバーウィジェット」があることを知る。
→ 画面左側にある「利用できるウィジェットエリア」の [s] がついているもの(例:[s] 新着記事)をドラッグし、画面中央の「サイドバーのウィジェットエリア」に張り付けると機能することを知る。
→ それぞれの項目は、「ドラッグ」ー「貼り付け」で簡単に順序を入れ替えられることも知る。 - 2016年2月6日(土)Google Adsense に申し込む。
→ 記事を7つ書いた時点で申し込み。画像満載、外部・内部リンク、引用満載での申し込みに不安を感じるが、クリック。
→ 一次審査は自動で行われるらしく、ほぼ同時に審査が通る。
→ 二次審査へ。広告を貼るのだが、当然張り方は分からないので、『ここ 』を参照する。
若干画面が違うのが気になるが、同じ言葉を探して、なんとか貼り付ける。
→ 2016年2月8日(月)午前中に広告が張られる。2月6日(土)に申し込んだので2日で審査に通ったことになる。
→ 最後に、“Adsense狩り”対策をする。
重要1:Google Adsense のホーム画面にある太陽みたいなマークをクリック。プルダウンメニューに「設定」と言うのが出てくるのでクリック、左側のサイドバーに「アカウント」言うのが表示される。その下に「サイト管理」というのがあるのでクリック。
重要2:“http://”の後に空欄の四角がある。その中に自分のサイトのアドレスを打ち込む(最後の“/”はいらない)その後、“自分のサイトのみ自分の広告コードの使用が許可されています”の横の四角をクリックする。“☑”マークが入るので、赤い「サイトを追加」ボタンをクリックする。これで完了。 - 2016年2月10日(水)ブログ下に『人気ブログランキング』と『にほんブログ村』のバナーを貼る。貼り方は「管理メニュー」→「ウィジェット」で「投稿SNSボタン下」に「テキスト」をドラッグして貼り付けるスペースを作り、それぞれのバナーからコピーしたものを貼るだけ。
- 2016年2月12日(金)深夜「見出しタグh3」などのいじり方を知る。
→ @ottaka18さんのブログ、「いつもていねいに」の『【第4回】初心者の私でもできた「Simplicity」のカスタマイズ(其の壱)』を参照し、一部変更した。
→ 「強調文字を蛍光ペンにする」際の微調整は、ましばなさんの『ままはっく 』を参照した。この2人のブログがなかった迷宮から出てこれなかった。感謝。
- 2016年2月13日(土)写真を拡大できるようにした。「管理メニュ―」-「外観」-「カスタマイズ」で、「画像」をクリック。「画像リンク拡大効果のタイプ」の「ライトボックス」をクリック。「プラグイン」で「Lightbox Plus Colorbox」を検索し、ダウンロード、「有効」にした。その後は ここ で細かい設定を学んだ。
- 2016年2月14日(日)「すらすらわかるHTML&CSSのきほん 狩野祐東箸」をkindleで購入。
- 2016年2月15日(月)“WordPress Popular Posts” の設定をいじる。
[1] プラグインの設定をいじる
① 「管理メニュ―」ー「ダッシュボード」-「プラグイン」ー「インストール済みプラグイン」で “WordPress Popular Posts”をクリック。
② 「停止 | 編集 | Settings」の “Setting”をクリック
③ 「Stats | Tools | Parameters | FAQ | About」の “Tools” をクリック。
④ 「Thumbnails」の「Pick image from:」を “Featured image”にし、下の “Apply”(適用)をクリック。 こうすると、アイキャッチ画像がランキングの画像になる。
⑤ 「Data」の「Log views from:」を “Visitors only”とした。こうすると、自分のログインはカウントされなくなる。
⑥ 「管理メニュー」ー「ウィジェット」の「利用できるウィジェット」の中の「Word Popular Posts)」をドラッグして「サイドバーウィジェット」に張る。
[2] ウィジェットの設定をいじる
→ 『これ 』と『これ 』がとても分かりやすい。おすすめ。
① “Title”をつける。「人気記事ランキング」にした。
② “Show up to”(何位まで表示するか)は “10“ にした。
③ “Sort posts by”(記事の並び順の基準となるもの)は “Total views”(閲覧数)にした。
④ “Time Range” は “All-time”にした。
⑤ “Post type(s)” は “post”(投稿記事のみ表示。固定記事は除外)にした。
⑥ “Posts settings” は “Shorten title” と “Display post thumbnail(縮小画像)” をチェック。
⑦ “Stats Tag settings”(タグ表示の設定)は “Display views” (記事タイトルの横にアクセス数を表示)にした。
→ この状態で 「保存」を押すと、⑥ の“Posts settings”の窓が開く。“Shorten title to ” で文字数を決めることができる。 “Display post thumbnail”で画像の大きさを決めることができる。今回は、“Width” 80px, “Height” 80px にした。 - 2016年2月17日(水)ヘッダーのブログタイトル位置と大きさを変更した。
→ 『パソコン初心者日記 』を参照。“ブログタイトルの文字を変更”の青い枠で囲ったコードをコピーして子テーマに貼り付けた。
→ 設定は “font-size:60px” にした。
→ 「管理メニュ―」ー「ダッシュボード」ー「メニュー」ー「外観」ー「ヘッダー」ー「ヘッダー画像」とする。
→「ヘッダーの高さpx」を “250” にした。
→「現在のヘッダー」の「ヘッダーの新規画像を追加」をクリックし、画像を選択。切り取りたいところに、四角を移動させてクリックする。
→ 一つ上に戻り「色」をクリック。「サイトタイトル色」「サイト概要色」をいじる。 - 2016年2月17日(水)携帯用のトップ画面の設定をいじる。
→ 『ここ 』を参照して「記事を読むを表示させないコード」と「本文抜粋を非表示にするコード」を mobile.cssに書き込んだ。 - 2016年2月17日(水)トップ画面の「記事を読む」を右側に移動。
→ 『ここ 』を参照して、「『記事を読む』ボタンの装飾」を変え、「右側に移動」した。
→ 色は、『ここ 』を参照して、“steelblue”(#4682b4)にした。 - 2016年2月17日(水)トップ画面の記事と記事の間に線を引いた。
→ 『ここ 』を参照した - 2016年2月18日(木)マウスを画像に載せたとき、少し透過する設定にした。
→ 『ここ 』を参照した。 - 2016年2月18日(木)“WordPress Popular Posts” に順位をつける。
→ 文字の色は白(#ffffff)、背景の色は Sandy Brown(#F4A460)、widthとheightは22pxにした。 - 2016年2月19日(金) “ブログカード ” なるものの存在を知る。
→ URLを書くだけでサイト内にある投稿・固定ページへのリンクをブログカード化できる。
→ ブログカードの表示方法も簡単に変更可能。「ダッシュボード」-「外観」→「カスタマイズ」に「ブログカード」設定の項目がある。
→ 「カード幅を広げる」をクリックすると、囲みのバランスが良くなる。 - 2016年2月24日(水)15:27にAmazonアソシエイト・プログラムに申し込む。同日16:00に審査通る。
→ 「カエレバ」のカスタマイズは 『ここ 』を参考にした。 - 2016年8月100,000PV到達。
- 2016年1月14日、ブログを始めて1年経過。197,911PV到達。
- 2016年1月16日200,000PV到達。
- 2017年1月31日 amazon アソシエイト1回目の支払い(2016年11月分まで。次は2016年12月分からのカウント)最初の支払額に達するまでに一年かかった(汗)
- 2017年2月1日 楽天のアフィリエイトを始める。カエレバの並列リンク用の所も記入しないといけないということに気づかず右往左往。こちらのサイトを読み解決した →『my pace, my life 』
- 2017年2月4日 ブログを書いてもGoogleの検索に引っかからないことが多いので、調べてみた →『Change the world 』を読み対策をした
- 2017年2月21日 google adsense1回目の支払い。2016年2月18日に広告が貼られたので、実質1年か。長かった。自分を褒めてあげたい(笑)
- 2017年2月22日 トップ画面に表示される記事数を28に増やした。これでバランスが良くなる。 [ダッシュボード] → [設定] → [表示設定] → [1ページに表示する最大投稿数] をいじる。
- 2017年2月22日 モバイル画面を少し改良する。[外観] → [カスタマイズ] → [レイアウト(全体・リスト)] → [モバイルメニュータイプ] を [スライドインダーク(ボタン下)] に設定すると、モバイル画面の余計な表示がなくなる。やったぁ!こちらを読み解決 → [Simplicity1.5.9公開。スマホ用にスライドインメニューの追加 ]
- 2017年2月28日 画像を二枚並べて表示するプラグイン 「Shortcodes by Angie Makes」を導入する。使い方は 『NETAONE 』『Naifix 』を参照した。画像をある程度大きくすると、写真の間のスペースが小さくなる。
- 2017年3月2日 モバイルの幅を狭くする。『brasil tips 』の「⑭ 投稿記事幅を狭くする」を参考にした、幅を“10px”に変更した。
- 2017年3月2日 カテゴリーの順序を入れ替えるプラグイン「Category Order and Taxonomy Terms Order」を導入。
- 2017年3月3日 コードを貼るプラグイン「Crayon Syntax Highlighter」を導入。
- 2017年3月3日 コメントの一番上を最新のものにするには、[設定] → [ディスカッション] → [( )コメントを各ページのトップに表示する] の ( )の部分を [新しい] にする。
- 2017年3月3日 スパム対策のプラグイン「Captcha by BestWebSoft」を導入。場所は設定の下の [BWS Plugins]。ここで細かい設定ができる。
- 2017年3月5日 画面をシンプルにしたくて [レイアウト(投稿・固定ページ)] → [関連記事の表示] のチェックを外す。代わりに、プラグイン [WordPress Related Posts] を導入した。
- 2017年3月6日 バックアップを取る。[エックスサーバーの全WordPressデータをバックアップする方法 ] と [Xサーバー簡単バックアップ方法 ] を参考にした。サーバーパネルにログインして、[アカウント] の下にある [バックアップ] の [ホームディレクトリ] をクリック。全ファイルをバックアップする場合はこれをダウンロードする。次に、[データベース] → [MySQL設定をクリック] → [MySQLバックアップ]でPCにダウンロードする。
- 2017年3月6日 サイドバーにブログランキングのパーツを貼った。 手順は [外観] → [ウィジェット] → [サイドバーウィジェット] の「アーカイブ」の下に [テキスト](任意のテキストや HTML)を貼る。そこに、「人気ブログランキング」の「ブログパーツ(ランキング形式)」を貼る。幅は「標準」にした。
- 2017年3月6日 リビジョンの削除とDBの最適化を実施するプラグイン「Optimize Database after Deleting Revisions」を導入した。使い方は 『WordPressの使い方と設定 』『イワシブログ 』『NETAONE 』を参照した。
- 2017年3月6日 Simplicityのバージョンを上げた。style.css の /* ヘッダー文字の大きさの変更*/ で “color:#fff”にして文字を白くした。
- 2017年3月6日 サイドバーのタイトルの装飾を変える。『Daily Report of 924 』を参考にする。『style.cssに書き込んでも変化がないとき 』は、ブラウザのキャッシュを削除するといいと知る。『safari のキャッシュの空の仕方 』は [環境設定] → [詳細] → 一番下の [メニューバーに開発メニューを表示] の横のチェックを入れる → メニューバーの [開発] をクリックし、[キャッシュを空にする] をクリックすれば良い。
- 2017年3月8日 『Time Capsule がオレンジ色の点滅をした 』ので、どうしたらいいか調べた。① 上(普段は隠れている所)の [移動] → [アプリケーション] → [ユーティリティ] というフォルダをクリック ② [AirMac ユーティリティ] をクリック ③ 新たな画面が立ち上がる。下の Time Capsule の横に赤い数字があるときはクリック ④ 小さい画面が立ち上がる。[アップデート] をクリック
- 2017年3月8日 広告について考える。 ①「投稿本文中」(H2タイトル上)を [テキスト] にして「レスポンシブ」を貼った。これで、PCと携帯の両方に広告を貼れる。 ② 「投稿本文下」を [ [S] パソコン用ダブルレクタングルウィジェット] にして 「336×280」の広告を2枚(別のもの)貼った。モバイル用の [ [S] モバイル用テキストウィジェット] に 「レスポンシブ」を貼った。これで、PCは左右2個の広告が、携帯は1個の広告が貼れる。 ③ 「サイドバーウイジェット」には [検索] の下に [[S] パソコン用広告ウィジェット] を貼り 「300×600」 を貼った。これで、PCにだけ大きいサイド広告が貼れる。同じ、サイドバーの [カテゴリー] の下に [[S] パソコン用広告ウィジェット] を貼り 「300×600」(同じもの) を貼った。なお、新しい広告コードを生成して、ブログに貼り付けても数時間は広告が表示されない模様。
- 2017年3月8日 Simplicity のバージョンを上げるに当たって、タイトル画(ハンガーの写真)の変更で苦労したので記録。[ヘッダー] → [新規画像を追加] → [画像選択] → [選択して切り抜く] → [切り抜かない](右の白抜きの方。[選択して切り抜く] の後に [切り抜かない] が出てくるのはいかがなものか。ともかくこれで大きい画像をヘッダーに載せることができる。新たにハンガーの画像を作成する必要はない)
- 2017年3月15日 プロフィール欄を作る。『糧ぶろぐ 』『ポントピ 』『HASHIO_LOG 』『たもトピ 』さんを参考にした。
- 2017年3月17日 「トップへ戻るボタン」の画像を変えた。画像は 『EC design 』からダウンロードした。
- 2017年3月23日 サイドバーのカテゴリーをカスタマイズした。『note box 』さんを参考に色をいじった。数字を囲む色は薄い水色の “#87cefa” にした。文字の色は [記事を読む] と揃え、“#4682b4” にした。行間の色は“#51b0f5” にした。他には『うぇぶあしび 』 さんのサイトも参考にした。また、「カテゴリーの項目の下に下線を引く」ことができなかったので、その部分だけを抜き出して書いたら機能した。
#sidebar aside li.cat-item a { border-bottom: 1px dotted #51b0f5; /*次のカテゴリーとの間に線を引く*/ }
- 2017年3月23日 html, css のファイルは一定期間キャッシュされるので、サイトのデザインを変更しても反映されない時がある。そのような時は『スーパーリロード 』(該当するサイトを開いて、[command]+[R]とする)をすれば良い。
- 2017年3月24日 ping をwordpressから送信するよう設定した。『オリジナルブログはじめてガイド 』を参照した。
- 2017年3月25日 カエレバの背景に色をつけた。カエレバのボックスの記述のところに以下の一文を追加。
background-color: #f0fffe;/* 箱の色を薄い水色にした*/
- 2017年6月25日 WordPressの有料テーマVIEWを導入した。あまりの完成度の高さに驚愕する。
この記事へのコメントはありません。