こんにちは、ぽてです。過去の自分に向けて、「自分がブログで一度つまずいた箇所」をわかりやすく記事にまとめております。
記事執筆者
cssというコードを扱います。慣れていない方だと時間がかかるし不具合が生じる場合があります。カスタマイズに困っている方向けに、一人一人サポートいたします。
- ぽてサポートのメリット
-
- CSSを知らなくてOK!
- SEO対策済みです
- サイトスピードまでサポート
- ブログイラスト入手方法付き
- SEO対策完全ロードマップ付き
- Lineで一人一人サポートしていきます
無料版デザインに含まれていないもの
- 文字サイズ・文字色・文字間
- 一部css
- 配色ごとの心理効果マニュアル
- ブログ相談、Lineサポート
サイトレイアウトのCSSをコピペしていない方は、先に下記記事をお読みください。
今回は、モバイルスライドインをCSSでデザインします。
この記事の流れ
メニュー配置|モバイルスライドイン
1:外観 → メニュー をクリックします。
slide(モバイルスライドインメニュー)であることを確認してください。
以上でモバイルスライドインのメニュー配置完了です。
モバイルスライドインデザインCSS
すること
- テーマファイルをクリック
- CSSをコピペ
1:外観 →テーマファイルエディター をクリック
2:テーマファイルエディターにCSSをコピペします。
注意
- できればバックアップすること
- CocoonChildのstyle.cssにコピペすること
コピペ用
/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#75b1a9;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
display:block;
padding:10px;
font-weight:bold;
text-align:center;
margin-bottom:1em;
border-bottom:3px dotted #75b1a9; /*点線の色変更はこちら*/
content: "メニュー";
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1em;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#75b1a9;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .8em;
}
.menu-drawer .sub-menu li:last-child::after{
content:" ";
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#75b1a9;
margin:0 .5em 0 1em;
}
以上でモバイルスライドインのデザインは完了です。
モバイルスライドインデザイン|まとめ
テーマファイルエディターをいじるので、重要なコードを消さないように気をつけてください。
- color:#75b1a9;/*矢印色変更はこちら*/
- border-bottom:3px dotted #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を意識した記事執筆で、検索順位に加えて、収入面でも上位を狙うことが可能です。
- Qwordpressの使い方は難しい?
- A
簡単です。慣れたら難しくないです。
wordpressを使いこなすと、記事の執筆やサイトのデザインの設計など比較的簡単にできるようになります。
check本来ならhtml・cssなどのコードを使いサイトを設計デザインしないといけません…
しかし、wordpressを使うことでコードがわからなくてもブログを運用できるようになっております。
ロリポップにてサーバーを契約し、簡単wordpressで導入するのがいいと思います。使い方は、下記記事をお読みください。
おすすめサーバーロリポップ|会社情報・運営情報
ロリポップ会社情報・運営情報
- サービス名:ロリポップ(LOLIPOP)
- 運営会社:GMOペパボ株式会社
- 所在地:〒150-8512 東京都渋谷区桜丘町26番1号セルリアンタワー
- サービス内容:フリーランス向け金融支援サービス
- 代表:佐藤 健太郎
2003年から運営されており、大手で安心できますし、サーバーのスピードもトップクラスです。
アフィリエイト稼ぎ方|効率重視
アフィリエイトサイト|完全効率重視
- 手順1 wordpressを導入
- 手順2 ASPにて自分が宣伝しやすい商品を選択
- 手順3 商品が決まったら、サイトの構成を考える
- 手順4 記事内容を充実させて検索順位をあげる
サブ記事からメイン記事への仕組みづくりが最強です…
ブログのロードマップを作成しました。ぜひ参考にしてください。
このページで解説した内容
この記事は以上です。