こんなふうに色やデザインが一気に変わります。 スキンの設定方法は、好みのスキンを選んで「変更をまとめて保存」を押すだけです。 パっと好みのデザインに変えられるので、ほんと便利です。, サイト作成の目次はこちら → WordPressでサイトを作る手順を初心者向けに解説. 今回の手順は、テンプレート「Cocoon」の場合となります。, テンプレートによっては、メニューにテンプレート独自の編集項目が用意されていることがあります。 ⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!, 【初心者必見!】THE THOR(ザ・トール)の購入8特典!割引についても調査!【WordPressテーマ】, Cocoonのスキンを導入するのはとても簡単です。ワンクリックで変更できますが、ロゴや色変更など設置ずみのものはそのまま残ります。, 好きなデザインのタイトルの左側にチェックを入れて「変更をまとめて保存」をクリックします。, スキンを導入するのはワンクリックだけなので好きなデザインがあればすぐに使うことが可能。, 尚。スキンをインストールする前になにか自分で設定をしてある場合、次の章のデザイン等を保存を見てバックアップを取っておいてください。, Cocoonのデザインカスタマイズなどを多少してあったものの、その後スキンを使うことになった場合に元のデザインを保存する方法があります。(バックアップ), 「バックアップファイルの取得」をクリックするとバックアップファイルがPCにダウンロードされます。, cocoon_settingsというファイルがバックアップファイルです。ファイルを自分でわかる場所に保存をしておいてください。, バックアップをとったファイルを再度Wordpressにインストールすることもできます。Cocoonのマニュアルでは「リストア」という名前で説明されています。, リストアの部分の「ファイルを選択」でバックアップを取ったファイルを選び「設定の復元」をクリックします。, デザインを導入したもののなんとなくイメージが違うと思った場合や、自分で作っていて最初に戻したい時にリセットすることができます。, ひとつひとつ削除していくのには手間がかかるのでリセットがありますが、一括で変わってしまうのでもしなにか保存しておきたい場合には前の章のデザイン等を保存しておいてください。, 【2020年最新】WordPressおすすめ有料テーマ厳選8選比較まとめ!初心者でも簡単な機能性やSEOも調査, ここからは、スキンテンプレートを使って自分なりのテンプレートを作る方法をお伝えしていきます。, スキンテンプレートとは、Cocoon作者のわいひらさんがスキンのデザインを作るために基本の形だけを提供してくださっているものです。, これからCocoonのスキンテンプレートから作っていくページの完成図です。アピールエリアを入れて作っています。, スキン一覧の「スキンテンプレート」にチェックを入れ「変更をまとめて保存」をクリックします。, 全体の色やレイアウト、背景色などの設定をしていきます。テキストなどはスキンテンプレートで設定されていますので特に変更しなくても良いと思います。, ヘッダーの下にテキストやエリアの指定ができます。誘導のボタンも併せて設置できますので、この部分を設定することで目を引くことができます。, ↓ このブログから大人気のTHE THORを購入くださった方に特典をプレゼントしています。, 稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。, ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。, などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。, シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。, 今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。, なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。, 稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。, もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。, カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. Cocoonのデフォルト「スキンなし」はこんな感じですが、 ためしに「Simple Blue」というスキンを設定してみると. WordPressの管理画面の配色を変えたい。 元から用意されている配色だと、どうにも味気ないし、数も少ない。 (´・ω・`)レパートリー少なすぎですよね・・・ 特に、複数サイトを運営し始めると辛くなる。 管理画面で、パッと... 画像サイズを自動圧縮する「EWWW Image Optimizer」プラグインの設定手順, 記事公開を素早く検索エンジンに伝える「Google XML Sitemaps」プラグインの設定方法, あなたは大丈夫?プラグイン「Edit Author Slug」で個人情報を隠す方法, リンク切れを防ぐプラグイン「Broken Link Checker」の入手と設定手順, WordPressで記事を書くなら「TinyMCE Advanced」でボタンをすっきりさせよう, 薄毛が気になるなら頭皮ブラシにこだわるべし!頭洗うときもキモチいいよ!【レビュー】. 配色を変えてみたい方は、下記の記事で紹介していますので、参考にしてみてください。, サイトデザインを自分でイチから編集するとなると大変です。 Cocoonの独自スキン「和の色」6色バージョンに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット部品もあります。 Cocoon(コクーン)のスキンの使い方 1. CocoonスキンにSILKを選択した場合、サイトの外観を変更できるのはもちろんですが、 他のスキンにはない3つの特徴があります。 キーカラー設定での色変更 WordPressのテンプレートによっては、デザインの変更機能が用意されていることがあります。, 本記事で紹介するテンプレート「Cocoon」もその1つです。 見出しh2~h6の見た目を変えましょう。見出しは重要な要素でもありますが、デフォルトでは、とてもさみしくないですか?デフォルトの状態色を付けて見やすくカスタマイズしましょう。カスタマイズ後のデザインこちらと同じデザインでよければ、ページ下部 タブで切り替えて、カテゴリー別の最新記事などを表示できるデザイン部品も作成しています。, ダウンロードしたファイルを解凍し、Cocoon子テーマのskinsフォルダにフォルダごとアップロードしてご利用下さい。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. 今回は、私が何十年も変わらず使っているソフト「FFFTP」でFTPクライアントの使い方と、ワードプレスでのファイル構成を紹介します。 既にワードプレスが稼働している方向けの説明にな... Cocoonのデザインスキンは、標準で数十種類用意されています。 更に「隠れスキン(7種)」や「自作用サンプル」もあります。 たくさんのスキンの見た目を一気に見れるようにまとめました。 ... Cocoon用のオリジナルスキンまとめです。 Cocoonに標準装備の同梱スキン一覧は以下をご覧ください。 2020/05/25 すべてのスキンを更新しました。 各ス... Cocoonのスキン「黒を基調にビビッドカラー5パターン」(Ver2.1.6~対応). WordPressのテンプレートによっては、デザインの変更機能が用意されていることがあります。(´・ω・`)デザインが苦手な方でも、好みに変えられるのでありがたい本記事で紹介するテンプレート「Cocoon」もその1つです。例えば、Cocoo WordPressの無料テーマ「Cocoon(コクーン)」でサイトの背景色を1色などに変更する方法を書きたいと思います。, 簡単に「Cocoon(コクーン)」の特徴など書いておりますので、よかったら読んでみてください。, 何もスキンを変えず、デフォルトの設定ですと、ヘッダーが白、コンテンツが白、サイドバーが白、フッターが白、コンテンツとサイドバー、フッターの後ろが灰色となっていると思います。, 管理画面から変えられる部分と、変えられない部分がありますが、先にスタイルシートに一括で変更する命令を書いておきます。 全て同じ色で統一したい場合は、これが一番手っ取り早いと思います。色は黒にしています。, ヘッダーの色を変える方法としては、Cocoon設定から変える方法とスタイルシートに修正の命令を書く方法と2つあります。, [ヘッダー]のタブを選びます。デフォルト設定では[全体]タブが表示された状態かと思いますので、[ヘッダー]のところを押します。, 「ヘッダー全体背景色」の「色を選択」というところを押すと、色が選択できるカラーピッカーが出てくると思います。, 好きな色のところにカーソルを置いて、クリックすれば色が選択できると思います。 ここではとりあえず真っ黒にします。, 「#000000」が黒です。こちらはカラーピッカーから選択するのではなく、自分で好きな色をコピペして設定することも可能です。, ちなみにサイト名もキャプチャも白で表示されています。 デフォルトでは黒だったはずです。 管理画面からヘッダーの色を変えると、自動的に白になる?ようです。 逆に淡い色にした場合、例えば淡いピンクとか「#f9e6e3」だとちょっと文字が見えずらいです。, この場合は、文字は黒がよいかと思います。 さきほど設定した背景色の下に「ヘッダー全体文字色」というのがあり、こちらで文字色を変更します。, 管理画面からちょこちょこ設定するよりも、ある程度わかっている人は、スタイルシートに直接命令を書いたほうが楽だったりしますので、その方法も書いておきます。 ただ注意点として、上記のように管理画面からすでにカラーを設定しているとそちらが優先になりますので、スタイルシートに設定を書いても命令が効きません。 もし管理画面からカラーを設定している場合は、いったんクリアして解除しておく必要があります。, スタイルシートに書く場合は子テーマでもスキンでもどちらでもよいです。 どちらかに下記を入れます。色は黒にしています。「#000」は好きな色を入れてください。, 確認しますと、背景は黒くなりましたが、文字が黒くなっていて見づらいと思います。管理画面から設定したときは勝手に白くなっていましたが、今回はそのままです 。なので、タイトルとキャプチャのテキストの色を変更する命令も付け加えます。「color:#fff;」の「#fff」は白を設定しています。, ページ全体の背景色というのは、コンテンツとサイドバーの後ろ、フッターの後ろの部分の色です。, さきほどのヘッダーと同じように注意点としては、管理画面からすでにカラーを設定しているとそちらが優先になりますので、スタイルシートに設定を書いても命令が効きません。 もし管理画面からカラーを設定している場合は、いったんクリアして解除しておく必要があります。, コンテンツ内、記事が書いてある部分の背景の色も変更します。現在は白ですが、黒にします。, コンテンツの背景については、残念ながら管理画面から設定できる場所が無いようです。 なので、スタイルシートに書く方法だけになります。, mainでコンテンツ内の背景を黒にすると、テキストが見えなくなりますので、a-wrapのほうで、テキストを白にしています。 確認すると、背景が黒、テキストが白になっていると思います。, サイドバーの背景色も管理画面からは設定ができないようなので、スタイルシートからのみになります。, sidebarでサイドバーの背景を黒にすると、テキストが見えなくなりますので.widget_recent_entries等の色もを白にしています。 確認すると、背景が黒、テキストが白になっていると思います。, フッターは管理画面からも変えることができますので、まずは管理画面からの設定方法を書きます。, 「フッター色」のフッター背景色にある「色の選択」を押して、カラーピッカーが出たら、黒を選びます。, ただこれだと© 2019 test.が黒っぽいためよく見えません。 さきほどの「フッター背景色」の下にある「フッター文字色」の色を白にします。, footerでコンテンツ内の背景を黒にすると、テキストが見えなくなりますので、color: #fff;を入れて、テキストを白にしています。 確認すると、背景が黒、テキストが白になっていると思います。, WordPressの無料テーマ「Cocoon(コクーン)」Simplicityの後継としてわいひらさんが開発!, Simplicityを開発したわいひらさんが、新しくWordPressの無料テーマ「Cocoon(コクーン)」を作られたようなので、紹介したいと思います。, SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。, WordPressの無料テーマ「Cocoon(コクーン)」でヘッダーにあるロゴを左寄りにして、キャッチフレーズに余白など入れてカスタマイズする方法を書きたいと思います。.

.

アスクル インデックス 印刷 12, Buv Labo 愛知 12, Rsf 542y 図面 13, 中学 模試 2020 9, 炎上 一般人 まとめ 15, 後手 角交換 拒否 19, 60w 電球 風呂場 11, Sap 品目 更新ステータス 5, 高校生 失恋 小説 4, ナカバヤシ 卒 園 アルバム 4, ホンダ 寄居 5ch 53, Ae フラッシュ エフェクト 4, アメックス プラチナ 保有率 5, 有吉 ドラクエ ウォーク 総レベル 15, ランクル80 Gx ブログ 13, Th Bb 7420st 6, 独身 楽しい 2ch 4, Unity Setactive 効か ない 9, 丸 記号 特殊 11, ポケモンgo カイオーガ 捕まえ方 5, サリチル酸 呈色反応 原理 4, マイクラ 空 テクスチャ 作り方 5, レンタル料 勘定科目 雑費 5, フリーレント 違約金 消費税 13, 占い 無料 仕事 2020 7, 阿炎 インスタ 動画 34, クライ タック 改造 23, Dtab Compact D 02h 8, Dtv 連続再生できない テレビ 15, Wordpress 画鋲 マーク 5, Flexbox 高さ 揃える 14,