WordPressは、自由度が高い反面、何から始めれば良いのか迷うことも多いですよね。
でも、少しずつ手を動かしながら試していくと、意外と簡単にカスタマイズできます。
今回は、初心者の私が実際に行ったトップページのリニューアルについてご紹介します。
WordPressは自由度が魅力
WordPressの魅力は、なんと言ってもその自由度。
でも、「何でもできる」と言われると、逆にどこから手を付ければ良いのか分からなくなることもあります。
そこで大切なのが
- 目的意識を持つこと
- ほどほど感を大切にすること
完璧を目指すとキリがなくなりますが、「まずはここまで」と目標を決めて進めると楽しく取り組めます。試行錯誤が好きな人には、WordPressは最高の遊び場！
サイト型トップページにリニューアル
CSS知識はゼロでしたが、あるサイトを見て「挑戦してみたい！」と思い、参考にしてリニューアルしました。
CSSはデザインの調整という基本的な部分から学びになり、できることややりたいことが分からない状態でしたが、丁寧に詳しく説明されていてとても分かりやすかったです。
CSS知識ゼロでもコピペでサイト型トップページに
参考にさせてもらったサイトはこちら。
参考サイト: Cocoonで作るサイト型トップページ — オシャレなSWELL風
コピペ万歳！
こちらのサイトに記載されているCSSの利用で
見た目はグッと良くなります。
基本的にはコピペで
タイトルなどを変更したのみ。
CSSでデザイン設定をしていると
新着記事のショートコードはこのようにシンプルに記載できます。。
<div class="toppage new">
<div class="title newpost">New post</div>
[new_list type="large_thumb" count="6" snippet="1"]
<a class="link-btn" href="(https://love-oneself-hikari.com/new-list/)">New list</a>
</div>ただ、つまづいた部分が２つありました。
- サイドバーを非表示にする
- サムネイルを横に３つではなく1つへ変更
サイドバーを非表示にする
ページ設定で「1カラム（広い）」を選択することで解決。
サムネイルを１つにする
紹介されている基本のサムネイルは横3列のこちらのコード↓
/*新着、人気記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
width:calc(88% / 3);/*pcで横3列に並べる*/
}お知らせのサムネイルは１つだけにしたかったので、上記のコードを参考に「3」を「1」に変更すれば良いかと思いきや、うまくいきませんでした。
試行錯誤の結果、たどり着いた答えはこちらです。
/***お知らせサムネイル***/
.inf .new-entry-cards.large-thumb a{
display: inline-block;
margin: 0 auto;
}
WordPressの楽しさを共有
WordPressはまさに「沼」とも言えるほど奥が深いですが、挑戦すればするほど楽しい世界が広がります。初心者でも、少しずつ慣れていけばきっと素敵なサイトが作れるはず。
「興味があるけど難しそう…」と思っている方は、ぜひ気軽に始めてみてください！
コメント