2年目に入ったこんなんどうでしょうなんだけど、最近はありがたいことに少しづつ見てもらえる機会も増えてきて、収益も上げさせてもらってる。
そういえば去年の今頃（サイトを立ち上げて3ヶ月目くらい）は、2、3年先にブログを始めた先輩のサイトや記事の書き方を片っ端から見て勉強してた。
そして最近は、逆にこんなんどうでしょうを参考にしてくれてる人も出てきた。ありがたい限り。
なので改めて、こんなんどうでしょう流のブログサイトの作り方を紹介していこうと思う。
記事の書き方に関しては以前にあげてるから、そちらを参考にしてほしい。
-
【どうでしょう流】ブログの書き方｜記事にストーリー性を持たせる
このブログサイト「こんなんどうでしょう」を立ち上げてもうすぐ8ヶ月が経とうとしている。 現在も2日に一回のペースで更新してて、ありがたい事にPV数も少しずつ増えてきた。 収益に関しても波はあるが毎月発 ...
続きを見る
X(旧Twitter)もやってます。
【自己紹介・お問い合わせ】はこちら。
サイト構築で使ってるもの
こんなんどうでしょうのサイト構築で使用しているテーマやプラグインは下記。
レンタルサーバー
conohaWING
使っているレンタルサーバーはconohaWING。
過去にX Serverも使ってみたことがあるんだけど、管理画面とか操作がややこしくてconohaWINGにしたって感じ。
正直レンタルサーバーはどこも一緒だと思うし、この記事を読んでる人はすでにどこかしらのレンタルサーバーを契約してるはずだから、この辺はまあどうでも良いっちゃ良い。
ちなみに以前にこんなんどうでしょうはドメインを変更してるんだけど、その際ワードプレスの管理画面に入れなくなるというトラブルが起きた。
その際にconohaWINGの管理画面からアクセスすることによって解決できたんだけど、conohaWINGの管理画面が見やすくて助かったという話は下記。
-
【WordPressのドメイン変更】ブログ初心者でも失敗しない方法
以前にこのブログサイトのドメイン名を変更したって話をしたけど、今日はそのドメイン変更を具体的どうやったのか、何に気をつけないといけないか、どこがめんどくさかったかなどを話していこうと思う。 先に結論か ...
続きを見る
テーマ
AFFINGER 6 EX
こんなんどうでしょうで使ってるテーマは、有料テーマのAFFINGER 6。
ブログ初心者が4ヶ月で初収益を達成できたのは間違いなくAFFINGER 6のおかげだし、ブログで稼ぎたいならやっぱり有料テーマは導入した方が良いと個人的には思う。
中でもSEO、アフィリエイトに強いAFFINGER 6がおすすめ。
関連記事はこちら
-
【ワードプレス】稼ぐなら結局有料テーマがおすすめ｜初収益までが早い
ありがたいことに最近は、こんなんどうでしょうを参考にしてくれてる人もいるみたいで、 ・使ってるテーマはなんですか？・記事一覧はどうすればカード化できますか？・サイトトップのメニューバーはどうやって配置 ...
続きを見る
こんなんどうでしょうは上位版のAFFINGER 6 EXを使っているんだけど、これに関しては導入しなくてもOK。
撮影機材
ブログって文字が大事なのは言わずもがなではあるんだけど、それと同じくらい大事なのが写真なんだ。
100文字の説明よりも1枚の写真の方が伝わるし、写真が見やすく分かりやすいと読者はストレスなく記事を読めるから、文字と同じくらい写真にも気を使いたい。
特に構図、サイズや向きの統一、影が入らないようにするといった基本は徹底したい。
SONY α7IV
こんなんどうでしょうの記事に使ってる写真のほとんどはSONY α7IVで撮影している。
スマホカメラの進化は凄まじいが、それでもまだ一眼の出来にはほど遠く、やはり一眼で撮った写真の方が見やすいと感じる。
撮影ボックス
ガジェットや小物のレビュー記事を書くときは撮影ボックスを使うことが多い。これも写真を見やすくするのが目的で、紹介したいものの周りにノイズが有ると無いでは見やすさが変わってくる。
あと、ブログ以外のたとえばメルカリの商品撮影にも使えるから、できれば持っておきたい。価格もそこまで高くない。
レビュー記事はこちら
-
【ブログ用写真】物撮りは撮影ボックスがおすすめ｜メルカリにも使える
ブログっていかにして文字で伝えるかなんだけど、読む側としてはズラーっと文字が並んでると読むのが疲れるんだ。 だから俺は見出し毎に写真を入れることで、少しでも読みやすい記事になるよう意識している。 でも ...
続きを見る
プラグイン
使用しているプラグインは下記。
今回はサイトの見た目に関するプラグインのみの紹介なので、バックアップやお問い合わせフォームなんかは選出外とする。
Advanced Ads
Googleアドセンス広告の設置を任意の位置に挿入するためのプラグイン。
この記事も1番目の見出し、3番目の見出し、8番目の見出しの上にGoogleアドセンス広告が表示されているし、一番下のフッター部分にも表示されている。
広告をどの位置に、いくつ挿入するかを簡単に管理、設定できるんだ。
Googleアドセンスに関する記事はこちら
-
ブログ開始12ヶ月目でGoogleアドセンス合格｜原因はアクセス数だった話
つい先日、Googleアドセンスに合格した。立ち上げたのが今年（2025年）の1月1日で立ち上げと同時にアドセンス申請を出してたんだけど当然ながら不合格。 そこから定期的に申請は出してたんだけど、こと ...
続きを見る
Autoptimize
CSSや画像なんかを最適化して、サイト表示を高速化させるプラグイン。
アフィリンクを横並べにしたり、
画面下に表示されているシークバーに画像をつけたりと、なんやかんやでCSSは使ってるんだけど、ただ追加するだけだとサイトや記事の表示スピードがだんだん落ちてしまう。
それを防ぐためにこのプラグインを導入している。
サイト表示のスピードはGoogleからの評価にも直結するし、アドセンス広告の審査にも影響してくるから、このプラグインは入れておいて損はない。
Broken Link Checker
記事中に貼ってあるリンクに有効期限切れのものがないかを調べてくれるプラグイン。
このプラグインの優秀なところは、ダウンロードしたらあとは勝手にプラグインが有効期限を監視してくれるところ。
リンク切れのURLがあればメールで教えてくれるから、その記事を修正するだけ。
サイト内にリンク切れのURLが多いとGoogleからの評価も下がってしまうから、このプラグインも入れておいた方が良い。
Easy Table of Contents
記事内の固定目次を追加できるプラグイン。設定は下記。
一般タブ
・サポートを有効化：投稿 固定ページ
・自動挿入：なし
・位置：下部
・表示条件：2
・Word Count Limit：0
・見出しラベルを表示：目次の上に見出しテキストを表示します。にチェック
・Toggle on Header Text：なし
・見出しラベル：目次
・Header Label Tag：p（default）
・Box Title：空白
・折りたたみ表示：目次表示の折りたたみを許可します。にチェック
・初期状態：初期状態で目次を非表示にします。にチェック
・Initial View on Device：Mobile、Desktop両方にチェック
・ツリー表示：チェック
・カウンター：小数点表示（デフォルト）
・Counter Position：Inside
・TOC Loading Method：JavaScript（default）
・スクロールを滑らかにする：チェック
・Exclude href from url：なし
・TOC AMP Page Support：なし
外観
・幅：ユーザー定義
・カスタム幅：0
・Alignment：なし（デフォルト）
・Heading Text Direction：Left to Right（LTR）
・Enable Wrapping：なし
・TOC Columns：1 Column（Default）
・Headings Padding：なし
Font Option
・タイトル文字サイズ：120%
・タイトル文字の太さ：Medium
・文字サイズ：95%
・文字の太さ：Medium
・Child Font Size：90%
Theme options
テーマ：白
カスタムテーマ
・全てデフォルト
高度
・小文字：なし
・ハイフネーション：なし
・ホームページ：なし
・カテゴリー：なし
・タグ：なし
・Product Category：なし
・Custom Taxonomy：なし
・Device Target：Desktop
・Load Js In：Footer（default）
・CSS：なし
・Inline CSS：なし
・見出し：見出し2（h2）だけチェック
・除外する見出し：空白
・サイトナビゲーションスキーマ：なし
・スムーズクロールのオフセット：30px
・モバイルのスムーズクロールのオフセット：0px
・パス制限：空白
・Exclude By Matching Url/String：空白
・デフォルトのアンカー接頭辞：i
以降は全てチェックなし、空白。
Shortcode
全て空白。
Sticky TOC
・Sticky TOC：チェック
・サポートを有効化：投稿 固定ページ
・ホームページ：なし
・カテゴリー：チェック
・タグ：なし
・Product Category：チェック
・Custom Taxonomy：なし
・Device Target：Select
・位置：Right
・Alignment：Bottom
・TOC open on load：チェック
・幅：Auto
・Height：Auto
・Open Button Text：目次
・Click TOC Close on Mobile：なし
・Click TOC Close on desktop：なし
・Exclude By Matching Url/String：空白
互換性
全てなし。
Import/Export Settings
設定なし。
次に下記のCSSを追加する。
追加CSSはこちらをクリック
/* 目次ボタンを画面右下に固定表示 */
.fixed-toc {
position: fixed;
bottom: 20px;
right: 20px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
z-index: 9999;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 必要に応じて目次のスタイルを調整 */
.fixed-toc a {
text-decoration: none;
color: #333;
font-weight: bold;
}
/* 固定目次ボタンの位置とサイズの調整 */
.ez-toc-open-icon {
top:auto;
bottom: 50px;
background-color: #040404a6;
color: #fff;
box-shadow:none;
padding: 3px 10px 10px;
}
.ez-toc-open-icon span.text {
transform: rotate(0deg);
}
/* 目次表示時の高さと表示スピードの調整 */
.ez-toc-sticky-fixed.show {
top: auto;
bottom: 20px;
}
.ez-toc-sticky-fixed.show {
-moz-transition: right .1s linear;
-o-transition: right .1s linear;
transition: right .1s linear;
right: 0;
}
.ez-toc-sticky-fixed.hide {
-webkit-transition: opacity .3s linear, right .3s cubic-bezier(.4, 0, 1, 1);
-ms-transition: opacity .3s linear, right .3s cubic-bezier(.4, 0, 1, 1);
-o-transition: opacity .3s linear, right .3s cubic-bezier(.4, 0, 1, 1);
transition: opacity .1s linear, right .1s cubic-bezier(.4, 0, 1, 1);
right: -100%;
top: auto;
bottom: 20px;
}
/* 目次表示時の配置と文字サイズと下線の調整 */
.ez-toc-sticky-fixed .ez-toc-sidebar .ez-toc-sticky-title-container {
border-bottom-color: #EEEEEE;
background-color: #ffffff00;
border-bottom: 0px solid #e5e5e5;
}
.ez-toc-sticky-fixed .ez-toc-sidebar #ez-toc-sticky-container {
margin-top: 25px;
}
.ez-toc-sticky-fixed .ez-toc-sidebar .ez-toc-sticky-title-container {
padding: 0px;
height: 0px;
top: 0;
}
.ez-toc-sticky-fixed .ez-toc-sidebar #ez-toc-sticky-container {
font-size: 14px;
min-width: 100%;
}
ez-toc-sticky-container a {
color: rgba(255, 255, 255, 1);
}
.ez-toc-sticky-fixed .ez-toc-sidebar {
padding: 0px 10px;
background-color: #040404d1;
border-radius: 10px 0 0 10px;
height: auto;
}
ez-toc-sticky-container li, #ez-toc-sticky-container ul, #ez-toc-sticky-container ul li, div.ez-toc-sticky-widget-container, div.ez-toc-sticky-widget-container li {
line-height: 2;
border-bottom: dotted 1px #ccc;
}
/* タップした目次を灰色表示しない */
ez-toc-sticky-container a:visited {
color: rgba(255, 255, 255, 1);
}
/* ×ボタンを白色表示 */
.ez-toc-sticky-fixed .ez-toc-close-icon {
color: rgba(255, 255, 255, 1);
}
bottom: 30px;
}
}
.grecaptcha-badge { visibility: hidden; }
これで右下に目次アイコンが表示されるはず。
EWWW Image Optimizer
記事内に挿入した画像のサイズを小さくしてくれるプラグイン。
画像サイズが大きすぎると読み込みに時間がかかり、読者に離脱されてしまう。それを防ぐためにもこのプラグインは必須。
Table of Contents Plus
目次用プラグイン。目次が長くなりすぎないようh2のみ表示するようにしている。（h3、h4は非表示）
また、見出しテキスト部分に「目次（クリックでシャンプ）」と表示することで、読者が読みたい部分に飛べるよう誘導している。
WebSub (FKA. PubSubHubbub)
ブログ記事の更新を自動でGoogleに伝えるプラグイン。記事のリライト時もGoogleに自動で伝えてくれるし、常に最新の情報を載せておくことはSEO的にも大事。
WP Reading Progress
YouTubeの再生バーのように、記事の現在地を表示させるために導入。
このプラグインが優秀なのは、ページ全体ではなく記事範囲のみに適用される点。記事を最後まで読み終われば100%を表示してくれるから、読者も「この記事はどこからどこまでなん？」ということがなくなる。
設定は下記。
・Stick the bar to this element：bottom
・How to stick：なし
・Color of the progress bar：#da1725
・Progress bar thickness：.7vh
・Aria label：空白
・Make bar start at 0%：チェック
・On single post page：なし
・Show reading progress on：post、pageにチェック
・And on their archives：なし
・No css：なし
・Activate ert：なし
下記の追加CSSで、シークバーの先に画像も入れられる。（画像は下記CSSのURL部分を任意の画像URLに書き換えればOK。）
追加CSSはこちらをクリック
/* プログレスバーの改造 */
ruigehond006_wrap{
Max-width:98%;
}
ruigehond006_bar {
position: relative;
overflow: visible;
Max-width:98%;
}
ruigehond006_bar::after {
content: "";
position: absolute;
top: 50%;
right: -14px;
transform: translate(50%, -50%); /* 中央揃え / width: 80px; / アイコンの幅 / height: 110px; / アイコンの高さ / background-image: url('https://doudesho.com/wp-content/uploads/2025/05/IMG_1005-e1747734876249.png'); / アイコン画像のURL / background-size: contain; / アイコンを枠に合わせる / background-repeat: no-repeat; z-index: 10; / アイコンが他の要素より前に表示されるように */
}
/* シークバーのスマホ表示の横幅調整 */
@media only screen and (max-width: 20%){
ruigehond006_wrap{
Max-width: 50%;
}
ruigehond006_bar::after {
width: 10px; /* アイコンの幅 / height: 10px; / アイコンの高さ */
}
}
WP Super Cache
ワードプレス内に溜まったキャッシュを削除してくれるプラグイン。効果があるかどうかはわからないが、高速化してくれるならって感じで入れている。
文字サイズ・行間の設定
ネタや画像以外にも大事なのがフォントの種類、文字のサイズ、行間だったりする。
この辺はサイトの雰囲気や読者の年代によっても変わってくる部分だから、色々試すのがおすすめ。
特にスマホでの見え方の設定はめちゃくちゃ大事だから、時間をかけてでも見やすいサイズ、行間に設定したい。
こんなんどうでしょうの文字の設定は下記。
スマホ
・基本（Pタグ 他）：サイズ 15px / 行間 25px
・記事タイトル：サイズ 23px / 行間 35px
・H2タグ：サイズ 21px / 行間 27px
・H3タグ：サイズ 17px / 行間 27px
・H4タグ：サイズ 15px / 行間 27px
・記事一覧：サイズ 17px / 行間 24px
タブレット
・基本（Pタグ 他）：サイズ 16px / 行間 30px
・記事タイトル：サイズ 27px / 行間 40px
・H2タグ：サイズ 24px / 行間 32px
・H3タグ：サイズ 22px / 行間 30px
・H4タグ：サイズ 21px / 行間 26px
・記事一覧：サイズ 20px / 行間 26px
PC
・基本（Pタグ 他）：サイズ 14px / 行間 27px
・記事タイトル：サイズ 27px / 行間 40px
・H2タグ：サイズ 22px / 行間 32px
・H3タグ：サイズ 19px / 行間 30px
・H4タグ：サイズ 15px / 行間 26px
・記事一覧：サイズ 16px / 行間 26px
画像は多すぎるくらいがちょうど良い
テクニックってほどでもないけど、画像は多すぎるくらいがちょうど良い。
最低スマホ画面には必ず画像が表示されるように。記事をスマホで見返して文字だけの部分がないか確認。
こんなんどうでしょうではh2見出しの下には原則画像を挿入するようにしている。
会話吹き出しは最低限に
逆に会話吹き出しは冒頭の定型文以外は使わない。
知らないキャラや人の会話ほど見ててつまらないものはない。それよりも画像を入れた方が読者には刺さる。
自分以外師匠
人のブログはよくも悪くも写し鏡なわけで、良かれと思って追加したものが実は蛇足だったり、逆に少し手間をかけるだけで見やすさがガラッと変わるのに勿体なかったり。
タイパ重視な世の中で敢えて文字で勝負しないといけないブログだからこそ、その文字を引き立てるためには画像や見出しなどを工夫しないといけないし、不要なものは消さないといけない。
「今書いている文章は次の文章を読ませるためにある」とはまさにその通りなわけで、いかにわかりやすく読者に伝えるかが大事。
結局はブログ初心者の頃に誰しもが心がける「読者の悩みを解決する」「ベネフィットを想像させる」に尽きる。
そういった意味ではブログもまた自分以外師匠と感じる。
この記事どうでしょう
-
ブログ開始12ヶ月目でGoogleアドセンス合格｜原因はアクセス数だった話
つい先日、Googleアドセンスに合格した。立ち上げたのが今年（2025年）の1月1日で立ち上げと同時にアドセンス申請を出してたんだけど当然ながら不合格。 そこから定期的に申請は出してたんだけど、こと ...
続きを見る
-
【どうでしょう流】ブログの書き方｜記事にストーリー性を持たせる
このブログサイト「こんなんどうでしょう」を立ち上げてもうすぐ8ヶ月が経とうとしている。 現在も2日に一回のペースで更新してて、ありがたい事にPV数も少しずつ増えてきた。 収益に関しても波はあるが毎月発 ...
続きを見る
こっちはどうでしょう
