.jetpack-lazy-image{display:none}ゲームと音楽と副業の「趣味でまったりお金を稼ぐ」ブログです。2018.06.07スポンサーリンクどうも、ぶちくまです。WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。今回は、ぶちくまがcocoonカスタマイズしてきた中で、「初心者でもお勧めできるカスタマイズできる場所」をご紹介していきたいと思います。具体的なCSSに関しては詳細記事をご覧ください。AMPページでご覧の方は、お手数ですが通常ページへの移動をお願いします。当サイトはAMPではCocoonオリジナルデザインを尊重し、大きなカスタマイズを加えておりません。モバイルスライドインボタンの「サイドバー」22.RinkerのAMP表示を調整スポンサーリンク1.見出しは一番簡単でしかもサイト色出しやすい!見出しはとにかく簡単なのでお勧めです。セレクタがあっていても、COCOON本来に記述されているborder(囲ったりしている線のこと)が邪魔をすることがあります。border:noneにすることがお勧めです。【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える!スポンサーリンク2.グローバルナビはアイコンを設定すると可愛く仕上がるグローバルナビはカスタマイズすべきところがたくさん詰まっています。労力的に考えると、スマホはグローバルナビ非表示でも困ることはないし、カスタマイズ優先度としては低いと思います。サイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】WordPress無料テーマ最強のCocoonのカスタマイズ記事です。グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。CSSコードのコピペで使用できるし、解説もあるので自分用にデザインしてもOKです!buchikuma.xyz2018.06.09グローバルナビのアイコン設定アイコンの設定はとっても簡単です!WordPressのダッシュボード(編集画面)で、「外観」→「メニュー」を開くと、詳細な設定ができます。そのなかで、編集するメニューを「ヘッダーナビ」にして、該当する項目をカスタム設定していきます。ホーム※半角の<を使ってください。みたいな感じにすると、うちのブログみたいにメニュー名の前に、「家」のアイコンをつけることができます。https://www.blogging-life.com/cocoon/add-font-awesome-icon-to-menu/こちらの「ブロギングライフ」さんは、コクーンのCSSカスタム意外にも、役に立つ情報がたくさんあるのでおススメです!サブメニューも背景色や影をつけて見やすくするといいCocoonのグローバルナビでは、サブメニューを設定していると、びろーんとグローバルナビからサブメニューの一覧をみる事ができます。くま創作ベースでは、背景に点線をつけて、少し布っぽさを出しています。グローバルナビのサブメニューグローバルナビにアニメーションをつけて文字が現れるようにこれは少し難しいので初心者にはお勧めできませんが、こういうことも可能だよってことで。ちなみに、ぶちくま創作ベースではヘッダー画像もしたから時間差で挿入されるようになってます。スマホ流入がほとんどなので、目にすることは少ないかもしれませんが。スポンサーリンク3.スマホ用サブメニューに点線など仕込むだいたいCSSをいじる人は、PCでやるので、サイトチェックもPCばっかりになりがち。スマホ環境も必ずチェックしましょう。ちなみに、Cocoonのいいところは、スマホも最適化されていること。スマホだと、スライドインボタンが簡単に挿入できます。この中で、メニュー画面の設定が非常に崩れやすいのですが、こちらもいじったりする事ができます。見出しっぽく、アイコンをつけたりするとメニューとサブメニューが区別できていいと思います!スマホスライドインメニューのメニュー画面スポンサーリンク4.トップページのインデックス一覧はカードタイプを活かしたカスタマイズをインデックス一覧はこんな感じになっています。トップページの記事一覧はカード風に少し浮き上がらせてカードっぽさを演出、リンクを認知させるぶちくまサイトでは、インデックスは「縦型カード2列」で設定しています。縦長になってしまいますが、こちらをカードっぽく、さらに言えば「付箋」っぽくカスタマイズしています。ADHD必須アイテムの「リマインダー」をイメージした、と過去記事で触れましたね。【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことに少し浮き上がらせる事で、「ここはこの範囲がリンクになっているんだな」と、少しでも視認性、操作性、ユーザビリティの向上を目指してこうなりました。最近はスマホがネットビューの主流となっていることもあって、「リンクであることを伝える方法」もはっきりさせたほうがいいね、って流れがあります。Twitterで「リンク率が上がるぜ!」ってことで、「続きを読む」をブログカードに挿入する方法が流行りました。くまなんでも流行るんです、Twitterってのは。これはSimplicity使ってた人は、わかると思うんだけども、もともと「記事を読む」が実装されていて、こちらのカスタマイズが流行ってました。しろくまさん「記事を読む」をクリックするとページに飛ぶ仕組みだったわけですね。テキスト部がリンクだと、スマホだとタップしづらいんですよね。そこで、ブログカード全体をリンクにする流れとなりました。なると「続きを読む」いらなくねってなって、廃れていったわけです。これってどこタッチしたらいいの?」ってなりがち。最近はスマホですからね、タッチするまでリンクかどうかわからんですからね。いうわけで、「本文はこちら」を入れてみました。色の変わっている「本文はこちら」をタップしてもらうと、ちゃんとリンク先に飛ぶことをしっかり明示したわけですね。一応ね、マテリアルな感じを求めていったらね、なんかこう、細かいところまでカスタマイズしたくなってね。こちらはみんな大好きサルワカデザインですね。カード風これはもうエントリーカードと以下同文ですね。やってませんが、こちらにも「続きはこちら」をいれてもいいかも。「記事を読む」を入れてみた詳細記事がまったく間に合ってませんが、「記事を読む」をカード内に挿入しました。hoverするとウニョーンって伸びるうざい仕様です。実はアイキャッチも少しだけ拡大されています。見出し関連は簡単にへんこうできるのですが、もちろんサイドバーの見出し、タイトルも、CSSでおしゃれに変更できます。おしゃれ、と言えば、そう、サルワカ先生ですね!https://saruwakakun.com/html-css/reference/h-designしろくまさんオリジナルのカスタマイズがほとんどないな見出しごとにアイコンをつけたいまだ未実装、というかCSSがかさばるのが嫌でアイコンはひとつだけにしています。スポンサーリンク7.「コメント」「関連記事」だって見出しでおしゃれにアイコン挿入サイドバータイトルに以下同文ですが、こちらもセレクタ設定さえできれば、簡単に変更できます!コメントボタンのカスタマイズcocoonスポンサーリンク8.ボタンは「光らせたい」ならこのカスタマイズ!ぶちくまサイトではボタン、光らせてます。ちなみに、ぶちくまは光ってるボタンは絶対に踏みませんけどね。くまだって、怪しいじゃん!ぜったい、「ワンクリック詐欺」じゃん!だけど、どうやらクリック率が上がる、というよりは「ここがリンクだ」ってのがわかりやすくなるんでしょうね。点滅ボタンです、リンクはないよこちらはシャイニースポンサーリンク9.吹き出しを左右で色変えてみましたサイトのテーマ色、「青」「オレンジ」で左右吹き出しコメントの背景色を変えてます。繋げてくと、みづらくなってくるからね。この吹き出しが欲しくて、Cocoonにしたんでした。しろくまさんしろくましかないってどうなのよぶちくま絵が下手だから準備に時間がかかるんです!Cocoonにテーマ変更するメリット【ありがとうSimplicity】Simplicityの作者、わいひらさんがCocoonという新しいテーマを提供してくれています。今回はCocoon導入を迷われている方に背中を押すメリットについてまとめてみました。無料テーマでここまでやられると有料テーマは商売上がったりですよ!buchikuma.xyz2018.05.03スポンサーリンク10.バッジは一部だけ変更して簡単に「参照」「引用」がわかるようにべつに個別にクラス指定してもよかったんだが、Cocoonはバッジとかボタンとか、いろんな色が用意されているんですよね。引用」であることを示すようにしました。明示したほうがいいですよ。こんなバッジ、リンクはないよ参照の場合はreferenceの略語で対応スポンサーリンク11.ボックスも一部変更し「おすすめ記事」「check!」などが含まれた、おされBOXにこれは、いわば有料テーマでよく実装されているやつの、まぁ、うん、そうだ。おすすめ記事の紹介が一発でできるので、個人的には、バッジとボックス、重宝しています!この中にリンクをいれたりします。テキストリンクでも、ブログカードでもOK!「Check」にしておくと、リンクじゃなくても使いやすいBOXになります。箇条書きもいいよね怪しいリンクユニット風の箇条書きリストも怪しさMAXのリンクユニット風箇条書きリスト|読者を困惑させてもメリットなしリンクユニット風の箇条書きリストをつくってみました。作成者の自分でも間違えてリンクユニット踏むレベルです。カラー設定についての考察が役に立つと思われます。CSSコピペOKです。buchikuma.xyz2018.08.25こんな感じで、いかにも怪しいリンクユニット風の箇条書きリストも用意しました。←こんなやつ現在は箇条書きリストは通常に戻しました。数字の場合はこれ色も対応したスポンサーリンク13.補足説明BOXの微調整こちらも一応、Simplicityから引き継ぎましたが、ぶちくまはCocoonデフォルトも結構好きなので、AMPの方ではデフォルトのままにしています。原型はサルワカさんですね。【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30スポンサーリンク14.目次のデザインカスタマイズこちらはCocoonで目次が実装されたので、移行に伴い、余白の調整からセレクタの設定まで結構骨が折れました。スポンサーリンク15.コード表示のためにクリックで現れるBOXをつくるこちらはサルワカ先生のところに詳細あります。まだまるっとCSSいただいてるだけなので微調整。HTMLとCSSだけ!要素の表示・非表示を切り替える方法こんなやつですね。アイコン設定などTwitterではRinkerが大人気ですが、価格表示は誤誘導につながりかねないので保留中。あと、プラグインは基本入れない。アナリティクス連携機能は魅力。カエレバ・ヨメレバはデフォルトも素敵デザインなので、とくにカスタマイズは不要かとは思ってる。AMPはデフォルト推奨で。Amazon商品リンク対応したので不要にCocoonが便利なAmazonリンク作成ツールを機能に盛り込んだので不要になりました。Amazon商品リンク設定と使い方これが超便利なので、RinkerとWPAPは不要になってありがたいっす。23:12時点)Amazonの商品レビュー・口コミを見るAmazon楽天Yahoo!ショッピングモバイル版がシュッとしたデザインになったので調整モバイル版のYahooリンクが大きくなり過ぎたので少し手を入れました。Amazonと楽天商品リンクモバイル表示をカスタマイズ|Cocoonスポンサーリンク17.「アプリーチ」導入とCSS調整すでに詳細記事あります。withアプリーチスポンサーリンク18.カードリンク全般のホバー時のエフェクトを追加さいとうさんの記事がとても素敵です。さいとうカスタムは有料テーマに負けないアニメーションも取り入れているので、参考におすすめしたいサイトです!!︎リスブロリスブロは、初心者向けのブログ運営術を紹介するWebメディア。WordPressテーマ「Cocoon」用のカスタマイズCSSも公開中です。リスでもわかるブログの手引書です。妙な強迫症状がでてくるよね。ベストなアイコン探すのって結構大変。そんな時にはさいとうさんのブログですね。ブロガー・Web制作者必見。利用シーン別まとめこんにちは、さいとう(@S41T0H)です。