【初心者用】ブログにオススメなツールとカスタマイズコード
今回のテーマは『ブログにおすすめツールとカスタマイズコード』についてです。
ブログで使える良いツールないかな？
ブログを始めていくと次から次へと欲求が沸いてきて、簡単に使えるツールはないかな？他のブロガーさんは何のツール使ってるんだろう？など悩みがたくさん出てくるかと思います。
そこで今回はブログを始めたばかりの人に使えるツールをご紹介していきます。
こんな人にオススメ
記事をもっと見やすくしたい
キーワードを何にしたらいのかわからない
イラストを使って記事をオシャレにしたい
1.キーワードを選定する際に使えるツール
無料で登録して使える『ラッコキーワード』
こちらはブログをしている人には必需品になり、キーワードを打ち込むとたくさんのタイトルが表示されます。
ちなみに『キーワード選定』と打ち込むとこうなります。
このようにたくさんのキーワードが表示され、自分で考えなくていいです。
更にここからキーワードを全コピーした後に使用する無料ツールが『キーワードプランナー』です。
コピーしたキーワードを貼り付けるとこうなります。☟
月間の検索数と競合性が表示され、隙間を狙ったキーワードを選定することが出来ます。
これによりライバル数を減らせ、PV数を稼ぐ隙間産業を行う事が出来ます。
2.記事をみやすくしたい時に使える
筆者がよく使っている記事のレイアウトコードはこちらです。
こちらの囲いコード
HTML
<div class="box28"><span class="box-title">題名</span>
<p>内容</p>
</div>
CSS
/*記事を囲う*/
.box28 {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
border: solid 2px #FFC107;
}
.box28 .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #FFC107;
color: #ffffff;
font-weight: bold;
}
.box28 p {
margin: 0;
padding: 0;
}
吹き出し風コード
HTML
<div class="balloon5">
<div class="faceicon">
<p>ここに画像</p>
</div>
<div class="chatting">
<div class="says">
<p>ここに文章</p>
</div>
</div>
</div>
CSS
.balloon5 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
.balloon5 .faceicon {
float: left;
margin-right: -90px;
width: 80px;
}
.balloon5 .faceicon img{
width: 100%;
height: auto;
border: solid 3px #d7ebfe;
border-radius: 50%;
}
.balloon5 .chatting {
width: 100%;
}
.says {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px;
background: #d7ebfe;
}
.says:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #d7ebfe;
}
.says p {
margin: 0;
padding: 0;
}
コピーしてHTMLとCSSに貼り付けるだけなので、とても簡単に使えます。
一部対応できないサイトや上手く機能しない場合なども御座いますので、あしからずご了承ください。
実際この2つだけでも十分に見やすい記事となります。
3.イラストを使いたい時に役立つ
最初の方に吹き出しをつけて画像を使用していますが、このイラストはこちらから使用しています。☟
利用規約に反しない限り無料で提供とされており、大変重宝しているサイトになります。
喜怒哀楽の表情を全て実現出来ており、ブログ作成には強い味方です。
味気ない記事よりも少しイラストなどがあった方が、読み手にとっても楽しくなると思いますので、ご活用下さい。
