どうも、暇なときにサイトをいじってるおじさんこと暇さんです。
今回は皆さんにWordPressのホームぺージをどうやったら攻略サイト風のトップページにできるかを紹介したいと思います。
まあそんなたいそうなものではないですが、「バウンティラッシュ部」のトップページは下に書いたとおりにやればできるのでお試しください。
どんなトップページが作れるのか
私自身がまだCSSやHTMLに関しての初心者なので、大したものはできませんが、とりあえず完成品はこちらです。
見ていただければわかる通り、単にブログっぽい新規一覧がメインのページの代わりに固定ページを使ってるだけです。
まあ、やり方は簡単なので順を追って説明します。
たった、2ステップです！
では、まいりましょう。
Step１ 固定ページを作る
まず、固定ページを作ります。
作り方はWordPressの左側の部分から新規作成で作れます。（割愛）
今回のトップページは要は固定ページなので固定ページを編集して作っていきます。
名前は適当にわかりやすく「トップページ」とします（任意）
内容はお任せします。
プレビューなどで確認して満足したら保存してください。
ちなみに[Ctrl+S]で保存できます。
Step２ 固定ページをホームページに設定する
ちょっとややこしいですが、要は先ほど作った「トップページ」という固定ページを「ホームページ」に設定するってことです。
ややこしいですね。
まあ、操作は簡単なので安心してください。（言語的には複雑ですがｗ）
設定から表示設定へ
下の画像の赤い四角で囲われた部分をクリックして「表示設定」に飛んでください。
ホームページの表示を固定ページに
次に、「表示設定」に行くとしたの画像のようになるので、
赤丸の「固定ページ」をクリックしてください。
そして、赤矢印の「ホームページ」のプルダウンをクリックして、先ほど保存した「トップページ」を選択してください。
以上です。
※下の「投稿ページ」については後程、説明します。
これで完成です。
自分のサイトを見てみて、ホームページにあなたの作成した「トップページ」が表示していれば完璧です。
内容は攻略サイトのトップページっぽく表を使って中身を充実させてみてください。
もっと他にもこだわりたい
まあ、正直これじゃあ「攻略サイト風」ではなくて、ほんとにただ「記事」をホームページに設定してるだけじゃないかと思うと思います。
私もそう思っていじりました。
ここからは「トップページ」に不要なものを消す作業です。
主に「style.css」にコードを追加してCSSで消します。（コピペでいい）
「style.css」へのアクセスの仕方は、サーバーからやってもいいですが
「外観」→「テーマエディター」
左にあるやつです。
タイトルを非表示にする
上の画像の赤い矢印のところです。（固定ページの一番上の部分です）
ここは正直、いらない気がするので非表示にしましょう。
（私の場合はもっといろいろできれば残しても良かったのですが、技術不足で装飾できそうにないので非表示にしました）
やり方は、「style.css」に以下のコードをコピペするだけです。
.home.page .entry-title{
display: none;
}
ちなみに、私の場合はh1でタイトルを固定ページで作って、borderで装飾しました。
そっちのほうがおしゃれっぽいし、扱いやすかったので。
※h1は「見出し１」のこと
※borderはCSSの枠を使うときのキーワード的なものです。詳しくは調べてみてください。
投稿日を非表示にする
矢印のやつです。
まあ、邪魔ですね。トップページにはいらないと思うので非表示にします。
さっきと同様に「style.css」に以下のコードを追加してください。
.home.page .post-date{
display: none;
}
SNS共有のやつを非表示にする
最後は画像で枠で囲んであるSNSのやつです。
これトップページ作るとわかるんですけど、邪魔なんですよね。
なので非表示にします。
やり方は前と同じで「style.css」に以下のコードを追加してください。
.home.page .sns-share{
display: none;
}
これで完了です。
ちなみにですが、記事の下に見かけるこいつも消えるので注意！
まあ、上と下を別々に設定するやり方はわかんないので、調べてください。
おそらく、コードに何か追加すればいいだけなので。
新着記事一覧も残したい
ホームページをトップページにしてしますと、今まで使ってたブログっぽい新着記事の一覧がどっかにいってしまいます。
まあ、完全な攻略サイトなら不要ですが、私のようにブログっぽいなにかの場合はユーザーのことも考えて、残したいと考える人もいるはずです。
そういう方は、まず固定ページで「新着記事一覧」などの任意の名前のからの固定ページを用意します。
そして、下記の画像の矢印の「投稿ページ」に「新着記事一覧」を設定すればそのページが前までのブログっぽい新着投稿一覧になります。
まとめ
というわけで、攻略サイトっぽいトップページの設定方法でした。
まあ要は固定ページで作るってことです。
では、暇さんでした。
