栄光のエクソダス 二児のパパになった三十路クライマーのブログ

紆余曲折を経て二児のパパになった三十路クライマーの育児ブログ

100記事達成!当初から今までのブログ改善のコツを一挙公開します。半年間での収益とPV数も公開。

f:id:Breakoutdoor:20190117094923p:plain

取り合えずお疲れ様です。

当初は毎日更新を目標としてブログを開始しましたが、

蓋を開けてみれば半年で100記事。

平均すると2日に一回のペースです。

ブログは全くの素人、文章もあまり得意ではない。

当初掲げた目標
  • 1記事1,000文字以上
  • 毎日更新
  • 1年後収益月10万円

振り返ってみると多分にアホでした。汗

上記目標の中で唯一達成できたのは

1記事1000文字以上のみ

毎日更新は今も心掛けていますがとても難しいです。

内容の濃い記事を目指すとどうしても更新できない日が出てきます。

 

半年間の収益

収益ですが、半年たった今まだ累計で1,500円弱。

あと半年で月10万円は不可能に近いでしょう。。苦笑

しかし、初めの4か月は収益が完全のゼロ。

何べんも心を打ち砕かれましたが、続けて良かった!

収益性の改善は今後の課題ですね。

f:id:Breakoutdoor:20190117094717j:plain
f:id:Breakoutdoor:20190117094715j:plain

半年後のアクセス数

アクセス数は地道に少しづつ上がっている感じです。

私はあまりはてなブログ内での営業活動が得意ではないため、読者数は現時点で20名ほど。(登録下さって素直に入しいです。ありがとうございます。)

90%がGoogle検索とYahoo検索というはてなブロガーとしては類稀なタイプです。

1000文字は意外と簡単

現在は2000文字以上をキープしています。

1000文字では文字数が少ないと感じたからです。

内容も薄く中途半端な記事になりがちです。

ちなみにこの記事は5000文字強です。

書き続ければうまくなっていく

100記事書くとブログ・文章素人の私でもコツをつかめてきます。

書くスピードもアップし文章の構成や校正にも自然と気を遣うようになります。

初期の記事を改めて読んでみましたが非常に読み辛い。

ああ、一生懸命調べて書いたんだな

と思わせる内容ですが非常に読み辛い。

ちなみに最初の記事はこちら

www.takeabreakoutdoor.com

読み辛さを改善する為に心掛けたこと
  • 改稿の頻度を上げる
  • DIV+CSSで区切る
  • 文字の大きさを16ptへ
  • 吹き出しの導入
  • いらすとやでアイキャッチ画像

まだまだ改善の余地はありますが、毎日更新しながらではブログデザインまで手が届きません。とりあえずは最低限のデザインは取り入れたつもりです。

改稿の頻度を上げる

これはすぐにでも実践できるのではないでしょうか?

ブログはスマホで読まれていると認識しましょう。

小さな画面で読んでいて、文字の塊が出てきたら途中で読むのが嫌になるか読み飛ばしますよね?

論文じゃないのだから、厚いブロックの様な段落は避けましょう。

私は現在では一文でも長ければ途中で改稿するようにしています。

DIV+CSSで区切る

DIV属性+CSSでボックスを作ると文章に区切りがついて見やすくなります。

ここにタイトルを書く

通常の文章も書ける

  • 箇条書きもかける
  • 色も変えられる

やり方はそこまで難しくありません。

HTML編集のでDIV属性を挿入します。

下記は上記のボックスのHTML

<div class="box1">
<span class="box-title">ここにタイトルを書く</span>
<p>通常の文章も書ける</p>
<ul>
<li>箇条書きもかける</li>
<li><span style="color: #1464b3;"><strong>色も変えられる</strong></span></li>
</ul>
</div>

気を付けないといけないのはCSSも繁栄させないとボックスとして表示されません。

上記ボックスのCSSコード

.box1 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #95ccff; border-radius: 8px; } .box26 .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #95ccff; font-weight: bold; } .box26 p { margin: 0; padding: 0; }

CSSコードの貼り付け先

はてなブログの管理画面

→デザイン

→カスタマイズ

→デザインCSS

他にもオシャレなデザインがたくさんあります。↓

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

文字の大きさを変更する 

はてなブログの文字の大きさは初期設定で14ptです。

14ptが大きいのか小さいのか分かりにくいですが、非常に小さいです。

老眼の読者はまず読め無いレベルです。

いちいち編集画面で文字の大きさを調節するのも面倒なので

CSSに反映させて自動変更しちゃいましょう。

<style type="text/css">

.entry-content {

font-size:16px;

}

</style>

はてなブログで文字を大きくする方法【ブログ初心者向け】 - おちこぼれビジネスマンの初心者ブログ

CSSコードの貼り付け先

ははてなブログの管理画面

→デザイン

→カスタマイズ

→ヘッダ

→タイトル下

吹き出しの導入

吹き出しを使うとこのように会話形式の構成ができるよ!

文章内の会話は「カギカッコ」でくくるよりも吹き出しの方が読みやすいのね!

 

DIVコードは短いですが、CSSがだいぶ長くなります。

<div class="person-left"><img />
<p>吹き出しを使うとこのように会話形式の構成ができるよ!</p>
</div>
<div class="person-right"><img />
<p>文章内の会話は「カギカッコ」でくくるよりも吹き出しの方が読みやすいのね!</p>
</div>

CSS

.entry-content .person-right,

.entry-content .person-left{

    padding-top: 15px;

    padding-bottom: 15px;

    min-height: 100px;

}

.entry-content .person-right img,

.entry-content .person-left img{

    background-color: #333;

    border: 1px solid #555;

    border-radius: 2.5em;

    width: 75px;

    height: 75px;

    margin-top: 2px;

    background-size: cover;

}

.entry-content .person-right img{

    background-image: url("画像のURL");

    float: right;

}

.entry-content .person-left img{

    background-image: url("画像のURL");

    float: left;

}

.entry-content .person-right p,

.entry-content .person-left p{

    padding: 10px;

    position: relative;

    border: 1px solid #555;

    border-radius: 10px;

    box-sizing: border-box;

    width: calc(100% - 100px);

    margin-top: 16px;

}

.entry-content .person-left p{

    float: right;

}

.person-right p:before,

.person-right p:after,

.person-left p:before,

.person-left p:after{

    top: 13px;

}

.person-right p:before {

    content: '';

    border: 10px solid transparent;

    border-left: 15px solid black;

    position: absolute;

    left: 100%;

}

.person-right p:after {

    content: '';

    border: 10px solid transparent;

    border-left: 15px solid white;

    position: absolute;

    left: calc(100% - 1px);

}

.person-left p:before {

    content: '';

    border: 10px solid transparent;

    border-right: 15px solid black;

    position: absolute;

    right: 100%;

}

.person-left p:after {

    content: '';

    border: 10px solid transparent;

    border-right: 15px solid white;

    position: absolute;

    right: calc(100% - 1px);

【はてなブログ】1行で書ける会話形式の吹き出し(簡易版)を作ってみた!使い分けもOK! - クリアメモリ

注意点としてCSS内の画像のURLという部分を貼りたいイメージ画像のURLに置き換える事です。
はてなブログ編集画面で写真の挿入をする欄があります。
そこに吹き出し用のイメージ画像を取り込んだ後、
右クリックするとURLのコピーができるのでCSSにてお着替えましょう。
 
CSSコードの貼り付け先

はてなブログの管理画面

→デザイン

→カスタマイズ

→デザインCSS

 いらすとやでアイキャッチ画像

写真や画像を乗せると一気に読みやすく、そして分かりやすくなります。

しかし毎度毎度写真を撮って加工して貼り付ける。。

社畜の私にそんな時間は作れません。

そんな時重宝するのがフリー素材やのイラスト画像。

適当にGoogle検索して拾ってきた写真を勝手に張るのは著作権法に反します。

最悪バンか賠償請求されることになるので絶対にやめましょう。

下記のいらすとやのようなサイトが多数存在し、こちらの画像は著作権法を侵害しない為、安心して使用できます。

かわいいフリー素材集 いらすとや

f:id:Breakoutdoor:20190104222800p:plain
f:id:Breakoutdoor:20181215224641p:plain

こんな感じの画像です。

かなり多種多様な素材を扱っている為、ほしいイメージのイラストがすぐ見つかりとても重宝しています。

いらすとや様、いつも大変お世話になっています。今後もよろしくお願いいたします。

今後の課題と方向性

当初のと比べるとコンセプトもタイトルも大分方向修正され、いつも間にか雑記ブログと化しています。

本当はアウトドア関連の特記型ブログを目指していたのですが、

いかんせん毎日更新するとネタが無くなってきます。

今後の課題は雑記型でも良いが、もう少し方向性をまとめたいというところです。

現在は、アウトドア、ボルダリング、ランニング、育児、故障、転職とお世辞にもまとまりのない状態です。

個人的にはいろいろ理屈をつけてまとまりがあると思い込んでいましたが、

一歩引いてみると明白です。

このままだと人生の墓場ブログになりかねないので、

もっと未来のある方向性を見出して導いていければと思っています。

(ちなみにこんな感じの記事です)
www.takeabreakoutdoor.com

www.takeabreakoutdoor.com

www.takeabreakoutdoor.com