ブログ

【Cocoon】サイト内検索デザインCSS

ブログ

※当サイトはアフィリエイトプログラムに参加しています

こんにちは、ぽてです。過去の自分に向けて、「自分がブログで一度つまずいた箇所」をわかりやすく記事にまとめております。

記事執筆者

このぽてブログのテーマ「選択のきっかけ」を軸にチャトレに関して発信しています。

>>プロフィールはこちら
>>お問い合わせはこちら

ぽてをフォローする
check

cssというコードを扱います。慣れていない方だと時間がかかるし不具合が生じる場合があります。カスタマイズに困っている方向けに、一人一人サポートいたします。

ぽてサポートのメリット
  • CSSを知らなくてOK!
  • SEO対策済みです
  • サイトスピードまでサポート
  • ブログイラスト入手方法付き
  • SEO対策完全ロードマップ付き
  • Lineで一人一人サポートしていきます

無料版デザインに含まれていないもの

  • 文字サイズ・文字色・文字間
  • 一部css
  • 配色ごとの心理効果マニュアル
  • ブログ相談、Lineサポート

サイトレイアウトのCSSをコピペしていない方は、先に下記記事をお読みください。

今回は、ホームカードをCSSでデザインします。

この記事の流れ

サイト内検索デザインCSS

すること

  • テーマファイルをクリック
  • CSSをコピペ

1:外観 →テーマファイルエディター をクリック

2:テーマファイルエディターにCSSをコピペします。

注意

  • できればバックアップすること
  • CocoonChildのstyle.cssにコピペすること

コピペ用

/************************************
**** サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.widget_search{
padding:0;
}
span.fas.fa-search::before{
color:#75b1a9;/*検索マーク色変更はこちら*/
}
.sidebar h3{
color:#7b7b7b;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#75b1a9;/*タイトル下のライン色変更はこちら*/
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
background-color:#f7f7f7;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{
background-color:#75b1a9;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
}
.tagcloud a{
background-color:#f7f7f7;
}
.tagcloud a:hover{
background-color:#75b1a9;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}
.widget-entry-cards .widget-entry-card-content{
color: #565656;
}

以上でサイト内検索デザイン完了です。

サイト内検索デザイン|まとめ

テーマファイルエディターをいじるので、重要なコードを消さないように気をつけてください。

  • color:#75b1a9;/*検索マーク色変更はこちら*/
  • border-color:#75b1a9;/*タイトル下のライン色変更はこちら*/
  • background-color:#75b1a9;/*マウスオーバー時の背景色変更はこちら*/

上記のcss変更で、色を変えられます。

この記事は以上です。

他の場所のCSSも下記記事にまとめています。

アフィリエイト作成〜収益化|よくある質問 Q&A

Q
収益化の具体的な方法はありますか?
A

はい。こちらです。

  • ①:ブログを作る
  • ②:ASPにて紹介したい商品選択
  • ③:記事を執筆(商品を売りこむ)
  • ④:売れれば報酬獲得です!
Q
アフィリエイトで稼ぐ手順はありますか?
A

はい。あります。

  • ①:wordpressの使い方を理解する
  • ②:サイトのデザインを整える
  • ③:サイトスピードを速くする
  • ④:SEOを大まかに理解する
  • ⑤:記事の文字数を増やし・質を高める
  • ⑥:商品へ向けての導線を整える

まずは、サーバー契約をすることが一番先にやるべきことです。下記記事をお読みください。

Q
アフィリ記事の書き方はありますか?
A

はい。あります。

アフィリ記事で大事なのは、記事の構成です。 記事を執筆する前に、構成を考えます。

手順1 タイトルを決める

  • 豆乳 温めると 美味しい
point

タイトルは、検索してくれる人がいそうな単語を入れるべきです。文字数が書けそうなタイトルをなるべく選びましょう。

手順2 記事のトピックを構成

  • 豆乳の成分は、体にいい!?
  • 豆乳を温めた際のメリット○選!
  • 豆乳を美味しく飲む方法
  • おすすめの豆乳メーカーはこれだ!
  • 豆乳についてのよくある質問 – Q&A
check

記事の内容のトピックひとつずつに、キーワードを入れるといいです。検索上位に食い込める可能性が高くなります。

手順3 トピックごとに内容を充実させる

それぞれのトピックごとに本文を作成しましょう。

手順4 関連するアフィリがあれば紹介!

関連する商品をASPにて探しましょう。

上記の記事構成では、Amazonアソシエイトにて自分がおすすめする豆乳を探し、記事にてリンクを貼り付け報酬獲得です!

この流れでほんとに稼げます。

check

読者に寄り添った、記事を書こうとすると自然と文字数も多くなります。

Q
収益化までどのくらい時間がかかる?
A

およそ3〜6ヶ月ぐらいかかると思います。

商品を購入してくれる人は検索から流入します。そのため収益も検索次第です。

そのため、Googleにて検索上位を取らないといけません。Googleに認められるまではこのぐらいかかかります…

check

サイト内にSEOを意識した記事数を増やし、検索上位を狙いましょう。

Q
アフィリエイトより稼げる方法はありますか?
A

あります。女性の方はチャトレの方が早く稼ぐことが可能です。

アダルトあり・ノンアダルトで選べますので、やってみる価値はあります。詳しくは下記記事をお読みください。

Q
稼げるおすすめASPはなんですか?
A

先に結論を言うと「もしもアフィリエイト」です。

ASPとは

簡単にいうと紹介する商品を選ぶ場所です!

紹介したい商品をASPにて探し、それをブログにて紹介すると、ASPから紹介料(報酬)を受け取ることができます。

下記にASPをまとめてあります。

Q
稼いでいる人の割合は少ない?
A

はい。しかし全体的にみると稼いでいる人も多数います。

2023年アフィリエイト意識調査

アフィリエイト収入
  • 月1万円以上:45.9%
  • 月10万円以上:26.1%
  • 月100万円以上:10.5%

収入なしから1000円未満が全体の41.2%です。

SEOを意識した記事執筆で、検索順位に加えて、収入面でも上位を狙うことが可能です。

Q
wordpressの使い方は難しい?
A

簡単です。慣れたら難しくないです。

wordpressを使いこなすと、記事の執筆やサイトのデザインの設計など比較的簡単にできるようになります。

check

本来ならhtml・cssなどのコードを使いサイトを設計デザインしないといけません…

しかし、wordpressを使うことでコードがわからなくてもブログを運用できるようになっております。

ロリポップにてサーバーを契約し、簡単wordpressで導入するのがいいと思います。使い方は、下記記事をお読みください。

おすすめサーバーロリポップ|会社情報・運営情報

ロリポップ会社情報・運営情報

  • サービス名:ロリポップ(LOLIPOP)
  • 運営会社:GMOペパボ株式会社
  • 所在地:〒150-8512   東京都渋谷区桜丘町26番1号セルリアンタワー
  • サービス内容:フリーランス向け金融支援サービス
  • 代表:佐藤 健太郎

2003年から運営されており、大手で安心できますし、サーバーのスピードもトップクラスです。

アフィリエイト稼ぎ方|効率重視

アフィリエイトサイト|完全効率重視

  • 手順1 wordpressを導入
  • 手順2 ASPにて自分が宣伝しやすい商品を選択
  • 手順3 商品が決まったら、サイトの構成を考える
  • 手順4 記事内容を充実させて検索順位をあげる
check

サブ記事からメイン記事への仕組みづくりが最強です…

ブログのロードマップを作成しました。ぜひ参考にしてください。

このページで解説した内容

この記事は以上です。

タイトルとURLをコピーしました