実録体験日常4コマ「ジトメカツモク!」電子書籍で好評発売中!

【WP】Cocoonに変えたのでカスタマイズメモと感想!

こんにちは!
久々にブログテーマを変更してみました。
「Cocoon」です。誰もが知る超優秀な無料テーマ!
テーマ遍歴はLuxeritasVirtureCocoonとなります

一言でいうとカスタマイズしたんかどうかわからんくらいものすごく簡単でなんだか無料で使わせて貰って申し訳ない気持ちになるくらい痒いところに手が届く素晴らしいテーマでした(全然一言じゃない)

スポンサーリンク

カスタマイズメモ~~

PCで見たトップページはこんな感じになりました。

白ベースでシンプルかつちょっとにぎやかな感じになりました!
スッキリまとまっていてお気に入りです♡


ヘッダー画像はやめてロゴにしました。
5秒で描いたジト目と☆の絵も添えて。(o´艸`)

メニューは最初からグローバルナビになってた気がす。。。上下ボーダーだけCSSで入れた。
メニューはFont Awesomeで記号を付けて、副題(ON/OFFできる)もつけたらなんかええかんじに!
なんか旧バージョンのFont Awesomeじゃないと表示されないっぽくて最初5の方でやってたら表示されなくて少しあたふたした。(;o´艸`)
グローバルナビの下の黒い帯は、全ページで表示される「通知」欄!
なんか告知しときたいことがあったらここに書きこめて便利♡


こんなかんじで全部最初から用意してあります。
設置するもしないも自由だしボタンひとつで簡単!
最初から全種類の洋服が置いてあって好きにコーディネートできるってかんじだよね♡

このCocoon設定の他に通常の

カスタマイズ欄もあるんだけど、こっちはすごくシンプル。
CSS以外ほとんどCocoon設定のほうでいじれるようになってる感。


今回はCSSも最低限で済みました!
スクロールバーが長いでしょ?(o´艸`)


見出しもちゃんとデザイン変更できました♡
(ツイッターで見出しが~って言ってたけど、あれプラグインだった。。。)
そういやあまりに色んな機能が搭載されてるので不要になったプラグインがいくつも出てしまった。なんてこった。。。


見出しはこんなかんじに♡
ゆる~い手書き風かわいい。


カテゴリーやタグは最初からこんなデザイン。
プロフィールはサイドバーじゃなく記事下にIN。WPに登録した画像と文章が自動で入る。ウィジェットを差し込むだけ!
サイドバー追従型ウィジェットも最初からあるので追従させたいウィジェットを入れるだけ。。。

楽すぎる~~~。゚( ゚´Д`゚)゚。

こんな至れり尽くせりある?って思った。
Cocoonすばらし!
(そして表示速い)

あと面白いなーと思ったのが、Cocoon設定のとこにある「吹き出し」ってやつ。

よくある吹き出し会話の記事が簡単に作れるらしいw
なんとここで画像を入れておけば

エディターのボタン一つで。。。

吹き出しが・・・!!

ボタンひとつで?

ふんふふーん♪

とまぁこのように、一瞬で吹き出し会話をブログに搭載できました(o´艸`)
吹き出し会話を多用するブログならすごく便利な気がする。

(追記)
書くのを忘れていたのだけど、モバイルの下部のメニュー

これも最初から搭載されていて、上に表示タイプか下に表示タイプかなど選べるようになってます。うちは下に表示タイプ。
左側のメニューをタップすると

カテゴリが表示されて
右側のサイドバーをタップすると

PC表示でしか見られないサイドバーが表示される!
今まで使ってたテーマだと、フッターの上にサイドバーが最初から表示されててTOPページのスクロールがやたら長い。。。みたいなかんじか、潔く表示なしかどっちかな気がするんだけどこれだとTOPページがコンパクトな上サイドバーも見る人は見れるっていいとこどりだと思いました!

カスタマイズメモっていうより物珍しさの感想になってしまった。。。
ほんとにサクサクカスタマイズできて快適なのでしばらくはCocoonで行こうかなと思います♡

参考にしたサイト

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
【Cocoon】記事の見出しデザインをカスタマイズする方法(h2〜h6)
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は投稿記事の見出しデザインをカスタマイズしてみました。見出しを変えると手っ取り早くオリジナリティを出すことができるので、優先的にやっておきたい部分ですよね。それでは早速や
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。
Font Awesome Icons
Font Awesome, the iconic font and CSS framework
タイトルとURLをコピーしました