ふくち

ブログ開設から4か月経ち、初めて問合せフォームから問い合わせをいただきました！

喜んだのもつかの間…

これ、返信どうするの…？

しかも問合せ先がGmailってなんかよろしくないかも（いまさら）

そこで本日は「ブログ専用のメールアドレスを取得して設定をした」お話です。

ふくち

conoHaWING利用者なら無料でEmailアドレスを取得できますよ♪

ブログを始めるとき、めんどうだなと思い既存のメールアドレスを問合せ先に使っていたのですが、今から紹介する方法ならブログの問合せ専用のアドレスが出来ます。

しかも10分もあればOK。

ふくち

こんなにカンタンなら最初からやっておけばよかった(笑)

Gmailなどのフリーメールアドレスから専用アドレスへ変更したいと思っている方はもちろん、これからブログを始める方も知っておいて損はないと思います。

ブログ専用のメールアドレスを作成した方がよい理由

ブログ専用のメールアドレスを作成した方が良い理由は以下の3点です。

ブログの信頼性アップ

利用しているメールアドレスにもよりますが、フリーメールアドレスや携帯キャリアのメールアドレスはブログに記載するメールアドレスとしては不向きですよね。

わたしもはじめは普段プライベートで利用しているGmailのアドレスを運営者アドレスとして登録しました。

フリーメールは客観的に見ると怪しいし信頼性に欠けますね。

わたしは初めての問い合わせをいただいたのを機に変更しましたが、必要なことなので早い段階でやってしまいましょう！

自分のプライベートアドレスを知られずに済む

問い合わせフォームに連絡があった際に、返信をする場合の送信元のメールアドレスは登録してあるものになります。

つまり、問い合わせをした人に登録したメールアドレスが知られることになります。

善良な読者ばかりじゃないのも事実。

ここは、ブログサイト専用のアドレスを持っておくと安心です。

ふくち

知らない人にプライベートなアドレスを知られるのは避けたいですよね。

他のメールと分けてて管理できる

ブログ専用のメールアドレスがあれば、メールの管理が楽になります。

山ほど来るメールの中に埋もれてしまう心配がないからです！

フォルダで振り分ける方法もありますが、その場合はわざわざそのフォルダを見に行かないといけないなど、注意すべき点も多くなります。

カンタンに出来るので、サイト専用のメールアドレスとしてサーバーでメールアドレスを取得することをおすすめします。

ConoHaWING（コノハウィング）のメールアドレス取得方法

わたしの利用しているConoHaWINGのメールアドレス取得方法を紹介します。

ConoHaWING以外のレンタルサーバーでも無料でメールアドレスを取得できるものがほとんどですので、ご自身のレンタルサーバーで調べてみて下さいね。

＼これからブログを始めたい人はこちら／

初心者向け ConoHaWINGのブログ立ち上げ方法【最短10分】

スマホOK！人気のレンタルサーバーConoHa WINGでWordpressを開設する方法を画像たっぷりで解説。初心者でも最短10分！人気の理由と気を付けたいポイントも一挙公開！サクっとWordpressを始めましょう。

www.fukuchinofukugyou.com

2023.08.31

では、メールアドレスの取得方法に入ってきます。

取得方法は下記の3ステップです。

ConoHaWINGのマイページにログインする

下記からご自身のEmailアドレスと登録のパスワードでログインしましょう

≫ログインはこちら

メール管理より「＋メールアドレス」を選択

サイドバーのメール管理を選択すると下記の画面になるので「＋メールアドレス」をクリック

好きなメールアドレスとパスワードを設定

メールアドレスの＠マークの前と、パスワード（英数字記号混合8文字以上）を入力し、保存するとメールアドレスが作成できます。

※＠のうしろは自動的にご自身の独自ドメインが入ります。

作成したメールアドレスを使用できるようにする

設定したメールアドレスに送信されたメールを確認したり、メールを送信するには2つの方法があります。

ふくち

それぞれのやり方を解説します。

Webメールを利用する

①ConoHaWINGの管理画面を開けます。

②サイドメニューからメール管理を選択

③Webメールを選択

Webメールから、ConoHaWINGで取得したメールアドレス宛のメールの確認や、メールの返信などを行うことが出来ます。

Gmailのアカウントと連携させる

普段Gmailをお使いの場合はGoogleアカウントと新たに取得したConoHaWINGのメールアドレスを連携させると便利です。

Gmailにも問合せフォームからの内容が届くようになります。

方法については以下のConoha公式のページがわかりやすいです。

Googleとの連携方法を見る
≫ConoHaWING公式　ご利用ガイドへジャンプ（※別ウィンドウで開きます）

WordPressでContact Form７に取得済メールアドレスを設置する方法

WordPressの問合せフォームの作成には、「Contact Form 7」というプラグインの利用が便利です！

設置方法はこちらの記事をご覧ください↓

【Cocoon】問い合わせフォームの作り方を画像付きで解説

Cocoonでの問い合わせフォームの作成から設置方法までを初めての方でもわかるよう画像付きで解説！Contact form7の利用がおすすめです。

www.fukuchinofukugyou.com

2023.08.12

まとめ：ブログ専用のメールアドレスをConoHaWINGで取得しよう！

本日は以下についてお話ししました。

後からやろうと思うとメールのフォルダが分かれてしまうなど管理が煩雑になるので、なるべく早めにやっておきましょう♪

こまるちゃん

Cocoonの◯○ボックスってたくさんありすぎてどれを使えばいいかわからない！

WordPressの無料テーマCocoonの標準機能として、◯◯ボックスは８種類もあります。

8種類もあるとどのようなシーンでどれを使えばいいのか悩んでしまいますが、ユーザーに大事な情報を伝えるためには大切な機能ですので、ポイントを押さえて使いましょう！

ふくち

ボックスを活用すれば大切なところが一目瞭然。離脱率を下げるためにも有効ですよ！

Webサイトやブログを見るときに、一語一句読む人はまれです。

ほとんどの人がいわゆる斜め読みをしています。

それでも、大切なポイントは読み落としてほしくない！

そこで知っておきたいのが、この「ボックス」の使い方です。

【Cocoon】ブログカードの使い方を画像付きで解説！外部リンク・内部リンクの違いも！

Cocoonブロックエディタでのブログカードの使い方の基本を画像付きで解説。外部リンク・内部リンクの違いや、ブログカードのデメリット、上手く表示されない場合の原因と対処方法も解説。

www.fukuchinofukugyou.com

2023.08.15

Cocoonのボックスは8種類

Cocoonには「○○ボックス」と名の付くメニューは上記の8種類あります。

ブロック選択画面で「ボックス」と入力すると、〇〇ボックスの一覧が表示されます。

記事中のブロックを追加（＋）ボタンから検索すると最大6つまでしか表示されませんので、画面左上のブロック挿入ツールを切り替え（＋）ボタンから検索しましょう。

こまるちゃん

タブボックスとタブ見出しボックスは何が違うの？

など、名前が似ているものもあり何が何やら迷ってしまいますよね。

ふくち

試行錯誤しながら30記事以上さまざまなボックス機能を用いて書いた結論ですが、使うボックスは3つに絞りましょう。

ボックスを多く使いすぎるとデザインがバラバラになり、読みづらくなります。

使用するボックスの選び方はこの後説明していきます！

ボックスのグループ分け

ボックスは用途ごとに下記の3グループに分けられます。

1つのグループにつき1つ、気に入ったものを使えば十分です。(つまり3つ覚えればOK)

ふくち

グループごとに分けて説明します♪

Cocoonでタイトルが自由に付けられるボックス3つ

ボックスの上部に自由にアイコンやタイトルが付けられるものは3つあります。

です。

伝えたいポイントや、メリットやデメリットを箇条書きにしたい場合などに向いています。

例えばこんな感じ。

3つの中から見た目で気に入ったものを使えばOKです！

ラベルボックス

ラベルボックスは囲み枠の左上にタイトルが配置されます。

タイトルの文字は自由に編集ができ、タイトルの前のアイコンも52種類（アイコンなしも含む）から選択可能です。

枠の色、背景色、文字色もアレンジが可能です。

見出しボックス

見出しボックスは上部に大きくタイトルの枠があります。

ラベルボックスよりもタイトルが目立ちますね！

ラベルボックス同様タイトルの文字は自由に編集ができ、タイトルの前のアイコンも52種類（アイコンなしも含む）から選択可能です。

枠の色、背景色、本文の文字色もアレンジが可能です。

ただしタイトル部分の文字は白固定なので、枠は濃い色で設定しましょう。

タブ見出しボックス

タブ見出しボックスはその名の通り上部にタブ型のタイトルの枠があります。

前述の2つと同様、タイトルの文字は自由に編集ができ、タイトルの前のアイコンも52種類（アイコンなしも含む）から選択可能です。

枠の色、背景色、本文の文字色もアレンジが可能です。

見出しボックスと同じく、タイトル部分の文字は白なので枠は濃い色にしましょう。

Cocoonでアイコンや定型句から選択するボックス２つ

つづいて、タイトルや案内事項を選択するタイプのボックス2つです。

補足的な情報や、ちょっとしたコメントを伝えるのに適しています。

イメージがわかないと思うので実際の画面の画像を用いて１つずつ説明しますね。

ふくち

個人的にはアイコンボックスが使いやすいですが、

これも見比べて好きな方を使えばOKです！

アイコンボックス

アイコンボックスは既に紹介済の3つとは異なり、必ずアイコンが入ります。

目的に合わせたアイコン付きのボックスが10種類ありますが、タイトルは付けられません。

図のように、10種類の中から目的に合ったタイプを選択して使用します。

タイプによってアイコンやボックスの色は決まっているので色のカスタマイズは出来ません。

実際のボックスの見た目は下記のようになります。

わたしの個人的な好みもありますが、使用頻度を記号で分けましたのでご参考まで。
◎→よく使う　〇→まあまあ使う　△→ほとんど使わない　×→使わない

タブボックス

一見先ほど説明した「タブ見出しボックス」にそっくりですが異なる点があります。

それはタブ部分の文言（アイコンも含む）をラベルの選択肢の中から選ぶという点です。

ラベルは16種類あります。

ふくち

タブ見出しボックスはタイトルは自由、アイコンは52種類から選べたよね！

種類が多いので各ラベルの紹介はしませんが、選択肢がカタカナのものも含め、ラベルはすべて英語表記となります。

例

ポイント　→　POINT

文字列が決まっていると自由度は低く感じますが、統一感は出しやすいです。

なおこちらも枠線、背景、文字色はアレンジできます。

枠（背景）のみのボックス３つ

タイトルやアイコンなどを使用しない枠のみのボックスは以下の３つです。

シンプルなのでどんなシーンでも使いやすいです。

特に白抜きボックスがシンプルでおすすめ！

白抜きボックス

枠線、背景色、文字色のアレンジが可能です。

ボックスの中では最もシンプルなタイプで使い勝手が◎

白抜きボックスという名前ですが、背景色を変えればこんなアレンジも！

案内ボックス

案内ボックスはシンプルな全面塗りつぶしタイプのボックスです。

伝えたい情報の優先度や内容によってタイプを選ぶと自動的にボックスの色も決まります。

ブログ自体のイメージと合う色があまりないという理由でわたしはあまり使用していませんが、色々試してみて下さいね。

付箋（ふせん）風ボックス

その名の通り紙に貼る付箋（ふせん）をイメージしたボックスです。灰色、黄色、赤色、青色、緑色が選択できます。

案内ボックス同様わたしはあまり利用していません…

Cocoonのボックス使用方法

ふくち

最後にボックスの使い方を説明するよ

一番初めに紹介した、カスタマイズ性の高いタイトルが変えられるタイプ3つのうち、「見出しボックス」を例にとって説明します。

これが出来れば他のボックスも問題なく使いこなせますのでご安心を。

実際に上記の見出しボックスを作る手順を紹介します。

ブロックメニューから見出しボックスを選択

ブロック追加（＋）

検索窓で「見出し」と入力

見出しボックスが表示されるので選択する。

ボックスのタイトル編集

下記のブロックが出てきたら見出しを上書きで「見出しボックス利用の5ステップ」に変える

わかるちゃん

利用しているスキンによって表示が異なる場合があるよ

本文編集

タイトルの下をクリックして本文を入力します。

今回は箇条書きの番号付きリストなので（＋）をクリックし、リストを選択します。

デフォルトでは番号なしのリストになっているので、番号付きに切り替えます。

リスト項目を入力すれば完了◎

アイコン選択

タイトルの前にアイコンを付けたい場合は対象のボックスのブロックを選択した状態で設定（⚙）を押すと詳細の設定が出来ます。

内容に合ったアイコンを選びましょう。

ここで選択をしない場合はアイコンは表示されずタイトルのみとなります。

色のカスタマイズ

先ほどのアイコン選択画面を下にスクロールすると色の選択画面があります。

カスタマイズできるのは「枠の色」「背景色」「文字色（本文のみ）」です。

※アイコンボックス・案内ボックス・付箋風ボックスは色のカスタマイズ不可

まとめ：Cocoonの〇〇ボックスの使用方法

本日はWordpressテーマCocoonのボックスの使い方をお話しました。

ふくち

大切なポイントはこちら

ボックスをうまく利用して、読者に大切な情報を伝えましょう！

Cocoonのフォント変更方法！おすすめのフォントも解説

Wordpressテーマcocoonでフォント（字体）を変更する方法。標準で使えるフォントの紹介と、ブログのジャンルや雰囲気別のおすすめフォントの紹介も。

www.fukuchinofukugyou.com

2023.08.14

記事がよかったらクリックで応援お願いします

にほんブログ村

本日はブログ初心者でも簡単に被リンクを獲得できる方法「にほんブログ村」の登録・利用方法を教えます。

ふくち

登録はとってもカンタン。もちろん登録も利用も無料ですよ！

被リンクとは

サイトをつなぐリンクの中でも、「他のサイト」→「自分のサイト」へ向かうリンクを言います。（例えば、どこかのサイトで本サイトのリンクが貼られていればそれは「被リンク」です）

日本ブログ村に登録すれば、日本ブログ村に自分のサイトが掲載されることになります。

つまり「被リンク」を獲得できます。

ふくち

被リンクの獲得は、Googleで上位表示をしてもらうための対策としても重要！

さらに、ドメインパワー（サイトとしての価値のようなもの）の強いサイトから被リンクをもらうのがが効果的。（詳しくは後ほど説明します）

にほんブログ村のような大手のブログポータルサイトに登録することが安全に被リンクを獲得し、自分のサイトのSEO対策を向上させる一番の近道だと言えます。

わかるちゃん

すぐに登録方法を知りたい人は目次からジャンプしてね♪

被リンク獲得の重要性

こまるちゃん

そもそも「被リンク」がどうしてSEO対策に有効なの？

ブログ運営において「被リンク」はアクセスを集める重要な役割を担っています。

理由は

ためです。

Googleの評価を上げるためのSEO対策はいくつかあります。

ふくち

今回のメインではないのでサラッとだけ。基本的にはユーザー（閲覧者）に配慮したサイトづくりが大切です。

このSEO対策の中でも「良質な被リンク」の獲得は重要で、「にほんブログ村」のようなGoogleの評価が高いサイトからの「被リンク」は効果絶大なのです。

＼ブクマ推奨！ブログの基本ワードを解説／

ブログ用語50選！初心者がまず覚えるべき基本用語と意味を解説

ブログを始めると必ずぶち当たる「専門用語」を初心者が必ず覚えるべき50個にしぼって説明します。必要なものはリンクもつけています。このブログ用語集のページをお気に入りに登録して、ブログを始める前や運営中に困った時に辞書代わりに使えば作業効率UP

www.fukuchinofukugyou.com

2023.08.12

にほんブログ村とは？

にほんブログ村の公式サイトではこのように説明されています。

にほんブログ村は、既にブログをお持ちの方がご自分のブログへのアクセス数を増やしたり、読者として気になる情報や調べたいことを検索できる無料のブログポータルサイトです。

にほんブログ村－にほんブログ村とはより引用

ブロガー、ブログを読みたい人いずれも登録することが出来るサービスで総登録者数は984,085名です。（2022年1月23日現在）

会員は記事をアップした際に「新着記事」として表示してもらえたり、ポイントによるランキングにも参加出来るので露出増えて読者獲得のチャンスがアップします。

ふくち

ランキング上位を取ればさらにみてもらえる可能性は広がりますが、ブログ村に登録・設定を行うだけで良質な被リンクは獲得できるのでまずは登録してみましょう。

ブログポータル（ランキング）サイトにはほかにどんなものがある？

にほんブログ村の登録・利用方法

ふくち

利用までの手順は下記の５つだけ！５分あれば完結します！

順を追って説明します。

無料会員登録

①下記の新規会員登録ページにアクセスします。

≫にほんブログ村新規会員登録ページ

②「ブロガーとして登録する」の「メールアドレスで登録する」をクリック

③メールアドレスとパスワード（好きな文字列）を入力し、利用規約のチェックボックスにチェックをして「登録」

④登録したメールアドレスにブログ村からメールが届きます。メール内ににほんブログ村マイページのURLがありますのでクリックします。

⑤「ブログ登録・追加する」ボタンを押すと下記の画面になります。入力を終えたら「確認画面へ」

これで最初のステップはクリアです！

ふくち

この作業が終わると「仮登録」という状態になり審査がスタートします。

本登録になればあらためてブログ村からメールが届きますので1日ほど待ちましょう。

※記事数が少ない場合などはまれに本登録に至らないケースもあるようです。

バナー設置

本登録が完了したらブログにバナーの設置をしましょう！

ランキングバナー

ランキング参加のために設置必須のバナーです。

ブログ村に登録されているブログは、1週間単位でINポイントとOUTポイントが集計されてランキング化されます。

ランキングバナーの取得方法

このうちINポイントを得るためには必ず専用のランキングバナーを設置する必要があります。

①マイページ左側にあるメニューから、「ランキング参加」→「INポイントランキングバナー」の順に選択

②このようなバナーが並んでいますので、好きなタグを選んで「タグをコピー」をクリック

にほんブログ村

わかるちゃん

自分の好きな画像を使ってオリジナルバナーを作る事も出来るよ♡

≫オリジナルバナーはこちら

ランキングバナーの貼り付け方法

ふくち

ここではWordpressテーマCocoonの場合の貼り付け方法を解説します。

その他の場合はこちら

【手順】

①Wordpressの管理画面で「外観」から「ウィジェット」を選択

②ウィジェットのなかから「カスタムHTML」をクリック

③選択肢の中から「サイドバー」をクリックし「ウィジェットを追加」をクリック

④サイドバーウィジェットにカスタムHTMLが追加されますので、内容欄に先ほどブログ村でコピーしたものを丸々貼り付けます。

⑤「保存」を押せば完了です。

わかるちゃん

プレビュー画面でバナーが反映されているか確認してね！

先ほどと同様の方法でバナーのコードをコピーしてブロックエディタの「カスタムHTML」になり付ければOKです！

このように、ブロックエディタの検索窓に「HTML」と入力すればすぐにでてきます。

個人的にはこのバナーがかわいくて好きです！

PVポイントランキングバナー

こちらはクリックでなく、閲覧されただけでポイントが入るバナーです。

PVポイントランキングバナーをクリックし、先ほどの要領でサイドバーにコードを貼り付けましょう。

ふくち

これで基本の設置は完了！

あとはお好みで色々試してみてね♡

Ping送信の設定

さあ、設定の完了までもう一息です。

Ping送信の設定方法を見てきますね。

①ブログ村のメニュー内「記事管理」→「記事反映/Ping送信」をクリック

②あなた専用のPingURLが表示されるのでコピーします

③Wordpressの管理者画面
　設定→投稿設定内「更新情報サービス」にコピーしたURLを貼り付けて「変更を保存」で完了！

≫他のブログのPing送信設定はこちら

にほんブログ村内で表示される画像の設定

ふくち

最後に画像を設定します！人目に触れる大事な画像なのでこだわって選びましょう。

①マイページのメニューから「プロフィール管理」→「プロフィールイメージ登録」を選択

②カメラマークをクリックし、画像を選択し「プロフィール画像に設定」をクリックします。

にほんブログ村に登録して良質な被リンクを獲得しよう！

本日は

についてお話しました。

にほんブログ村は日本で最大級のブログポータルサイトです！

登録すれば強力な被リンクが獲得できて、また新たなファンを増やしたり他の人のブログを見て勉強するのにも役立ちますよ！

記事が20記事程度の準備が出来たら忘れずに登録しましょう

さっそくにほんブログ村に登録する

＼全ての素材が無料！運営者ふくちのフリーイラストサイト／

こまるちゃん

ブログに図解を入れたいけど、慣れてるパワーポイントで作りたいな。

わかるちゃん

パワポで作った図をブログに使えたら便利だよね！

そう考える方も多いのではないでしょうか。

当記事では

「パワーポイントで作成した表や図などをブログに画像として挿入する方法」

を画像付きで解説します。

ワードプレスでも表は作成できますし、図の作成に関してはより適したソフトやサービスは他にもありますが、ちょっとした図を作成する程度であれば慣れ親しんだツールを使うのが一番早いですよね。

ふくち

サクッとパワポで作成した図をブログに挿入する方法をお教えしていきます♪

パワーポイントの資料をワードプレスブログに挿入する４ステップ

パワーポイントで資料を作成し、画像としてワードプレスブログに挿入する方法を説明していきます。

ステップは以下の通りです。

ふくち

1つずつ見ていきましょう！

STEP1: パワーポイントで資料を作成する

まずは通常通りパワーポイントで好きな資料を作成します。

例として、下記を作成しました。（実際に別の記事に使うための図です）

STEP:2 作成した図などを全選択する

作成したものを全て選択します。

パワーポイントの画面を開いた状態で、キーボードで「Ctrl」キーと「A」のキーを同時に押します。

選択後は下記のような画面になります。

STEP3: 選択したものを図として保存する

先ほど選択した項目を「図として保存」します。

選択後、マウスで右クリック→「図として保存」を選択します。

わかりやすい名前を付けて好きな場所に保存しましょう。

STEP4: WordPressで画像を挿入する

あとは通常通りWordpressでさきほど保存した画像をアップロードすればOKです。

画像が増えるとページの読み込みが遅くなりますので、圧縮のプラグインを利用することをお勧めします。

おすすめのフリーサイトは「Tiny png」 です。

≫tiny pngを開く

おまけの小ネタ「スクショにパワーポイントで図形や目印を追加する」

ふくち

何かのやり方・手順を説明する記事では補足で画像があると助かりますよね。

手順説明で実際の操作画面のスクリーンショットなどを使う場合、そこに囲みや矢印などを描きたしたいことがあると思います。

そんなちょっとした編集にもパワーポイントは活躍してくれます♪

まずは使いたい画面をスクリーンショット（画面コピー）します。

パワーポイントに貼り付け、図形などを描き足してから「Ctrl＋A」→「マウス右クリック」→「図として保存」の手順で保存します。

パワーポイントで作成した図を利用してブログの説得力を高めよう！

本日は簡単に図などをWordpressブログに挿入する方法をお伝えしました。

ぜひ活用してみて下さい♪

本日はCocoonの「ブログカード」の基本的な使い方を解説します。

ブログカードとはこのようなカード形式のリンクです。

【超簡単】Wordpressブログで広告バナーを中央よせする方法

＜コピペ可能なコード有＞デフォルトでは左寄せになってしまう広告バナーを1発で中央よせする方法を解説します。

www.fukuchinofukugyou.com

2022.07.30

文字のみのリンクと大きく異なる点は、

という点。

本日はCocoonのブログカードが使いこなせるよう、下記の順に解説していきます。

リンクはブログにとても大切な要素ですので、ぜひ最後まで読んでいって下さいね！

では早速本編に入っていきましょう。

＼目次から読みたいところへGO！／

内部リンクと外部リンクとは？

内部リンクと外部リンクについてカンタンに説明します。

内部リンクとは

外部リンクとは

あるWebサイトと別のWebサイトをつなぐリンク

外部のWebサイトから自分のサイトへリンクするリンクの場合は「被リンク」とも呼ぶ

です。

》リンクについて詳しく知りたい方はこちら

ブログカードについて言えば、内部リンク用が「内部ブログカード」、外部リンク用が「外部ブログカード」ということになります。

ふくち

内部ブログカードと外部ブログカードはこの後も話に出て来るので覚えておいてくださいね♪

ブログカードのメリット・デメリット

冒頭にもお伝えしましたが、ブログカードのメリットは画像があるので目を引くところ、記事の内容がわかりやすいところです。

目を引くならクリック率も高まりそうですし、たくさん使った方が良いと感じますね。

ですが、使用する上でいくつかデメリットや注意点がありますので覚えときましょう！

ふくち

１つずつ見ていきましょう。

ブログカードはリンクと認識されづらい

テキストリンクの場合は、「青文字＋アンダーライン」です。

多くの人はこのような文字列があれば、リンクだと無意識に判断していると思います。

ブログカードの場合は表記方が異なるため、リンクと認識されづらいようです。

Cocoonのブログカードは右上にラベルをつけることができるので、「参考リンク」「関連記事」などを選べばリンクと認識されやすくなりますが、表示が小さいのでぱっと見ではわかりづらい可能性があります。

ブログカードは広告と間違われやすい

Adsense広告と見た目が似ているため、広告と間違われやすく避けられる可能性があります。

その場合はブログカードの上部に、「下記の参考記事も読むとわかりやすいですよ！」などと補足してあげると良いですね。

ブログカードを使いすぎると記事全体がうるさくなる

リンクの多い記事で全てブログカードにしてしまうと、見た目がゴチャゴチャして離脱率を高めてしまう可能性があります。

例えば内部リンクで本当に大切な記事だけブログカードにする。

外部リンクは普通のリンクを使用する。

など、バランスを見た使い方が必要です。

ブログカードはアイキャッチの良し悪しの影響が大きい

ブログカードはアイキャッチ画像が入るため、目をひきやすいです。

その反面、ブログカードに表示されるアイキャッチ画像の良し悪しが、リンクの印象を大きく左右します。

ブログカードを使用する際はこの点にも気をつけましょう！

メンテナンスが重要

リンクは定期的に見直すことが非常に大切です。

「リンクをクリックたけどリンク先のページがなかったときの絶望感」は大きいですよね。

もちろんブログカード以外のリンクでもリンク先のメンテナンスは大切ですが、ブログカードの場合は特にリンクぎれ（リンク先の記事がない）の場合などはこのような表示になってしまうため、注意が必要です。

Cocoon

「Cocoon」の記事一覧です。

www.fukuchinofukugyou.com

Cocoonのブログカードの基本設定方法

記事内にブログカードを設置する前に、基本設定を行いましょう。

手順は下記の通りです。

①サイドバーのCocoon設定→ブログカードの順で選択。

②下記の「内部ブログカード設定」の画面が出たら各項目を選択していきます。

※下へスクロールすると外部ブログカード（外部リンク用のブログカード）の設定があります。

ふくち

下記の通り設定してみてね！

③最後に下にある「変更をまとめて保存」をクリックします。

以下のページが出てしまった場合はサーバーのセキュリティ（WAF）設定の問題が考えられます。（WAFを一時的にOFFにすると変更が可能になるほとんどです。）

利用のサーバーによりWAFの設定方法は異なります。主要なサーバーの公式ページのリンクを「ブログカード」で貼っておきますのでご確認下さい。

変更を保存した後は必ず再度WAFをONにしてください

※WAF（ウェブアプリケーションファイアウォール）は不正アクセス等外部の脅威を防ぐ仕組みです。

主要サーバーのWAFの解除方法を確認する

ConoHa WING ：WAFのOFFにする方法

エックスサーバー ：WAFをOFFにする方法

ロリポップ！ ：WAFをOFFにする方法

Cocoonのブログカード設置方法

ブログカードの設置方法です。

以下の手順で行います。

①サイドバーのCocoon設定→ブログカードの順で選択します。

②下記の画面になりますので、順に設定していきます。

上が内部ブログカード（内部リンク用のブログカード）、下にいくと外部ブログカード（外部リンク用のブログカード）の設定があります。

③すべて設定を終えたら、最後に下にある「変更をまとめて保存」をクリックします。

以下のページが出てしまった場合はサーバーのWAFの設定が問題が考えられます。（WAFを一時的にOFFにすると変更が可能になるほとんどです。）

利用のサーバーによりWAFの設定方法は異なります。主要なサーバーの公式ページのリンクを「ブログカード」で貼っておきますのでご確認下さい。

変更を保存した後は必ず再度WAFをONにしてください

※WAF（ウェブアプリケーションファイアウォール）は不正アクセス等外部の脅威を防ぐ仕組みです。

主要サーバーのWAFの解除方法を確認する

ConoHa WING ：WAFのOFFにする方法

エックスサーバー ：WAFをOFFにする方法

ロリポップ！ ：WAFをOFFにする方法

ブロックエディタでブログカードを選択

基本設定が終わったらいよいよブログカードを使ってみましょう！

ブロックエディタでブロックを追加をクリック（①）。検索窓に「ブログカード」と入力して検索（②）。ブログカードが出てきたらクリック（③）。

対象ページのURLを貼り付け

①下記の枠が出てきます。（スキンにより見た目は異なる可能性があります）

②ブロック内をクリックし、対象のURLを貼り付けます。

③下書き保存後、プレビューを開いてみましょう。

こんな感じにみえれば成功です↓

ラベルを編集

①ラベルを編集したいブロックをクリックして選択

②右側のブロックのタブを選択

③スタイル設定のラベルから好きなものを選択

④ラベルが設定されます。プレビューで確認してみましょう。

ブログカードでありがちな失敗と対処法

こまるちゃん

あれ？ブログカードを設置したはずなのにただのリンクになってる！

私も何度か経験した事象です。

よくある原因は2つですので、まずはこちらを確認してみましょう。

左が編集画面での表示、右がプレビューした場合の表示方法です。

③のみ正しく表示されているのがお分かりいただけると思います。

URLが誤っている場合

当たり前ですが、URLを打ち間違えていると当然正しく表示されません。

必ず手打ちではなく、コピーして貼り付けを行いましょう。

URLが日本語に変換されてしまう場合

主にMicrosoftEdgeを利用の場合ですが、URLをコピー＆ペーストすると日本語のウェブページタイトル等に変換されて貼り付けされる場合があります。

対象のページでURLバーの内容をコピーします。

これを単純にCtrl＋ｖなどで貼り付けるとこのように日本語で貼り付けられてしまうことがあります。（Microsoft Edgeの場合が多い）

一度メモ帳に貼り付けてからコピーしなおすか、下記の貼り付け方法をすると回避することが出来ます。

二段に分かれた「貼り付け」の内下の貼り付け横の矢印をクリックし、次に出てて来る「書式なし」をクリックします（マウス操作でなく、キー操作のCtrl＋Shift＋VでもOK）

これで解決です！

再度プレビューを確認してみましょう。

元々パーマリンクを日本語で設定している下記のようなURLの場合も、上記の要領で貼り付ければ自動的にこのように文字列が変換されますので表示には問題ありません。

TOP Page

センシティブすぎるゆえ人付き合いが苦手で世渡り下手。そんなわたしが、自由な生き方をするため実践する副業やスキルアップについて役立つ情報をお届けします。自分に合った生き方が幸せへの近道です！

www.fukuchinofukugyou.com

2021.12.30

お問い合わせ/

↓

お問い合わせ

www.fukuchinofukugyou.com

2021.10.16

スペースが入ってしまった場合

URLも正しく、かつきちんと日本語で入っている場合ですが、スペースが入ってしまい上手く表示されないケースがあります。

確認し、万一前後やURLの中に不要なスペースがあれば削除しましょう。

まとめ：ブログカードを使うべき理由と使い方

本日は主に以下についてお話をいたしました。

ふくち

リンクやブログカードを上手に使ってより良い記事にしていきましょう！

記事がよかったらクリックで応援お願いします

にほんブログ村

記事が読みやすくなる！Cocoonのボックス機能を使いこなそう！

Cocoonのボックス機能は全部で８つ。白抜きボックス・案内ボックス・付箋風ボックス・ラベルボックス・見出しボックス・タブボックス・タブ見出しボックス・アイコンボックス。基本の使用方法と用途に合わせた使い分けを説明します。

www.fukuchinofukugyou.com

2024.05.07

こまるちゃん

ブログの雰囲気と文字の雰囲気があわないんだよね。

わかるちゃん

簡単な設定でフォント（字体）を変えることができるよ！

本日はCocoonでフォント（字体）を変更する方法をお話しします。

この記事を読んでくださっているあなたはすでにフォントを変えたい！という意志を持っている方だと思います。

ふくち

そう、フォントは読み手に与える印象も左右する大切な要素です

この記事では以下をお話します。

変更方法だけ知りたい！という方は目次の３番へジャンプしてくださいね↓↓

ブログにおけるフォントの重要性

ブログで最も大切なのは記事の内容ですが、フォントもブログの印象を左右する重要なポイントの１つです。

なぜなら、人は文字から言葉の意味だけでなく、印象も受け取っているからです。

ふくち

手紙なども字によって相手の性格が感じられたり、話をする場合も、相手の声のトーンや話し方によって受け手の印象が全然違いますよね！

少し例を見てみましょう。

同じ言葉でも「知的」「繊細」「元気」「おしゃれ」など、印象が違ってきますね。

デザインの世界でもフォントはデザインのイメージを大きく左右するため、重要視されています。

ブログでも人を惹きつけ、読んでもらうためにフォントにもこだわりましょう！

Cocoon で利用できるフォントとおすすめフォントの紹介

ここでは、Cocoon で利用できるフォントを画像で確認します。

その上でブログの特色に合わせたおすすめのフォントを紹介します！

Cocoon で利用できるフォント一覧

Cocoon に装備されているフォントは全部で12種類あります。

正直、ほとんど見栄えが変わらないものもあるのですが^^;

Cocoon のフォント一覧

1.ヒラギノ角ゴ，メイリオ　
（初期設定で適用）

3.游ゴシック体，ヒラギノ角ゴ

5.Noto Sans JP（WEBフォント）

7.Mplus 1p (WEBフォント)

9.小杉ゴシック（WEBフォント）

11.さわらびゴシック（WEBフォント）

2.メイリオ，ヒラギノ角ゴ

4.MS Pゴシック，ヒラギノ角ゴ

6.Noto Serif JP（WEBフォント）

8.Rounded Mpuls 1c(WEBフォント)

10.小杉丸ゴシック（WEBフォント）
※当ブログで利用しているフォント

12.さわらび明朝（WEBフォント）

わかるちゃん

WEBフォントはインターネット上で配布されているフォントのこと！おしゃれなフォントも多くて素敵なんだけど、少し読み込みに時間がかかるのがネックだね。

ブログジャンル別おすすめフォント紹介

ブログのジャンル別でおすすめのフォントを紹介します。

ビジネス系ブログ

角ゴシック系の書体がおすすめです。（上記で言うと１〜４）

名前に「角ゴ（角ゴシックの略）」とついているものですね！

ですので、初期設定の「ヒラギノ角ゴ，メイリオ」のままでもOKです。

角ばっており、直線的なゴシック体は「信頼感」を与えます。

そのため、ビジネスマン向けのブログや、比較的堅めの内容のブログに適しています。

高級商品の紹介ブログ・文学的なエッセンスのあるブログ

このようなブログには 6のNoto Serif JPまたは12のさわらび明朝がおすすめです。

明朝体は「繊細さ」や「高級感」などが感じられる書体です。

小説などにも使われているのも目にすること思います。

例えば、高級商品で言うと高級エステやジュエリー、高級ホテルなど。

文学的なエッセンスというところでは芸術作品を紹介するブログであったり、小説調のブログであったりというイメージです。

育児ブログ・やわらかい見た目のブログ

やわらかな雰囲気のブログにはこんな書体がおすすめです。

８のRounded Mpuls 1cや10の小杉丸ゴシックなど丸みのある文字が適しています。

なぜなら、「丸み＝かわいらしい」という印象があるためです。

一例としては、赤ちゃんや小さなお子さんの子育てのブログや、可愛いキャラクター紹介のブログなど。

ふくち

利用したいフォントは決まったかな？

Cocoon のフォント変更３ステップ

フォントが決まったら変更作業に入りましょう！

変更はとっても簡単。３分あればできます。

Cocoon 設定の「全体」を開く

WordPressの画面で、「①Cocoon 設定」→「②全体タブ」をクリック

フォントを選択する

下方にスクロールするとすぐに「サイトフォント」という項目がありますので、その中のフォントのプルダウンから好きなフォントを選択しましょう。

保存していない段階では右側のプレービューに反映されないことがあります。

変更を保存する

一番下までスクロールすると「変更をまとめて保存する」というボタンがありますので、クリックしましょう。

これで作業は完了です。

「変更をまとめて保存」を押した際に以下の表示になった場合はサーバーのWAFの設定が問題が考えられます。（WAFを一時的にOFFにすると変更が可能になるほとんどです。）

利用のサーバーによりWAFの設定方法は異なります。主要なサーバーの公式ページのリンクを「ブログカード」で貼っておきますのでご確認下さい。

変更を保存した後は必ず再度WAFをONにしてください

※WAF（ウェブアプリケーションファイアウォール）は不正アクセス等外部の脅威を防ぐ仕組みです。

主要サーバーのWAFの解除方法を確認する

ConoHa WING ：WAFのOFFにする方法

エックスサーバー ：WAFをOFFにする方法

ロリポップ！ ：WAFをOFFにする方法

まとめ：Cocoon のフォントをブログに合わせて変更しよう！

本日はCocoon のフォント変更方法を見てきました。

ポイントはこちら

ふくち

とっても簡単にブログの印象を変えられる方法なので、ぜひ試してみてくださいね！

＼ボックスメニューをオリジナルにカスタマイズしてみよう／

【Cocoon】ボックスメニューの画像を使用したカスタマイズ方法

CSS不要！Cocoonのボックスメニューを画像を使ってカスタマイズする方法を画像付きで解説。必要な画像サイズ・画像が表示されない原因・ヘッダー下やサイドバーへの設置方法も。

www.fukuchinofukugyou.com

2023.08.12

＼１ブロガーに１冊！痒い所に手が届く／

ブログで５億円稼いだ方法

ダイヤモンド社

¥1,760 （2022/08/09 13:34時点 | Amazon調べ）

口コミを見る

Amazon

楽天市場

Yahooショッピング

ポチップ

わかるちゃん

ブロガー１家に１冊！初級者〜中級者までしっかり使えるブログの教科書的な本だよ♪

こまるちゃん

ブログを始めたんだけど、問い合わせフォームて必要？

ふくち

問い合わせフォームはブログには必須！ブログの利便性や読者からの信頼感・そしてGoogleAdsense対策としても早めに作っておいたほうがいいよ！

当記事ではWordPressの無料テーマCocoonユーザー向け

ブログに必須の「問い合わせフォーム」の作り方を解説します。

作り方は操作画面の画像付きで解説するので、その通りに進めればすぐにお問合せフォームとして機能してくれます。

早速見ていきましょう！

＼すぐに設置方法を知りたい方／

目次から「2.ブログの問い合わせフォームの作り方」へジャンプしてください↓

ブログに問い合わせフォームを設置する理由

そもそも問い合わせフォームはなぜ必要なのでしょうか？

個人のブログならなくても良いのでは？と思う方もいらっしゃると思いますが、アフィリエイトブログには必須です。

理由は大きく2点

それぞれ見ていきましょう。

ブログの信用性を高めてくれる

問い合わせフォームが設置されていると、ブログの信用性が高まります。

読者がブログ管理者へ何か伝えたいことがある場合、問い合わせ先がないとどうなるか。

ふくち

コメントでこと足りる場合もありますが、内容によってはこっそり運営者へ聞きたい、知らせたい場合もありますよね。

お問い合わせフォームが設置してあれば、読者からの連絡が可能です。

それと同時に、「このブログは読者のことを考えている」と、検索エンジンからの評価や信頼にもつながります。

Googleアドセンスの審査にも必須の項目です！

＼Googleアドセンス合格記／

準備がととのっていなくてすみません。 | まるっとふくち

好きと生きる。好きに生きる。

www.fukuchinofukugyou.com

＼ブログ運営に必須の言葉をまとめて学ぶ！／

ブログ用語50選！初心者がまず覚えるべき基本用語と意味を解説

ブログを始めると必ずぶち当たる「専門用語」を初心者が必ず覚えるべき50個にしぼって説明します。必要なものはリンクもつけています。このブログ用語集のページをお気に入りに登録して、ブログを始める前や運営中に困った時に辞書代わりに使えば作業効率UP

www.fukuchinofukugyou.com

2023.08.12

お問い合わせフォームは仕事の依頼窓口になる

ブログ運営をしていると、企業から広告掲載のオファーがくる場合があります。

実際、わたしもお問い合わせフォームから何度か広告のオファーをいただいたことがあります。

ふくち

広告掲載の依頼は詐欺の可能性もあります！安請け合いせずに、身元の名前や連絡先などはしっかり確認して判断しましょう。

ブログの収益化を考えているのであれば問合せフォームは必須です。

ブログの問い合わせフォームの作り方　

Cocoonでお問合せフォームを作成する方法にをお話しします。

WordPressのプラグイン「Contact Form7」を利用すればとってもカンタンに設置出来ます！

手順は下記の通りです。

ふくち

問合せフォームの設置から細かな設定まで終えることができますよ！

Contact Form7のインストール方法

WordPressのプラグインContact Form7のインストール方法です。

①Wordpressログイン後の管理画面
　左側の「プラグイン」を選択し、上の方にある「新規追加」をクリック

②検索窓に「Contact Form7」と入力して検索
　富士山マークのContact Form7が出てくるので「今すぐインストール」をクリック

③インストールが完了したら必ず「有効化」をクリックしましょう。

Contact Form７の設定方法　

次にコンタクトフォームの設置と設定を行います。

コンタクトフォームの新規作成

①WordPress画面左側のサイドメニュー内、お問い合わせの新規追加をクリックすると下記の画面になります。

任意のタイトルを入力します。

ふくち

タイトルは読者の目にふれることはないのでなんでもOKです！

Contact Form7の各種設定

コンタクトフォーム内の設定を行います。

4つのタブをそれぞれ設定していきます。

1. フォーム
   お問い合わせに含める内容を設定
2. メール
   問合せがあった場合の通知、自動返信
3. メッセージ
   返信内容の設定
4. その他設定
   更にカスタマイズが必要な場合に使用

項目ごとに設定内容を見ていきましょう。

フォームの設定

こちらは必要最小限の設定はされているので、特にいじらなくて大丈夫です。

メールの設定

メールの設定画面では下記の項目を設定します。

１の送信先以外は実際に使ってみて勝手が悪くなければ、デフォルトのままで問題ないかと思います。

さらに下の方へスクロールすると「メール２」の設定が出てきます。

問合せを受信した際に取り急ぎ自動返信ができますので設定することをおすすめします。

変更する箇所は「３．メールの件名」のみでOKです。

メッセージの設定

お問い合わせフォームで表示される内容を変更できます。

例えば、

メッセージが正常に送信された場合

→ありがとうございます。メッセージは送信されました。

など。

ふくち

変更しなくても大丈夫ですが、お好みでカスタマイズしてみましょう！

その他設定

こちらも特に手を加える必要はありません。

お問い合わせページの作成

お問い合わせフォームの準備がととのったら、実際にお問い合わせページを作成してみましょう！

①Wordpress管理画面のサイドメニュー、固定ページ→新規追加をクリック

②タイトルを好きなものに変更（お問い合わせなど）

③ブロック追加ボタンをクリック

④ブロックの検索窓に「contact」などと入力すると富士山のマークが出てくるのでクリック

⑤コンタクトフォームの作成は1つのみかと思いますので「コンタクトフォーム１」のままでOKです。

⑥プレビューをチェックして問題なければ最後に公開をクリックしましょう。

ちなみに、当サイトの問合せフォームは下記です。

タイトルの下に段落を追加して文章を差し込んでいます。

フッター・ヘッダーに「お問い合わせ」メニューを追加する

最後に、サイトのヘッダーやフッターにお問い合わせの項目が表示されるように設定します。

当サイトでは画面の下方に表示されるフッターメニューに配置しておりますので、その方法を教えます。

ふくち

色々なサイトを見るとわかりますが、どのページからでも見られる「ヘッダー」か「フッター」に配置しているサイトがほとんどです。

実際こんな感じで配置しています。

では、具体的な方法です。

WordPress管理画面のサイドメニューから外観→メニューを選択

メニューの作成ページが開きます。

フッダーメニューがない場合の7ステップ

これからフッターメニューを作成する場合の手順です。

【フッターの作成方法】

①「新しいメニューを作成しましょう」をクリック

②メニュー名を入力

③フッターメニューとフッターモバイルボタンにチェック

④メニューを作成をクリック

この後は次の「フッターメニューがすでにある場合の3ステップ」と同様です。

フッターメニューがすでにある場合の3ステップ

フッターメニューがすでに作成されている場合の手順です。

①編集するメニューからフッターを選んで選択

②お問い合わせにチェック

③メニューに追加をクリック

ふくち

以上のステップでフッターメニューにお問い合わせの項目が追加されます！

設置できたかどうか、プレビューで確認してみましょう！

まとめ：ブログのお問い合わせフォームの作り方

本日は以下のことをお話しました。

ふくち

1度やれば終わる完結型の作業なので、早めに済ませてしまいましょう！

＼安全性が向上する！／

ConoHaWINGのメールアドレスをブログの問合せ先に設定する方法

ConoHa WINGでメールアドレスを作成し、利用する方法。ブログへの設置方法も画像付きで解説します。ブログにプライベートなアドレスの利用はせず、レンタルサーバーで作れるメールアドレスを使用しましょう。

www.fukuchinofukugyou.com

2024.06.03

本日は

WordPressのテーマ「Cocoon」の

ボックスメニューを好きな画像を使用してカスタマイズする方法

を画像たっぷりでお教えします♪

ふくち

実はWordpressのテーマ「Cocoon」でもCSS不要でにボックスメニューをカスタマイズすることができます！

ふくち

初期設定では左側のような星マークになっていますがこれからお伝えする方法でオリジナリティあふれる画像入りのボックスメニューが出来ます♪

画像の準備があれば初心者の方でも20分程度で完了します！

ふくち

専門知識がなくてもこの記事を読めば完成します！安心してスタートしましょう♪

＼これから利用する画像を探す方へ／

【2024年最新】大人可愛いアイコンが無料のイラストサイト6選

SNSのアイコンに！無料で使える、大人女子向けシンプル・かわいい・おしゃれな画像素材サイト7選です。

www.fukuchinofukugyou.com

2024.05.20

＼ゆるかわフリーイラストはこちら／

Cocoonでオリジナル画像のボックスメニューを作成する3STEP

オリジナル画像でのボックスメニューは以下の3STEPで作成できます。

順に解説します。

Cocoonボックスメニューの作成方法

まずはボックスメニューに入れたい項目をピックアップして、新規メニューを作成します。

手順は下記の通りです。

新規メニュー作成

①Wordpress左側の編集メニューから、「外観」→「メニュー」の順で選択

②新しいメニューを作成しましょうをクリック

③メニュー名に任意の名前を入力し、右下のメニューを作成をクリック

ふくち

メニュー名はなんでもOKですが、「ボックスメニュー」としておくと後々わかりやすいです

これで新しいメニューの枠が完成しました。

メニューに入れる項目の選択

つづいて、ボックスメニューに入れたい項目を選択します。

項目として選べるのは

• 固定ページ
  トップページ・問い合わせなど
• 投稿
• 投稿カテゴリー

です。

わたしの場合は固定ページ（TOP Page）1つと、その他は投稿カテゴリーをを入れています。

わかるちゃん

イチオシの投稿（記事）がある場合は投稿を入れてもいいよね♪

項目が7つ以上になるとこんな感じで2列目に突入してしまい中途半端になりますので、項目は6個がベストですね。

メニュー項目の選択方法

下記の手順でメニューの項目を選択していきます。

ふくち

メニューの位置は選ばなくてOKだよ！

サイドバーの場合は左上からジグザグに右下へという順番になります。（画像参照）

（ヘッダー下の横並びのメニューであれば左から順番に並びます）

メニュー項目を選択した後でも、ドラッグ＆ドロップで項目の並べ替えができます。

メニュー項目の削除方法

もし誤って項目を選択してしまった場合は下記の方法で削除できます。

作成したメニューに任意の画像を配置する

先ほど作成したメニューの項目に画像を設定してゆきます。

手順は下記の通りです。

ボックスメニューに利用したい画像をまとめて保存する

ボックスメニューのアイコンとして使いたい画像を作成またはフリー画像サイトなどでダウンロードし保存しておきます。

ふくち

画像を今から探す方は、下記を参考にしてみてくださいね！

【2024年最新】大人可愛いアイコンが無料のイラストサイト6選

SNSのアイコンに！無料で使える、大人女子向けシンプル・かわいい・おしゃれな画像素材サイト7選です。

www.fukuchinofukugyou.com

2024.05.20

保存場所はどこでもOKですが、全画像を同じフォルダなどにまとめておくと次の手順が楽になります。

ふくち

ファイル名に日本語が入っていると上手く表示されないことがあります

利用したい画像をメディアに登録する

ボックスメニューに使用するための画像をワードプレスに登録します。

①Wordpressの左側編集メニュー

「メディア」→「新規追加」の順にクリック

②点線の枠内にボックスメニューに保存した画像をまとめてドラッグ＆ドロップ

ふくち

まとめてやると後の手間が省けますが、難しい場合は1つ1つでもドラッグ＆ドロップしてもOKです。（「ファイルを選択から１つ1つファイルを選ぶやり方でもOK）

③下記のような画像の一覧表示になったら、1つずつ次の作業をします。

ふくち

ワードプレスを2つのウィンドウで操作できる場合は次の行程でメニューに直接URLを貼り付けられるので、メモ帳には貼り付け不要です。

つまづきポイント

もし上記のような画面にならない場合は、登録済の画像をクリックするとファイルの詳細画面の右下からURLコピーが出来るのでこちらでコピーしてください。

メニューのタイトル属性に画像URLを貼り付ける

①Wordpress左側の編集メニューから、「外観」→「メニュー」の順で選択

②右上の表示オプションをクリック

③タイトルとCSSクラスにチェックを入れる

④編集するメニューを選択から作成済のメニューを選択し、「選択をクリック」

ふくち

さっき作ったメニューの名前を選択するよ

⑤各メニュー項目の右側の▼をクリックして、

Cocoonボックスメニューの設置方法

作成済のメニューをボックス形式で表示します！

ウィジェットから超カンタンに設定が可能♪

まずはWordpressのサイドメニューから「ウィジェット」をクリックします。

ボックスメニューをサイドバーに設定する

①利用できるウィジェットの中にある、「ボックスメニュー」右の▼をクリック

②下のスクロールからサイドバーを選んでクリックしてから下方にある「ウィジェットに追加」をクリック

すると画面右の方にある「サイドバー」の項目内に「ボックスメニュー」が追加されます。

③ボックスメニューの枠右側の▼をクリックします

④メニュー名のプルダウンから作成済みのメニューを選択して保存をクリックします

ふくち

タイトルの欄は入れても、空欄のままでもどちらでもOK。

入力すると、ボックスメニューの上に入れた文章が表示されるよ！

プレビューを見てこんな感じに表示されればOKです。

ヘッダー下に設定する

サイドバーへの設置と同様の流れになります。

「サイドバー」の部分を「ヘッダー上部」へ置きかえて作業してみてくださいね。

こんな感じで表示されればOKです。

これでボックスメニューの作成と設置完了です！

ふくち

お気に入りのメニューは出来ましたか？

フリー素材でも十分ですが、自分だけのオリジナル画像が欲しい方はココナラが便利↓↓

ふくち

ここから登録すると1000円相当のポイントゲット！（2023年8月現在）
≫ココナラの新規登録はこちら

≫ココナラでイラストを探す

オススメの無料イラスト素材↓

【2024年最新】大人可愛いアイコンが無料のイラストサイト6選

SNSのアイコンに！無料で使える、大人女子向けシンプル・かわいい・おしゃれな画像素材サイト7選です。

www.fukuchinofukugyou.com

2024.05.20

7万点以上が無料！？アドビストックのフリー素材の利用方法

高品質で商用OK・イラレやフォトショと相性抜群！Adobe Stockの無料素材を利用する方法。Webデザイナーなど画像を扱う人はチェック必須！利用方法から使用可能な用途まで解説します。有料素材を無料で使う方法も◎

www.fukuchinofukugyou.com

2023.08.15

Cocoonのフォント変更方法！おすすめのフォントも解説

Wordpressテーマcocoonでフォント（字体）を変更する方法。標準で使えるフォントの紹介と、ブログのジャンルや雰囲気別のおすすめフォントの紹介も。

www.fukuchinofukugyou.com

2023.08.14

こまるちゃん

同じページの中で別の場所にジャンプするリンクを作りたい！

ふくち

ページ内リンクを作るのにやることは2つだけ！初めてでも5分あればできちゃうよ！

本日お話しするのは同じページの中で別の場所に移動する「ページ内リンク」を作成する方法です。

ふくち

アンカーリンクという呼び方もありますが同義と捉えてOKです！

前置き不要な方は「ページ内リンク作成の2ステップ」へジャンプしてくださいね！

≫ページ内リンク作成の2ステップへ移動する

こんな感じのリンクです。

通常別の記事へのリンクや、他サイトへのリンクは「URL」をリンクボタンから貼り付ければOKですよね？

でもページ内リンクの場合はURLがないしどうするんだろう？

と悩んでいる人も多いと思います。

ふくち

そこで本日はCocoon利用歴1年半以上のわたしが、画像付きで誰でもわかるよう解説します！

ページ内リンク作成の2ステップ

ページ内リンクを作成するまではたったの2ステップ！

リンク先とリンク元が分かりづらいかもしれないので、先ほどの画像で整理しておきます。

ふくち

移動先＝リンク先と覚えると分かりやすいですね

実はここまでにページ内リンクを貼っていた箇所が1つありました。

冒頭のこの部分です▼

上記は画像のためリンクは押せないので、気になる方はこちらから実際の場所に戻ってみてください。

ふくち

上記のリンクを例にとって手順に沿って説明していきます！

最後に動画もあるので、動画の方が分かりやすい方はそちらでチェックしてください！

ステップ１：リンク先のブロックに「HTMLアンカー」を設定する

まずはリンク先に「リンクのためだけに使用するURL」のようなものを設定してあげます。

あまり難しく考えなくてOK。リンク先を指示するための目印のようなものです。

ふくち

リンク先はh2やh3などの見出しでも良いですし、文章、画像などなんでもOKです。

今回はh2見出しを例にして説明しますが、他のタイプのブロックでも方法は全く同じです！

以下の手順で進めましょう。

リンク先の該当のブロックをクリックする

まずはリンク先のブロックをクリックします。

高度な設定をクリックする

右側のメニューを下方にスクロールするとある、「高度な設定」をクリックします。

HTMLアンカーに好きな文字列を入れる

HTMLアンカーの枠の中に半角英数字で好きな文字列を入力し、コピーしておきます。（覚えておくでもOK）

ふくち

なんでも構いませんが、後々でも分かりやすいものが良いですね♪

ここでは「2step」と入力しました。

ステップ2: リンク元のブロックに「#＋設定した文字列」でリンクを貼り付ける

次に、リンク元（クリックする用のリンク）に先ほどの文字列を貼り付ければ完了です！

ふくち

ページ内リンクの完成までもうすぐです〜♪

リンク先の文字列またはブロックを選択

リンク先の文字列を選択し、上部に表示されるメニューから②のリンクマークをクリックします。

#＋キーワードを貼り付けて完成

枠内に#と先ほどリンク先に設定した文字列を貼り付けます。

ふくち

#は同じページ内ということを示す記号です。つけ忘れるとうまくリンクが貼れないので必ず頭に「#」をつけましょう！

Enterまたは下の地球儀（🌐）マークの部分をクリックします。

ふくち

ページ内リンクなので「新しいタブで開く」のチェックは基本的に不要です。

これで完成しました！おつかれさまです^^

実際にプレビュー画面でクリックしてうまくできているかチェックしてみてくださいね♪

ページ内リンクの作成方法を動画でチェックする

一連の流れを動画でチェックしてみましょう！

※動画上にカーソルを置いておくとバーが邪魔になるので、カーソルは動画の枠外に置いておいてください。

ふくち

心配な方は覚えるまではブックマークして見返してくださいね♪

まとめ：アンカーリンクを使用してページ内リンクを作成する方法

本日はWordpressテーマCocoonでの「ページ内リンク」の作成方法をお話ししました！

ふくち

ページ内リンクの作成はたったの2ステップ

うまく使えば読者の利便性も向上し、ブログへの滞在時間がアップします！

活用してみてください♪

【Cocoon】ボックスメニューの画像を使用したカスタマイズ方法

CSS不要！Cocoonのボックスメニューを画像を使ってカスタマイズする方法を画像付きで解説。必要な画像サイズ・画像が表示されない原因・ヘッダー下やサイドバーへの設置方法も。

www.fukuchinofukugyou.com

2023.08.12

Cocoonのフォント変更方法！おすすめのフォントも解説

Wordpressテーマcocoonでフォント（字体）を変更する方法。標準で使えるフォントの紹介と、ブログのジャンルや雰囲気別のおすすめフォントの紹介も。

www.fukuchinofukugyou.com

2023.08.14

こまるちゃん

アドセンス広告を表示したくないページにまでデカデカと自動広告が出ちゃって困る💦Wordpressで設定しても消えないよー！！！

トップページやアフィリエイトメインのページなど、アドセンス広告を表示したくないページってありますよね。

広告を消すために記事の設定やCocoonの広告設定をいじってみても一部の広告が残ってしまい、途方に暮れているあなた。

実はWordpressの設定では消せない広告があります。

特定のページで全ての広告を表示しないようにするには、Google Adsenseで設定する必要があるのです。

本日はその設定方法を画像付きで解説します！

ふくち

3分程度で設定できますよ！早速みていきましょう。

特定のページだけアドセンス広告を非表示にする４ステップ

ふくち

特定のページだけ広告を除外する方法はとっても簡単！

以下の４ステップで完結します。

各ステップを画像付きで解説します！

Google Adsense(グーグルアドセンス)にログインする

まずはGoogle Adsenseにログインします。

ログインページ画面右上の「ログイン」をクリックしログインを行いましょう。

》Google Adsenseにログインする

サマリー画面を表示する

画面左上のメニューをクリック（タップ）▶︎「広告」をクリック（タップ）する

下記のようなサマリー画面が表示されます。

自動広告の除外ページを登録する

サマリーページ右下のペンのマークをクリック（タップ）する

広告設定のプレビュー画面（読み込みまで時間がかかる場合があります）を下までスクロールすると右側に「除外ページ」という項目が出てくるので「管理」をクリック（タップ）

「除外設定を追加」をクリック（タップ）

広告を表示したくないページのURLを入力▶︎「追加」をクリック（タップ）

サイトに広告除外設定を適用する

最後に広告設定のプレビュー画面まで戻り、右下の「サイトに適用」を押します。

ふくち

設定はこれだけ！とっても簡単でしたね♪

＼12/20(火)16時まで最大53%オフ！　ドメイン2つ無料の人気レンタルサーバー／

まとめ：特定ページからAdsenseの自動広告を除外する方法

本日は特定のページのみ、Adsenseの自動広告を表示しない方法をお話ししました。

ポイントは、Google Adsenseの設定から除外ページを登録するということです。

3分程度でできますよ♪

広告の表示を調整することで離脱率が下がったり、本当におすすめしたいアフィリエイトリンクをクリックしてもらえる可能性が高まります！

うまく活用していきましょう♪

＼プログラミングの副業でどれくらい稼げる？最短コースは？／

準備がととのっていなくてすみません。 | まるっとふくち

好きと生きる。好きに生きる。

www.fukuchinofukugyou.com