英語が読めなくても、カスタマイズはできます。Cocoonスキンでカスタマイズすると映えるポイントまとめCocoonのスキン機能でカスタマイズするなら、ココを変更すると効果的という部分をまとめてみました。これらをカスタマイズすることにより、Cocoonっぽさをかなり減らすことができるかと思います。wp-cocoon.comコクーンのサイトで、しかもカスタマイズしたい場所を示してくれているページです。このページを使ってカスタマイズを学んでみましょう!見出しを探してみる今回は見出しですので、見出しが書かれている場所を探してみてください。よく、ページの中段に全ての見出しが並んでいるところがあるはず。デベロッパーツールで勝手にデザイン変えてわいひらさんに怒られない?デベロッパーツールは「試しにウェブ上で変えてみる」というものなので、実際にサイトの仕様が変更されるものではないので大丈夫です。実際の使い方としては、自分のサイトの変更したい部分を、色々な色や形を試しに入れてみて、ちゃんと指示通りになっているかを確認してから、実際の自分のサイトに適用するコードを入力していく、という流れになります。ちなみに、デザイン変更はわいひらさんもオススメしています。H2「見出し2」を変更してみるデベロッパーツール側上部に、こじんまりと四角に矢印のカーソルがついているようなボタンがあるのは見えますでしょうか。こちらを選択してもらうと、少しカーソルの形が両方向矢印に変わって、かつ、このカーソルで左側本文窓内のの任意の場所を触ると、なにやら、オレンジやら緑やら青い枠で触った場所が囲われませんか?これでクリックすると、その場所を指定することができます。デベロッパーツールをつかって変更したい部分を選択する指定されると、右側のデベロッパーツール側の表示部分も、指定した場所の、HTML情報と、CSS情報が表示されるはずです。デベロッパーツール表示調整もし、デベロッパーツールが小さく表示されて入れば、それぞれの窓を、ブラウザの大きさを変更するノリで広げることもできます。ちなみに、上側がHTMLの情報窓。下側(中段)がCSSの情報窓になります。今回は、ごく簡単な部分から始めますね。「本文で指定した部分は、HTMLではどのように記述されているんだろう」ということです。記述の何を見ているか、といいますと、今回で言えば、「CSSに影響を与えているセレクタが何なのか」というところです。くま、、、?すいません、ちょっと飛ばしすぎましたね。HTMLでセレクタの名前が付けられているCSSのセレクタ、というのは上記でお話しした通り、「変更したい場所」を示しています。この、場所、という概念がわかりづらい。下には「フッター」があります。これらの中にコンテンツとして、画像や文章が収められているのです。コンテンツ内には色々な要素が詰め込まれているさらに、「コンテンツ」の中には、今回変更したい「見出し」や「本文(地の文)」、「タイトル」「リンク」などなどとにかくたくさんの要素でいっぱい。色々な要素があっちこっちにちらばって、それらが合わさってコンテンツになっています。基本構造となるHTMLの部分では、すでに一般的な名称として用いられている「h1」や「a」などの「タグ」から、自分で名前付けをした「class」や「id」など、たくさんの名前で「ここの構造は見出しにする」と指定しながら書かれています。今はHTMLという基礎の段階で、色々な名前がすでにつけられている、ということだけ覚えておいてください。我々は基本的にはHTML部分に触れずにカスタマイズを行なっていきます。指定されたセレクタの名前を探していく、という作業をすることになります。今回は、特にHTMLを見る必要はありません。中級者編までHTMLはオアヅケ。CSSで書かれているセレクタをみてみるでは、習うより慣れろ。スパルタぶちくまタイムです!さて、中段CSS情報窓をみていきます。図解:デベロッパーツールでCSSの基本文法はどう書かれているかセレクタの部分はここになります。それぞれ、微妙に意味があります。ドットはclass、#はid、何もないのはタグ実は、何の気なしに付いていた小さい黒ポチにも、意味がありました。何もなければ「タグ」ということだけ覚えておきましょう。セレクタは細かく設定すべし実はセレクタは「h2」だけの指定でも成り立つのですが、「h2」だけを書き込んだセレクタだと、メインコンテンツ以外でも、あらゆる部分の「h2」と名前が付けられた部分が変更されてしまうのです。セレクタの設定は、なるべく細かい名前付けが必要だということを覚えておいてください。今回は、「h2」の前に「.article」という、「記事」という部分を指定している名前がくっついているということですね。佐藤さんはひと学年に10人くらいいますが、佐藤太郎と指定すると、クラスに一人くらいには絞れる、こんなイメージです。プロパティをみてみるさて、セレクタの名前を確認したら、次はプロパティ部分をみてみましょう。プロパティは「何を変えるか」を指定する部分です。今回のCocoonの見出しには複数指定されているので、何段にもなっていますね。background-colorが指定されています。プロパティ「背景色」を変えてみる今回は、背景の色を一緒に変えてみましょう。デベロッパーツールは便利なもので、色の指定ができるところには、小さな□がついていて、ここをクリックすると、自分で細かい色を決めることができます。今回は、薄い青色にしてみましょうか。デベロッパーツールのカラーパレット画像のように、色を指定するカラーパレットのようなものがあらわれます。上のグラデーションの部分で明彩度が指定できます。その下のバーが色相ですね。青や、赤などの色味を決めるものです。下のバーが、少し難易度があがるので詳細は後日ですが、透明度を調整するものになります。その下が大事なのですが#と6桁の英数字がでてますね。これが、CSSで使う色の名前、というか番号になってます。これをコピペして使うことになるので、ぜひ覚えておいてください。背景を濃くして文字を白くするいわゆる白抜きにする場合ですね。今回はバックグラウンドという背景色を設定するプロパティがすでにあるので、これを活かして簡単なカスタマイズをしていきますね。デベロッパーツールで背景色の変更まず、バックグラウンドを濃い青にしてみます。先ほどと同じ要領で、プロパティの#の前ある◽︎をクリック。色相バーで青っぽい色にしてから、明度と彩度を下げて黒っぽさを出します。適当ですが、#215d98くらいにしました。これくらいの濃さになると、文字が黒いとはっきり読めませんよね。これからプロパティを追加していきます。プロパティの設定の仕方デベロッパーツールのbackground-colorの下あたりを適当にクリックして見てください。」が現れたのがわかりますか?今回は詳しいところまでは説明しませんが、ここにプロパティと「:」を挟んだ後に値を入力します。今回は文字の色を変えるので、「color」というプロパティを入力します。そのあとに「:」を入力すると、次の値を入力するところが点滅し始めます。色は微調整しますが、まずは適当に「white」と入力しておきましょう。すると、紺色の背景に、H2の文字が白くなったのがお分かりでしょうか。これで、記事内のすべてのh2タグのついた文字がこの装飾に変わりました。colorを変更すると白い文字に変わったスポンサーリンクh3「見出し3」をカスタマイズする次は少しだけ難易度があがります。cocoonのH3見出しは、左側に濃い色の線が入って、さらに文字は四角く囲まれていますね。これも同じようにカスタマイズしましょう!色だけまずは変えてみるおさらいです。変えたい部分を選択する場合は、デベロッパーツールの上側の、◽︎に矢印ボタンを一度押してから、h3見出しをクリックしてみます。すると、h3見出しの情報がでてきました。次にデベロッパーツール内の中段、CSSをみます。h3」という名前に変わっていますね。このセレクタを選ぶといいですよ、ということです。(正確には、cocoonで実際にCSSの影響を受けている記述がこれってことなんですけど、とりあえず難しいことは置いておきましょう)今度はプロパティの部分には先ほどとは違うものがたくさんありますね。これは、簡単なカスタマイズの時によく使う、囲み線を入れるプロパティの、「border」というものになります。borderの使い方cocoonの見出しh3では、左端だけ太く設定する都合、四方向すべてに個別の指示を与えるために「bordear-場所」の指定が書かれたプロパティを使っています。下線を太くしたりして、色合いをうまく組み合わせると、少し立体のような表現を作ることもできます。borderの「値」を調整するborderの値は、「線の太さ、線の種類、色」で構成されています。難しく考えずに、既存のものをいじっていくことでカスタマイズしていきます。今回は下線を少し太くするので、「1px→3px」に。影っぽさを出すためにもともとの色(color)より少し濃いグレーにしました。左端の太い部分は少しはっきりとした青にすることで色合いのメリハリをつくります。ついでに、おさらいです。背景色も設定しましょう。プロパティは「background-color」でしたね。こちらは少し薄めの青にして、文字を際立たせます。デベロッパーツールでh3見出しをカスタマイズほんの少し立体っぽくなりましたね。上の線を形式上は消すことができます。デベロッパーツールで色々な見出しを作るついでに、さっと他の見出しも変えてみました。見出しを変えるだけで、サイトがググッと引き締まった印象が出ますね。個人的にはグラデーション色なんか入ってると、表現に幅がでるので好きですね。スポンサーリンク実際に自分のサイトに適用してみよう!はい。ここまでやりましたが、これをせっかくだから自分のサイトに使ってみましょう。このやり方を覚えると、いわゆる「コピペでできる」系の、デザイン参考サイトのものをパクるもとい真似することができます。cocoonのやり方ですが、大体の他のテーマでも似たような方法を使っていきます。WordPressのCSSを編集するご自分のWordPressのダッシュボードをみてみましょう。「外観」タブ内に「CSS編集」という、いかにも、というものあるのでこちらをクリック。この中にある、「CSS追加」というものにコピペする、というのが、一番安全で手軽なやり方です。CSSをカスタマイズする場所についてCocoonの子テーマにCSSを直接記入するただ、今回はせっかく子テーマもインストールしているので、「テーマの編集」から、子テーマのCSSにコピペする方法を使ってみましょう。無料テーマのCocoonのダウンロード方法を解説したページです。最初は有料テーマを利用することを検討してもらう、ことについても書いています。注意点として必ず親テーマと一緒に子テーマもダウンロードして、子テーマを利用するようにしてください。buchikuma.xyz2018.05.06個人的にはこちらの方が編集しやすいです。場所を間違えると結構面倒なことになるので、慎重に。CSSをコピペする場所こんな感じの画面になります。くまはすでに記入されているのでいろいろ書かれていますが、もし初めて開いた場合だと、「必要ならばコードを書く」とコメントが書いてある以外には、真っ白なシートが広がっているかと思います。しろくまさんここにコピペすればOKです!コメントアウトに注意その際、「/*必要ならばここにコードを書く*/」よりも下に書いてください。この茶色い字は、コメント用の表示で、この中に書いたものはCSSの適応にならないよ、というものです。しろくまさんメモがわりに使います。くまはこの中にコピペしてて何も変わらなかった、ってことがありました。「/*見出し*/」みたいにメモしておくと、後々、また編集したくなった時に探すのが楽になります。コピペしたら、赤いビックリマークが出ていないことを確認して、ファイルを更新を押します。これだけでOK!もしも赤いビックリマークが出てきたら更新しない!赤いビックリマークはエラーですので、この状態で更新すると、だいたいブログが真っ白になります。これはデータが壊れたりしたわけではなく、大体の場合はCSSがうまく働かなくて真っ白に表記されているだけなので焦らずに。大体、カッコで閉じ忘れてる、みたいなエラーが多いです。コピペしても表示されない場合あるあるなんですけど、実は、コピペしてファイルを更新しても、自分のサイトを見てみてもデザインが変更されていないことがまぁまぁよくあります。これは、だいたいが、キャッシュが残っていて過去のデザインが優先されている場合。キャッシュを含めた履歴を消すと、ちゃんと新しいデザインが適応されることが多いですね。cocoonにしてからは、キャッシュを消さなくてもデザインが更新されているようになっているのか、確認が楽チンで嬉しい限りです。超初心者編として、かなり膨大な画像を駆使して説明してみました。くま私もこの記事を書いた時には、まだ数ヶ月程度でしたが、たくさんカスタマイズ事例をみることで、少しはいじれるようになりました。自由にカスタマイズするには技術と知識が足りないと思います。いろいろなサイトをみながら「これ真似したい!」と思ったら、まずはデベロッパーツールを使って、サイトの構造をのぞいてみると、とても勉強になります。今回の記事では、カスタマイズの勉強方法さえ伝わればいいかなぁと思っています。セレクタの選択や、プロパティや値をどう設定すればいいかは、やってみないと分からないことが多いです。自分のサイト、自分のスペースですから、自分の好きなようにカスタマイズしてみましょう!とはいえどうしても自分で作れない場合は一度コピペしてみるのも手あまり参考にはならないかもしれませんが、ぶちくまの見出しのコードを置いていきます。0.05em;}スポンサーリンクオススメの参考書まずはCSSってどんなものがあるのかな、という実例集が一冊あるといいですね。サルワカさんなど、実例でCSSコードまで乗せてくれている親切なサイトはもちろんブックマークしておくとしても、手元に本が一冊あると捗ります。現場でかならず使われているCSSデザインのメソッド今回書かれているような、イマイチわかりづらいデベロッパーツールの便利な使い方なんかも書かれています。古本屋に並んでるとテンションが上がる一冊。10:17時点)Amazonの商品レビュー・口コミを見るAmazon楽天Yahoo!ショッピングあくまでもCSSにこだわって色々やってみたい方の、かなり技術的な内容に踏み込んだ一冊。初心者用ではないが、目を通しておくと将来的なサイト設計には役立つ、そう信じてる。無料テーマのCocoonのダウンロード方法を解説したページです。最初は有料テーマを利用することを検討してもらう、ことについても書いています。注意点として必ず親テーマと一緒に子テーマもダウンロードして、子テーマを利用するようにしてください。2018.05.06CocoonCocoon導入後のアナリティクスとタグマネージャーで設定変えたポイントWordPress無料テーマで最強のCocoonを利用することになりました。Cocoon利用者のフォーラムは毎日大にぎわいです。2018.06.26CocoonCocoonにテーマ変更するメリット【ありがとうSimplicity】Simplicityの作者、わいひらさんがCocoonという新しいテーマを提供してくれています。今回はCocoon導入を迷われている方に背中を押すメリットについてまとめてみました。無料テーマでここまでやられると有料テーマは商売上がったりですよ!2018.05.03CocoonRinkerをAMPでも崩れない程度にカスタマイズに成功【Cocoon限定】アフィリエイト商品の管理とリンク生成がとても便利なRinker。シンプルだけど使い勝手のいいデザインになりました。2018.06.11CocoonCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。2018.06.07Cocoonサイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】WordPress無料テーマ最強のCocoonのカスタマイズ記事です。グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。「遊びを副業に変える」をモットーに、ブログで情報を発信してます!詳しいプロフィールはこちら!ぶちくまをフォローする人気のある記事アークナイツの課金アイテムをまとめる【買ってはいけない】2020.01.242020.01.31幻影戦争の装備・武器クラフトについて知りたい2019.12.062020.02.21ブレイドエクスロードの適正パーティーの組み方2019.11.012020.02.11アルカラストの効率的な育成手順【素材もないし金もない】2019.08.182020.01.28アルカ・ラストの最強パーティを決めたい【無課金】2019.10.24応援クリック大歓迎!人気ブログランキングにほんブログ村フォローボタンぶちくまをフォローするカテゴリーイラスト2ゲーム176FFBE幻影戦争12KHUx6TEPPEN12ぷよぷよクエスト4アルカラスト8アークナイツ10アートオブコンクエスト18ゼノンザード10デュエルリンクス28ドラガリアロスト3ドラクエライバルズ1ハンドレッドソウル8ブラウンダスト12ブレイドエクスロード10ヴァルキリーアナトミア6最果てのバベル28ブログ52Cocoon19カスタマイズ2サイト高速化6Simplicity4Xeory2ブログ運営15WordPress5スパルタブログ論2収益化5副業のすすめ13ゲームライター6動画配信2読書2小説1漫画1音楽3リスニング2スポンサーリンクタイトルとURLをコピーしました。