帰省ボケなのか記事がまったく思い浮かばないので気分転換にwordpressのテーマを変更してみました。
テーマとは？
無料のブログサービスでいう「スキン」のようなものです。テーマによって、デザインや機能性がガラッと変わります。テーマには無料のものと有料のものがあります。
今回は無料テーマの「cocoon」です。
以前iPadでテーマ変更ができるのか実験したのですがそのときにダウンロードしたテーマを使いました。
参考：iPadでWordpressのテーマを変更できるのか？
記事数が少ないので気軽にやってしまいましたが、テーマ変更すると一時的にデザインが崩れるので、記事数が多いと大変なことになるので要注意です！！
まだ修正していない箇所は多いですがとりあえず記事が書きたいので書きながら直していきます。笑
今回はcocoonカスタマイズの備忘録や参考にしたサイトを載せてみます。
「cocoon設定」が便利
無料テーマcocoonでは、独自の「cocoon設定」というメニューが設けられていて、そこを触るだけでブログ全体のデザインを変更することができます。
初心者にも嬉しいポイント！
わたしがワードプレスで初めてブログを開設したときに使っていた無料テーマにはこういった機能は無かったので、ワードプレスはテーマによってデザインも使用感もまったく違うんだなぁと感じます。
「cocoon設定」で変更した箇所まとめ
【全体】フォントの変更
最初に設定されていた游ゴシックから、源ノ角ゴシックに変更しました。
フォントが変わるだけで少しイメージが変わりますね。
【インデックス】縦型カード2列に変更
【インデックス】タブではトップページの記事一覧の表示の仕方が変更できます。
これをデフォルトの横長の記事一覧から、縦型カード2列というものに変更しました。
▽横長の記事一覧
▽縦型カード2列
カードが横に2列並んでいる記事一覧。
画像が大きくなり、正方形っぽくなりました。
【ヘッダー】タイトル画像を変更
タイトルのロゴ画像をcanvaで作りました。
canvaはアイキャッチ画像を作るのにも使っています。
可愛い英字フォントがたくさんあるのでロゴやアイキャッチ作りにぴったりです。
また、「ヘッダーレイアウト」で「センターロゴ（スリム）」を選択すると、ヘッダーロゴ画像が真ん中に、メニューバーが少しスリムになります。
【吹き出し】吹き出しの事前設定
Cocoonでは、吹き出しを事前に登録しておくことができます。
事前に登録しておくことで、投稿の編集画面から吹き出しを挿入することができるんです。
ワンクリックで挿入ができるので非常に便利です。
追加CSSでデザイン変更
「cocoon設定」で変更できないデザインなどは、ワードプレスメニューバーの「外観」→「CSS編集」でCSSを追加することで変更ができます。
CSSとは・・・
CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。
細かいデザイン変更をするときには欠かせない「CSS」ですが、自分で考えたり作ったりして入力するのは私のような初心者にはだいぶハードルが高いです。
初心者の方がCSSを使ってデザインを変更したいときには、ネットでググるのがいちばん💕
「テーマ名 カスタマイズ」などのように検索するとそのテーマを使っている諸先輩方が色んな情報を記事にしてくれているので、それを使わせてもらいましょう。
「見出し2」「見出し3」デザインの変更
「見出し2」のデザインは「sango」で使っていた見出しデザインのCSSをそのまま利用しました。
「見出し3」のデザインは、何も触らないでいると上下に線の入る見出しなのですが、この上下線を外したかったので、左側の線のみになるCSSを追記しました。
.article h3 {
border: 0;
border-left: 5px solid ;
}
こうすると↓のような左側の線のみのシンプルな見出しになります。
その他カスタマイズ
今回LISBROさんのカスタマイズCSSを２つそのまま使わせてもらいました。
①有料テーマに見劣らない！Cocoonで各要素がふわっとフェードインしてくれる簡単CSSカスタマイズ
②【Cocoon】記事一覧をふわっと浮き上がらせるマテリアルデザイン「SANGO」風カスタマイズ
LISBROさんのサイトはパッと見てcocoonだと分からないのが凄いです！！
特にこの2つの記事のカスタマイズを使うと「無料テーマ感」が薄れたような気がしますね。
まとめ
もう初心者には大きな変更の余地がない有料テーマと違って、無料テーマの良いところは開拓していけるところかなぁと感じています。
「いや、それよりお前普通の記事書けや」って感じやし私コピぺしかできないけどw、デザイン触るの好きなんだよなぁ。。。
まだまだデザインくずれが直せてないですが、今回みたいに気分転換したいときなどにちょこちょこカスタマイズ進めていきたいと思います。
