【初めてでも大丈夫！】"読者登録ボタン"をつけてみた【ブログ開設３か月・月間アクセス３０００pv達成記念】【ブログ初心者】

はじめに、御礼

 

本ブログ「寝ても、覚めてもブログ」は2021年8月23日のリリースから、お陰さまで約３ヶ月を迎えることができました

 

これもすべていつも支えてくれる皆さま方のお陰である。本当にありがとうございます。

 

「好き勝手書くこと」がテーマのブログなので、求めていない記事も多々あることかと思いますが、これからもできる限り価値あるテーマを発信していきたい気持ちは変わらないので、末長くお付き合いいただけると幸いです

 

では、今回は下書きに１か月以上温めていたネタを発信したいと思います

 

ずっとやりたいと思っていたので、ようやく日の目を見られて私も嬉しいです

 

スポンサードリンク

読者登録ボタンをつけてみた

さて、今回はタイトルのとおりで、「読者登録ボタンをつけてみた」という話です

 

とあるブログを拝見したときに（お恥ずかしながらその方のブログ名を失念してしまった）、記事の下に「読者登録ボタン」なるものが設置されていました

 

「カッコいい…」

 

これが私の第一印象です

 

このブログは、読者登録を増やすぞ！というよりも、私が好き勝手書くという場になるので、読者登録は好きにしてくださいというのがコンセプトです

 

気になったら読者登録して、飽きたら解除してね、と

 

しかし、こんなブログにもお付き合いいただける心優しい方々が存在しています

本当にいつもありがとうございます

 

そして、こんなブログですが日夜成長しようと励んでいるので、こんなブログを応援してくれる人のために「読者登録ボタン」があったら、よりブログがパワーアップするのでは？と考え、設置を決意しました

 

また、おかげさまで、ブログ開設３か月・月間アクセス３０００pvを突破したこのブログちゃんへのプレゼント企画としても、やりたいと思います

 

純粋に「読者を増やしたい！」「アクセス数を伸ばしたい！」と考えている方、まだ読者登録ボタンを設置していないなら、もったいないですよ〜！

 

スポンサードリンク

参考にさせていただいたブログ

こちらの記事を参考にさせていただき、無事に設置することができました！

ありがとうございます★

www.noname-note.com

ちなみに、はてなブログでよく見るボタンは、詳細設定からコピへするだけで、簡単にできました！

こちらです＾＾

おおー、悪くないですね、面白い

コピペするだけで、たくさん貼ることができますよ！笑

量産も可能！笑

スポンサードリンク

ソースコードでも貼れるやり方で

ソースコード？なんだか難しそう？

いいえ！まったくそんなことは、ありません！

私も初めてでしたが、無事につけることができましたので、気になっている方は、一緒にやってみましょう！

コード挿入のやり方

1. 挿入するソースコードを作る
2. 作ったコードを「はてなブログ」の「記事下」や「記事上」に貼る
3. CSSコードを作る
4. 「はてなブログ」の「デザインCSS」にCSSコピーを貼る
5. 完成！

それでは、詳しく見ていきましょう

スポンサードリンク

１．挿入するソースコードを作る

<div class="subscribe-button">

<a href="https://blog.hatena.ne.jp/あなたのID/ブログのURL/subscribe">読者になる</a>

</div>

ご紹介した記事にも同じコードが掲載されていますので、ご参考まで

これに自分のIDとブログのURLを入れて、はてなブログの「デザイン設定」から記事設定するだけで、自動的に出てくるようになります

自分のID

自分のブログのIDは、プロフィールのこうした画面から確認することができます

名前の名前の脇にある（）の中の物ですね

私の場合は、「omuzig」がIDになります

ブログのURL

ブログのURLはこちらの「読者登録」画面からチェックしましょう

独自ドメインを設定されている場合でも、こちらのページに飛ばないといけないので、必ず独自ドメインが読者登録画面のURLとはならないようなので、気を付けましょう！

（ちなみに、私のブログURL(独自ドメイン)≠読者登録画面URLでした）

赤で囲んだURLが読者登録のURLです

ちなみに私のブログドメインは「www.udablog.com」で、読者登録URLが「sasukura.hatenablog.com」なので、全く違うことが分かりますね

うまくリンクが貼れない場合は、一度URLを確認してみましょう

２．作ったコードを「はてなブログ」の「記事下」や「記事上」に貼る

作ったコードを実際に貼っていきましょう

「はてなブログ」の「デザイン」→「カスタマイズ（スパナマーク）」から該当の箇所にいきます

今回は「記事下」に貼ることにしましたので、「記事下」に先ほど作ったコードを貼ります

３．CSSコードを作る

ご紹介したサイトにもありますが、CSS（デザイン）を作っていきます

もしも、CSSコードを設定していない場合は、

読者になる

こんな文字だけの表記になります

こちらをコピーします

.subscribe-button {

margin: 1em 0;

}

.subscribe-button a {

display: inline-block;

margin: 0 auto;

width: 100%;

max-width: 300px;

line-height: 38px;

text-decoration: none;

text-align: center;

color: #fff;

background-color: #eb4c5e; /* ここでボタンの色 */

box-shadow: 0 4px #da253a; /* ここでボタンの影の部分の色 */

border-radius: 4px;

transition: all .3s;

}

.subscribe-button a:hover {

transform: translateY(4px);

box-shadow: 0 0 #999;

}

ボタンの色は、ご紹介のこちらのページを参考にさせていただきました

www.color-sample.com

色のコードは、好きな色を選んでいただいて、HEXの枠の「AdobeRGB」コードをコピーして貼ります

作ったコードを先程の「デザイン」→「カスタマイズ（スパナマーク）」→「デザインCSS」に先程のCSSコードを貼ります

コードを貼り終えたら、「変更を保存する」ボタンを押してOK！

あとは、正しく反映されているか、見てみましょう！

＜おさらい＞コード挿入のやり方

1. 挿入するソースコードを作る
2. 作ったコードを「はてなブログ」の「記事下」や「記事上」に貼る
3. CSSコードを作る
4. 「はてなブログ」の「デザインCSS」にCSSコピーを貼る
5. 完成！

最後に

今回は記事下にデフォルトで「読者登録ボタン」を貼るやり方でしたが、もちろん記事内にもつけられますし、カスタマイズ次第で自由自在です！

慣れてきたら、自分のブログのパワーアップのために、トライしてみてくださいね！

ブログを長く楽しく続けていくには、読者さんの力はかなり大きく、かけがえのないものです

読者さんを増やしながら、いろんなブログを読んで、楽しいブログライフにしてくださいね！

最後までお付き合いいただき、ありがとうございます

参考になれば幸いです

 

スポンサードリンク

▼▼ドメイン取るならやっぱり▼▼

  Xserverドメイン

▼▼ナウでヤングなドメインがいっぱい▼▼

ロリポップ！

▼▼はてなブログでもお馴染み▼▼

 

お名前.com

▼▼ブロガーの強い味方▼▼

A8.net

▼▼ランキング参加しています▼▼

にほんブログ村