WordPressでホームページ風のWebサイトを作る方法。
無事になんとかできたゆみちんです。
どうも(´・ω・｀)
連日の深夜作業。
メインサイトをMovableTypeからWordPressへの移行・・・
すべて、完了いたしました(´∀｀)
ほんっと、疲れた。
MTとWPの中身の違いに途中でパソコン投げてやろうかと思ったくらいです(´・ω・｀)
それでもやりたかった、サイトのWordPress化と、レスポンシブ化。
これで、スマホやタブレットからの閲覧も、以前と比べてみやすくなったんじゃないかと思います。
そこでっ！
一部の方むけとはなりますが、どうやってホームページ風のトップページを作ったのか、記録に残しておきます！
準備したもの。
使用したテンプレート：Simplicity｜SEO最適化済みのシンプルな無料Wordpressテーマ
これは、最初から子テーマと呼ばれるカスタマイズ用のテンプレが準備してあったので、採用させていただきました！
テンプレはなんでもいいと思いますが、カスタマイズまで考慮すると子テーマを作ったほうが便利です。
その点、最初からあるのは助かります。
ホームページ風ということで、ブログとは違い、トップページにコンテンツをまとめる必要があります。
トップページを作るために、固定ページを利用しました。
固定ページを作成＆フロントページに。
ダッシュボード ⇒ 固定ページで新規作成。
このとき、タイトルはからで。
入れちゃうと、こんな風に出てくるので。
作ったらとりあえず、ダッシュボード ⇒ 設定 ⇒ 表示設定で、作った固定ページをフロントページに指定。
Page Builder by SiteOriginを使う。
プラグインになるのですが、Page Builder by SiteOriginを使うことでコンテンツを作成していきます。
ゆみちん的にはプラグインを使わず、なんとかコードをいじってやろうと四苦八苦しとりましたが、もう完全に挫折(´・ω・｀)
MTほど簡単じゃないわ、php。
ちょっと違うだけでエラー起こすし。
で。
このPage Builder by SiteOriginをインストールして有効化すると、固定ページの編集画面がこんな感じに変わります。
右端に出てきてる、あいつをクリック(ﾟ∀ﾟ)
すると、こんな画面に。
ここにじぶんがどういうレイアウトにしたいのかという要素をどんどん入れ込んでいきます。
カラム作成からのコンテンツ作成。
まずは、左から2番目のAdd Rowというところをクリックして、カラムを作成します。
3カラムで設定して保存すると、カラムが3つできた状態のものが出てきます。
このカラムのなかに、コンテンツを入れていきます。
次に、いちばん左のAdd Widgetをクリック。
すると、こんな画面に。
WPさわってる方ならすぐにわかるかと思いますが、ようは、カラムのなかにウィジェットを並び入れられるプラグインってことですね。
新着情報はもちろん、テキストウィジェットやカスタムメニューを入れ込むことができます。
ウィジェットを最大限活用！
ウィジェットを入れ込んでみました。
ちなみに、カラムの中身を入れ替えるのは、ずびーっとドラッグするだけなので、ヒジョーに簡単にレイアウト変更をすることができます。
ここから、編集を加えます。
太字になっている「テキスト」とか「カスタムメニュー」をクリックすると編集画面に。
テキストを編集する場合は、そのまま書きこめばいいですが、カスタムメニューの場合は、事前にメニューを作成しておく必要があります。
カスタムメニューは、カテゴリーごとに分けておくと、あとあとのレイアウト変更にも便利です。
MTの場合は、こういうのもタグ1つあればできちゃってたので、リンクをいちいち貼るのはちょっと面倒でした(´・ω・｀)
いや、知識と技術がないだけで、WPでもカテゴリーごとのリンクをはきだすコードはありますが、それを固定ページに設定する方法がわからんかったのよね。
固定ページにもphpコードを吐き出す方法があったのですが、どうにもできませんでした。
エラーになっちゃって。
吐き出す方法がわかる方は別ですが、このプラグインはなかなか優秀なので、使ったほうが手っとり早いです。
このリンクを貼っている作業、結構ホネが折れる作業なので、ボリュームが多くなるまえにやっておくと、ラクかもしれません。
100何個もリンク貼ったので疲れました。
で、ここまででいったん保存して、サイトを表示させてみると・・・
3カラムでコンテンツができあがってますね！
ゆみちんは、この作業をいろいろと繰り返すことで、トップページをしあげていきました。
何段でもできる！
カラムだけでなく、段組みも簡単です。
またAdd Rowをクリックしてカラム作成をすれば、2段目ができます。
しかも、カラムの数も自由に設定できるっていう。
このなかに、またコンテンツ用のテキストなりカスタムメニューをいれこんでいけば、立派なホームページのできあがりってわけですね！
作っていて感じましたが、カスタムメニューとテキストを比べると、テキストのほうが自由度は高いし、デザインの幅も広がるのでうまく使い分けるといいですよ！
カスタムメニューはコンテンツのリンク管理にはすごく便利です。
このプラグインが優秀なわけ。
じつは、このプラグイン自体が、
レスポンシブ対応(ﾟ∀ﾟ)
神なプラグイン。
これ作った人、ほんとすごい。
さっき試しに作ったサイトを、Responsive Web Design Testing Toolというサイトでチェックすると・・・
左側が上部分。
右側がスクロールしたところ。
ちゃんとカラムが順に下がって、見やすくなっていることがわかります。
ほんと、すごいわ。
というか、助かりました！
Page Builder by SiteOriginのおかげで、先の見えなかったメインサイトのレスポ化がスムーズにできました。
あと、カスタムメニューを使ったコンテンツの作成方法を教えてくれたサイト仲間に感謝！
この2つがなかったら、いまだにできてないと思われますわ。
ブログが主流になってるいま、WPでホームページを作ろうとしている人がすくなくて、まいりましたね。
あと、昔にはなかったレスポンシブデザインというものがあるばっかりに、シロウトに毛が生えた程度のゆみちんには限界を感じました。
時代の流れが速すぎるね、うん。
とはいえ、昔からこういったパソコン関係のソフトを使ってモノ（紙媒体やWebサイト）を作るのは大好きなので、苦悩するのが快感だったりします（マゾ！？）
やりとげたあとの爽快感ってハンパないから(´∀｀)
以上で、カスタマイズ方法の覚書は終わりです！
ながながと読んでくださった方、ありがとうございます♪
これからWPでホームページ作ってみたいって方の参考になれば幸いです(´∀｀)
サイト経由でブログを見てくれている方へ。
そうそう、しんごつぁんから提案があったので改善しました！
メインサイト経由からブログを見てくださってる方。
とくに、スマホからだとリンクまでたどりつくのが大変だと言われたので、メニューにリンクを置きました！
スマホ画面からみると、右上にグレーの四角があると思います。
ここをクリックしてもらうと、下のような画面になります。
ここにブログのリンクがありますので、こちらを利用してみてくださいね！