素人が同好会のホームページを3週間でリニューアル。その秘密はEBC。

computer_man

Dear 同好会ホームページを放置しているあなた

あなたの所属する同好会のホームページは定期的に更新されていますか?

年に数回ちょこっと文章を修正するだけで、デザインをブラッシュアップすることもなく、古くさ~いホームページになってませんか?

これでは、せっかくホームページを訪問してくれたとしても、休眠しているサークルと思われてしまいます。 放置されたホームページは同好会のイメージを落とすことになり逆効果です。

さて、私の所属する同好会のホームページもそんな状態が続いていましたが、一念発起して全面改訂し、リニューアルオープンしました。

この同好会ホームページは、WordpressというCMSを使って作りました。Wordpressは、カスタマイズの自由度が高くブログ作成では一番人気のCMSですが、逆にサーバーの準備やCSSなどの知識が必要なちょっと敷居の高いCMSでもあります。

私はウェブサイト作成のドシロウトでWordpressを使うのも初めてでしたが、この同好会ウェブサイトを約3週間という短時間で作ることができました。そして、かっこいいサイトが作れました(自画自賛)。

その秘密は、EBC(Ellora Bloggers Club)というブログオンラインサロンです。

EBCの何が役に立ったかというと、以下の3つに集約されます。

  • EBCで手に入れることのできるGush4というテーマを使う。
  • 会員専用のわかりやすい説明記事を読むことで作りたいホームページのイメージをふくらませる。
  • ホームページ作成で遭遇する不明点は、ドンドン質問して解決する。

ということで、この記事は、EBCという強力な援軍を手に入れた主人公(=ドシロウト、つまり私)が同好会ウェブサイトを構築するまでの愛と感動の物語です。

放置される同好会ホームページ

学校のクラブ活動や同好会、地域のサークルなど同じ趣味を持つ人の集まりが世の中には沢山あります。

世田谷天竜太鼓もそんな同好会の一つ。

世田谷天竜太鼓は、世田谷の二子玉川、成城、砧地区で活動するアマチュアの和太鼓サークルです。和太鼓に魅せられた老若男女が和気藹々と活動する地元密着、仲間づくりに最適な和太鼓サークルです。
(世田谷天竜太鼓ホームページのプロフィールより引用)

同好会ホームページ1号、作成ス! → 放置

同好会をやっていると、外の人に同好会の活動内容をアピールするために同好会のホームページを作りたくなります。アピールの目的は、例えば以下のようなことです。

  • メンバーを募集したい
  • イベントに呼んでほしい
  • 同様の同好会と交流を深めたい

清貧をモットーとする世田谷天竜太鼓は、なるべくお金をかけずに、自分の手で、無料ホームページサービス(FC2ホームページ)を使って同好会ホームページ1号を作成しました。

しかし、カッコいいホームページを作る実力なく、素人っぽさ満点のホームページとなりました。自分の実力を思い知りました。これが2008年だから今から8年前ぐらい(今は2016年)。

それからしばらくは頑張って更新してましたが、ホームページをカッコよくする術を知らず、更新も大変なのでだんだんと更新頻度が低下していきました。

ホームページに時間を費やすより、好きな和太鼓の練習をする方が大事だよ。

これが当時の私の気持ち(言い訳)。

同好会ホームページ2号、作成ス! → 放置

2013年ぐらいに、スマホからホームページをアクセスする人が増えてきたので、スマホ対応の無料ホームページサービス(Jimdo)を使ってスマホ対応サイトを構築しました。

しかし、できあがったサイトはなんかカッコよくなく、またJimdoのデザインの自由度が少ないことから、だんだんと更新頻度が低下。

ホームページに時間を費やすより、好きな和太鼓の練習をする方が大事だよ。

これが当時の私の気持ち(再掲)。

同好会ブログサイト、作成ス! → 虫の息

同好会の活動内容を外の人に紹介するホームページとは別に、同好会メンバー向けに練習メモや演奏会の写真などを公開するブログも構築していました。

これも無料のブログサービスであるSeesaaを利用して、なるべくお金をかけずに運営していました。

2008年に初投稿し、最初はいろいろ書いてましたが徐々に練習記録が中心となり、自分のためのメモという状態になりました。 虫の息状態です。

ホームページに時間を費やすより、好きな和太鼓の練習をする方が大事だよ。

くどい!

ということで、ホームページやブログはあるけど数年間は放置に近い状態が継続することとなりました。

はい、世の中にゴマンと存在する放置状態の同好会ホームページのできあがり。

耳が痛い人、一杯いませんか?

EBCあらわる、救世主となるか?

去年のことですが、ブログオンラインサロンというのが流行っているといことを知りました。ブログオンラインサロンとは、ネットのコミュニティサービス機能を活用した有料のブログ塾。

個人的にはブログをもっと積極的に取り組みたいと思っていたので、オンラインサロンをいくつか比較検討しました。

そして、初心者に優しいオンラインサロンであるEBCを発見、昨年末に入会しました。

EBC(Ellora Bloggers Club)とは

EBCとは、Ellora Bloggers Club(エローラ・ブロガーズクラブ)の略で、エローラさんが主催する有料オンラインサロンです。エローラさんは、初心者ブロガー向けサイトの「Naifix」を運営されている超有名ブロガー。

EBCの特徴は、「ブログ初心者のために作られた環境」ということ。

私のようなブログど素人にとっては、以下のようなメリットがあります。

  • 初心者の疑問を遠慮なく質問できる。
  • 初心者の私が読んでも理解できるわかりやすい専門記事
  • 多様なメンバーからの刺激があり、初心者の私がブログを継続しやすい環境

そして私が入会を決める決定打になったのは、EBCの入会用ページに記載している次の言葉。

何十万円もする某高額塾では、「わからないことは聞かず自分で調べてください」というスタンスらしいですが、ここではその逆です。むしろ調べる前に聞いてください

その言葉を聞きたかった! 入会します。

リニューアルやったるで!

昨年末、私はブログ勉強のためEBCに入会しました。

ここで得ることのできる知識は想像以上でした。

入会してすぐにこの知識を使いたいという欲求がどんどん高まっていくのを感じました。

が、私は遅筆です。 記事を作成するのが超遅いのです。

そこで思いました。

EBCで得た知識を、放置している同好会ホームページで試してみよう。どうせやるなら全面改訂だ! リニューアルやったるで!

ということで、EBC入会1ヶ月後には、同好会ウェブサイトを全面リニューアルしようと決意してました。

同好会ホームページのリニューアルに向けた戦略

リニューアルにあたり、いきあたりばったりにならないよう、よーく考えてみました。

  1. 旧ホームページの課題の再定義
  2. リニューアルの目的の設定
  3. 目的達成に向けた具体的な施策

を行いました。

旧ホームページの課題の再定義

ここまで説明してきたとおり、同好会の旧ウェブサイトは目的別に3つのサイトに分かれており、どれも無料サービスを使っていました。

旧ウェブサイト
区分 目的、概要 利用サービス 有料/無料
同好会ホームページ1号 サークル紹介目的。PCでの表示用。 FC2ホームページ 無料
同好会ホームページ2号 サークル紹介目的。スマホでの表示用。 jimdo 無料
同好会ブログサイト 同好会メンバー交流用。練習記録や演奏写真など。 Seesaaブログ 無料

これらの旧サイトでは、以下の2つの問題がありました。

  • 3つ別々のサービスため管理が大変。
  • デザイン古くさいが、カスタマイズが大変。

リニューアルの目的

上記で定義した現状の課題の解決と、EBCでの勉強意欲。この2つを融合し、以下の目的を設定しました。

EBCで学びながら、カッコイイ同好会ホームページを作り、運用負荷も軽減する。それにより、更新のモチベーションを維持する。

目的達成に向けた具体的な施策

リニューアルにあたり、具体的には以下の施策をとりました。

  1. EBCでもらえるテーマのGush4を活用し、カッコいいデザインを実現する。
  2. その際、Gush4を骨の髄までしゃぶって、HTMLやCSSを勉強する。
  3. 現状の3サイトを1サイトに集約し、更新負荷の削減する。Gush4はレスポンシブデザイン対応。
  4. 費用節約のため、集約先は私の個人ブログのドメインのサブドメインとする。サーバはXサーバーのX10のまま。
  5. ホームページ1号と2号のサークル紹介は、リライトして新サイトに移動。
  6. 旧ブログサイトの記事は残して更新停止、新サイトにて新規の記事を投稿する。

リニューアルのタスク一覧

同好会サイトのリニューアルで実施した作業リストです。詳細までは記載できてませんが、休眠サイトを改装リニューアルする際に参考になると思います。
以下の3つのフェーズに分けて整理しています。

リニューアルのフェーズ
フェーズ 目的 概要
序盤戦 システム環境の準備 WordPressのサーバーを用意し、テーマを設定する。
中盤戦 コンテンツの作成 メニュー構造や各記事や画像を作成する
終盤戦 最終調整と公開作業 見た目やわかりやすさを最終チェックし、公開する。古いサイトの処置をする。

序盤戦:システム環境の準備

  1. Xサーバーにサブドメインを作成
  2. WordPressをインストール
  3. テーマ「Gush4」の導入
  4. パーマリンク設定の変更
  5. Gush4推奨プラグインの導入
  6. Gush4でプロフィール設定(ユーザー表示名やアバターなど)
  7. Gush4トップページをカテゴリー別新着記事に切り替える
  8. Gush4トップページの不要なウィジェットを削除
  9. バックアップの設定(ローカルにftpバックアップ)

中盤戦:コンテンツの作成

  1. サイト構造の検討
  2. カテゴリの作成
  3. サイドメニューの作成
  4. PC用ヘッダメニューの作成
  5. スマホ用ヘッダメニューの作成
  6. PC用ヘッダメニューのプルダウンで階層化
  7. ホームページに貼る同好会のロゴを作成
  8. 問合せページをContact Form 7で作成
  9. 同好会の各紹介ページを作成(旧サイトをコピーしてリライト)
  10. 各記事にアイキャッチを付与。
  11. サイトマップのページの作成

終盤戦:最終調整と公開作業

最終調整

  1. メニューの調整(順番変更や文言修正)
  2. フッター(左、中、右)の設定
  3. カテゴリ別トップページのカテゴリ順番の変更
  4. コメント欄を削除
  5. 記事にあるテーブルをキレイに装飾
  6. 記事間での説明内容の平仄を取る
  7. 記事間のリンクを貼る
  8. 古いページの作成日を変更。
  9. 同好会のメンバーへレビューしてもらい、指摘事項を反映。

公開作業

  1. WordPressの管理画面から検索エンジンのクロールを許可するよう設定。
  2. Google Analysticsに登録
  3. Google Search Consoleに登録
  4. GoogleにXML sitemapを送る
  5. Search Consoleのfetch as googleでindex登録。
  6. googleにrssを送信
  7. yahooカテゴリの登録変更

事後作業

  1. 旧FC2ホームページの全記事を削除し、「移転しました」ページを設置。
  2. jimdoの全ページを削除し、「移転しました」ページを設置。
  3. Seesaaブログに「移転しました」記事を投稿

利用したプラグイン一覧

新しいホームページで使ったプラグインの一覧です。Naifixにそれぞれの説明がのってますので参考にしてください。

  • SNS Count Cache
  • Ptengine
  • Akismet
  • WP Multibyte Patch
  • Contact Form 7
  • EWWW Image Optimizer
  • TinyMCE Advanced
  • AddQuicktag
  • ps autositemap
  • Category Order and Taxonomy Terms Order
  • Table of Contents Plus

神様、仏様、EBC様

ここまでリニューアル作業について説明してきましたが、その際、EBCでたくさんの質問をさせて頂きました。ここでは、その質問の一部始終を紹介します。ぜひ、EBCがどんだけ役に立ったか、そしてEBCの雰囲気などをつかんで頂きたいです。

ホームページの移転方法

同好会用に3つサイトを運営しています。Wordpressで再構築したいのですがサイト移転の考え方や方法について教えて下さい。
Elloraさん
サイト紹介のホームページの移転については、アクセス数が多く検索評価を引き継ぎたい場合は3つの方法がありますが、「301リダイレクト(.htaccess編集)」がおすすめです。

また、Seesaaブログの移転については、Seesaaで記事をエクスポートしてWordPressにインポートする方法もありますが、もし過去記事があまり見られておらず検索流入も少ないなら、そのままにしておいて、新サイトのどこかに旧ブログへのリンクを置く形が良いでしょう。

Fc2ホームページは301リダイレクト、jimdoは捨てる、seesaaブログは凍結にします。

※「FC2ホームページは301リダイレクト」にしようと思いましたが、検索流入が少ないことがわかったため、301リダイレクトにせず「引越しました」ページを作っただけにしました。※

新サイトはサブドメインかサブディレクトリか

アクセス数が少なく、費用圧縮のため、個人ブログの独自ドメインのサブドメインかサブディレクトリにしたいです。個人ブログとサークルのホームページは、ユーザーから別のブログとして見せたいです。Gush4でトップページがそれぞれにあって、それぞれのサイト構造を持つイメージ。これはサブドメインかサブディレクトリで可能ですか。また、どちらが適していますか?
Elloraさん
どちらでも可能ですが、別のブログとして見せるのであればサブドメインのほうが適していますね。

Xサーバーでのサブドメイン作成手順

サブドメインのサイトの作成手順を教えてください。xサーバのx10で、無料でドメインが付いてくるサービスを使っています。

Elloraさん
エックスサーバーのサブドメイン設定~WordPressインストールまでBlogFUNでアップします^^

Gush4でのyoutube動画の貼り付け方法

youtube動画を貼り付けたのですが、表示されません。対応方法を教えて下さい。Gush4を使ってます。
書いたコードはコレ↓です。
<div class=”video-container”><iframe width=”560″ height=”315″src=”//www.youtube.com/watch?v=xxxxxxxx” frameborder=”0″ allowfullscreen></iframe></div>
Elloraさん
すみません、僕の説明不足です 汗。
Gush4はYouTube動画があると自動的に専用タグがつくようになっていますので、YouTube発行の埋め込みコードをそのまま貼りつけていただければOKです!

テーブルの幅指定の質問と記事依頼


テーブルの列幅の指定方法について教えて下さい。
例えば、
・3列×10行の表
・左列がth、真ん中と右列がtd
・子テーマのcssファイルで、tdにwidthを指定

このような場合に、真ん中の列だけ幅を狭くするにはどうすればよいでしょか?なるべくcssファイルは共通化しておき、個別の記事で列幅を調整したいです。htmlとcssをテキストファイルで添付します。

また、シンプルできれいなテーブルを簡単に作成する方法とその仕組みの説明の記事をお願いします。

ルコさん
tdにかけると、すべてのtdの幅が350になってしまいますよね><列ごとの幅をかえたいので、一番上の行のthに幅を指定した方が良いです。

(コードは省略してます)

doraoさん

table.hfuto tr td:last-child { width:50%; }ってやる手もありますね。

意味としては、

.hfutoのtableのなかの、trの中の最後のtdは幅50%です。

※:last-child は※の要素が複数ある場合に、最後の要素にだけスタイルを適用できます。

(一部省略してます)

Elloraさん
ルコさんとdoraoさんに素晴らしい答えをいただきましたので、そちらを使わせていただいて、シンプルなデザインの表を作る方法を記事にしたいと思います!

あと「スマホの見え方をどうするか」、というのが一番悩むポイントですね・・

Gush4でヘッダーメニューをプルダウンで階層化する方法

Gush4のヘッダーメニューをプルダウンの階層メニューにすることはできますか? 先日質問した和太鼓サークルのホームページを作成中ですが、メニューが多くてヘッダに収まらないのです。お手数ですがよろしくお願いします。
Elloraさん
子テーマへのCSSコピペだけでドロップダウンになるカスタマイズ方法の記事を書きました!

コメント欄の一括削除のやり方

コメント欄を一括削除したいのです。

[設定]-[ディスカッション]で「新しい投稿へのコメントを許可する 」のチェックマークを外すだけたど、すでに公開済の記事のコメント欄は消えません。

[投稿一覧]で記事1つ1つの「コメントを許可」のチェックマークを外すしか方法はないでしょうか?

Elloraさん
管理画面の投稿一覧から一括削除する方法やテーマのsingle.phpからコメント用のコードを削除する方法を記事に書きました。

gush4のトップページの新着順を意図的に変える方法

gush4のトップページでは、投稿日の新しいもの順に並んでいますが、この順番を意図的に変える方法を教えて下さい。(最新記事、新着記事、カテゴリ別記事などの表示順)

<ニーズ1>同好会サイトを移転している件で、元のサイトから記事を移動しているのですが、元のサイトの投稿日で新しい順に並べたい。今は、新しいサイトに記事を移行した順番(=公開した順番)の新しい方からならんでしまっています。

<ニーズ2>投稿型のページで、古い記事に更新をかけたものを最新として表示したい。例えば、演奏予定のページを投稿型で作成し、新しい予定を追記したときに新着としてトップページに表示したい。(現在は、演奏予定のページは固定ページにしています。これだと変更があったことがユーザーにわからない)

Elloraさん
<ニーズ1>ニーズ1に関しては、記事の公開日自体を修正するのが早いかもしれません。

<ニーズ2>左側の「最新記事」を更新日に基づいて表示するカスタマイズです。

「orderby=post_date」を「orderby=modified」に変更してください。

(詳細なコードは省略)

PS AUTO Sitemapのチェックマークを消す

PS AUTO Sitemapでサイトマップを作成したのですがチェックマークが消せません。
以下のようなcssを書いてみたのですが、親階層は消えて、子階層が消えません。

.article-inner .sitemap_disp_level_0 > li:before { content: none;}
.article-inner .sitemap_disp_level_0 ul li { text-indent: 0;padding-left: 0;}

どのidまたはclassに指定すれば良いのかがわかっていないです。すみませんが手ほどきをお願いします。

Elloraさん
クラス名はプラグインの設定によって変わる可能性があるので、IDで指定してしまったほうが楽だと思います。以下で指定してみてください。

.article-inner ul#sitemap_list li:before { content: none;}

まとめ

ということで、同好会ウェブサイトをリニューアルするまでの愛と感動の物語はどうでしたでしょうか?

まだ満足行かないページがいっぱいありましたが、2月19日にエイヤっで公開しました。

リニューアルを決意したのが1月末、新サイトの公開が2月19日ということで、約3週間でリニューアルすることができました。

私のようなドシロウトが3週間でサイトリニューアルを完工できたのは、EBCのおかげです。

EBCの何が役に立つかを再度、書きます。

  • EBCで手に入れることのできるGush4というテーマを使う。
  • 会員専用のわかりやすい説明記事を読むことで作りたいホームページのイメージをふくらませる。
  • ホームページ作成で遭遇する不明点は、ドンドン質問して解決する。

同好会ホームページを放置しているあなた、ぜひ、ブログオンラインサロンに入りましょう。
そして、サイト作成や管理の時間を削減し、同好会の活動に時間を使いましょう。