読者です 読者をやめる 読者になる 読者になる

ポメスパンツァー

若手ゆとり会社員の究極暇雑記

【パーフェクトガイド】これだけではてなブログできるやん!





【スポンサーリンク】

どもどもブログのページ編集もまたそろそろやらないと中途半端に手抜きしているところが目立ってきている気がします。

 

ど初心者無知ブロガーのKitarouです。

 

今日はブログ編集にあたって筆者が参考にしてきたものをご紹介しようと思います。

 

目次

  

現在まで

筆者まだブログ始めてちょうど1ヶ月と半分が過ぎたところです。

始めた頃はコーディングの知識は0でした。

他のブロガーさん方がどのように運営しているか、何を見ていいかもわかりませんでした。

 

そこではてなブログの登録に合わせて一冊の本を買いました。

 

そこからブログページの始め方ページの作り方を参考にしました。

 

そのあとはひたすら情報提供してくださっているブロガーさんのページを徘徊しまくり。

それこそ本に出せば売れるんじゃないと思うような内容を出してくださっている方がたくさんいらっしゃって筆者は現在までくることができました。

 

はてなブログのバイブル(ド初心者向け)

はてなブログのバイブル

ブログのこと知りません。

HTML? CSS?

用語なんてさっぱり!どやっ!

でもブログをちゃんとやってみたい。

という方にオススメです↓

 

この本は筆者が現在でもちょっとしたことを調べたい時に使っているものです。

つまりはブログの辞書みたいなものです。

 

 

しかし小難しいことは書いてません。(初心者レベルなら)

完全に筆者にとって

はてなブログのバイブル

と断言できます。

 

はてな登録から大活躍!

あまり内容曝けてしまうといけないと思うのでオブラートですがご紹介。

 

こちら何とはてなブログの登録方法から紹介されています。

サイトにアクセスして〜から登録完了まで丁寧に記載されています。

 

ブログのイメージ選びも!

高校の時とかに自分でHPを作ったことはあったので何となく雰囲気は覚えてました。

自分で好きなデザインを選ぶあたりは似ていてそんな自分でみたらわかること、試行錯誤でわかることまで載せている良心的な出だしになってます。

 

SNSとの連携も!

ほとんどの方がFB, Twitter, Intstagramをやっていると思いますが、その連携から活かし方まで載せています。

 

HTMLやCSSの基礎知識も(←記載だけでじゃない)

*はてなブログの場合、ここは有料会員Proに入っている方限定になります。

これがこの本の醍醐味です。一番大事なところです!

何とこの本に書いてあるコードを丸写しするだけで、

自身のブログをアレンジできてしまうのです!

 

筆者はこれがこの本を買ってよかったと思うところです。

 

しかしこれでは終わらない。

 

何と作中URLとパスが付いていて、

アクセスすると、何と文中のコードが

そのままコピペできるようになってます!

何でしょうかなんかチートなきがします。

 

 

でも初心者の人にも敷居が低くなるような

本になっているので、ブログ全く初めてという方にも

買って損はしないようになってます。

 

さあこれだとただの宣伝ですね。

 

気をつけたい点

コピペなど、非常に優しい内容になってますが、これは逆に言うと、

周りと同じ見た目になりやすい

つまりみんな同じブログページを作ってしまうということです。

 

本当の通りにやると当然とは思いますが、最初はそれでもいいというなら参考にしてみてもいいかと思います!

 

でも自分風にアレンジしたい!

上記の本で、初心者は十分すぎるほど学べますが、やはり自分風にアレンジがしたいものです。

筆者はもっとアレンジがしたかったです。笑

 

調べているとたくさん出てきました。

勝手ながらですがシェアさせていただきます。

 

shiromatakumi.hatenablog.com

まずは見出しの編集ですが、コピペでサクッとどこに配置すればいいかも記載していただいているので簡単に目次や見出し編集にバリエーションが持てます!

 

www.ituore.com

次はシェアボタンですが、FBやTwitterと連携しているかがPVアップに欠かせなしということで、オリジナルなシェアボタンのコードを記載いただいています!

筆者は以下のコードでボタン作成に使わせていただいています。

http://www.ituore.com/entry/sns-share-button

シェアボタンのコード:

 

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="inner">
<!--はてなブックマーク-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="share-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

 

色付きボックス:

 

<style type=text/css>
/*share-botton*/
.share-buttons{
margin-bottom: 10px;
text-align: center;
}
.share-buttons .inner a {
position: relative;
display: inline-block;
width: 17%;
height: 45px;
line-height: 25px;
font-size: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
padding:2px;
}
.share-buttons .inner .share-text{
font-size: 8px;
}
.share-count-box {
height:1.33333em;
display:inline-block;
text-align:center;
}
.share-buttons .inner .hatena-bookmark-button{
background: #008fde;
}
.share-buttons .inner .facebook-button{
background: #305097;
}
.share-buttons .inner .twitter-button{
background: #55acee;
}
.share-buttons .inner .googleplus-button{
background: #db4a39;
}
.share-buttons .inner .pocket-button{
background: #ee4256;
}
</style>

 

www.yukihy.com

最後にグローバルメニューですね。

サイドバーだけだとどうしても不便なので、こうしてトップにアクセス先を置いてあげるだけで読者の利便性が尊重されると思います。

 

というような形で自身で情報を取りに行くことも全然できるし、ありがたいことに無料ですし。。

ぜひブログ開始に悩んでいる方いらっしゃいましたらご参考にください!

 

 編集したいけど金かけたくねーよ。。

これ以上課金は嫌だ!

よーくわかります。

せっかくProに課金したのに編集にそうやって本などに課金するのキツイです。

という方。

 

安心してください。

ブログ会には賢者や師匠と崇められるような初心者ブロガーの方をサポートする記事を書いてくださっている方が多数おられます!

初心者のブログ記事のサポートしてくれる方

 

niche.hateblo.jp

登録から簡単な編集まで画像を用いて丁寧に解説いただいています。

最初はこの記事一本でオッケーて感じです。 

 

www.polyglotconspiracy.net

将来的にアドセンスなどを考えてられる方なら参考になるかもしれません。

しかし最初から収益化目的でブログを始めるとなかなか我慢する期間が長いので、メンタル的に負担な部分もあるかと。

なので趣味で始めたいけど将来的に収益化もあればいいなーと思うくらいの方にオススメです。

 

blog.hmp2blog.com

こちらでははてなに限らず他のサイトと比較した結果、はてなを選んだ方の記事を参考にしております。

 

 おまけ 

過去記事でも紹介してますが、

記事はいつも参考にしてます!

www.pojihiguma.com

ブログ運営をされている方ならほぼ99%は知ってて間違い無いと思います。 

いやもう認知度 100%でしょ!(やめろ)

僕のブログ人生の土台をコンクリで固めてくれたいっても過言でありません!

ポジ熊さんです。

 

ポジ熊の人生記」というブログを運営されています。

ですがブロガーのみならず、アドバイザーということで多くのブロガーさんの支持を得ております。

筆者も壁にぶつかったと思った時は相談させていただきたいと思ってます。

 

もしブログ運営を本格的に考えている方には間違いなく参考になる記事だと確信してます。

 

まとめ:

ちょっと自分が参考にした本を紹介しようと思ってましたがほとんどブロガーさんの紹介で終わってしまったような気がします。笑

 

でも自分もいつかこうして読者さんや他のブロガーさんから紹介いただけるような記事作りをしていきたいと思います。

 

ちなみに「はてなブログのパーフェクトガイド」については、目的を持って購入したわけではなく、

 

『はてなブログが簡単そうだから、

本見ながらやろう!』

 

と安易な考えで買ったことがきっかけでした。

普通なら参考書などもそうですが、3日坊主で終わるものです。

筆者は25年間そうでした。

 

でも書くことが好きということ、また本の内容が本当に親切だったこと

この2つがあったんのでブログ運営が続いてます。

もちろん日に日に読者が増えていることは言うまでもありません。

 

読者がいなかった出だしもポジ熊さんとパーフェクトガイドでやてこれました!

 

今後も良記事目指して精進していきます!

 

最後に筆者のブログ運営や、アドセンス登録までの経緯なども載せておきます。

ご参考になれば幸いです!

 

www.mein-pompan.com

 

www.mein-pompan.com

 

www.mein-pompan.com

 

www.mein-pompan.com

 

本日はこれまで。

 

ではでは

 

Kitarou