ハッと目を引くブログにできちゃうコードの書き方って?現役Webコーダーが解説してみた。

コード
スズメ団長

こんにちは!
スズメ団長です!

・ブログを始めたけどちょっとアレンジとかかっこよくできない

・文字とか装飾したいけどどうしたらいいの?

・結局どの辺までかければいいの?基本を知りたい

ブログを書いていて、「ちょっとここを文字をかっこよくしたいなー」

ここをちょっといじれれば見やすくなりそうなんだけどなぁ…とか、

ブログのテンプレートに物足りなさを感じることってありませんか?

そこで現役Webコーダーとして働いている筆者が、ブログに使いそうなコードを抜粋してみました。

ブログの仕組みと簡単なコードをちょっと知っておくだけで、思い通りのブログを作成できるようになっちゃいます!

さらに、きちんと知っておくとGoogleの検索に引っ掛かりやすい(読者を増やしやすい)方法も解説しますので、ぜひ最後までお付き合いくださいね。

目次

ブログは全てコードで書かれている

blog

まずはブログってどうやってできてるの?

というところから解説していきましょう。

・ブログの中身はHTMLとCSS

ブログにかぎらず、WebはHTMLとCSSというものから成り立っています。

もちろんそれだけではないのですが、ブログに使う程度であればそこだけで十分です。

(テンプレートを作成までするのでしたらもうちょっと難しいかもしれません)

HTML:内容を書くためのコード

CSS:HTMLを装飾するためのコード

ざっくりいうとこんな感じでしょうか。

HTMLで書いた見出しに色をつけたいなーとか太字にしたいなーというときにCSSで行うという感じですね。

基本的なことはこちらの動画がわかりやすいかと思います。

アウトラインが大事

構成

いきなり難しい感じになっちゃいましたね。

アウトラインとは大まかな流れと考えるとよいでしょうか。

簡単に言うと大まかな構成をタグで決めてしまうということになりますね。

このアウトラインがちゃんとしていると、Googleに価値のあるページとして認識され、

検索に引っ掛かりやすいページを作ることができるのです。

<body>
  <h1>見出し1</h1>
  <h2>見出し2</h2>
  <h3>見出し3</h3>
  <p>文字</p>
  <h2>見出し2</h2>
  <p>文字</p>
</body>

この見出しからくる流れのことをいいます。

逆に構成がおかしいと「あれ?何言いたいのかな?」となってしまいますよね。

わたしはよく何も考えずに書き始めてしまって、

「あれってなにいいたかったの?」

と聞かれちゃったりしてました。恥ずかしいですね。

便利なcssを覚えておこう

CSS

書いていくうえで便利なcssを紹介していきましょう。

・文字の余白を調節する

ここでは20pxあけることを想定しています。

/*下に余白を付けたいとき*/
.mb-20 {
  margin-bottom: 20px;
}
/* 上に余白を付けたいとき */
.mt-20 {
  margin-top: 20px;
}

文字を太くする

.bold {
  font-weight: bold;
}

もしくはHTMLに

<b>太い字</b>
<strong>太い字</strong>

と書くだけでも太字になります。

<b>タグはデザイン上で太くしたい場合、<strong>タグは言葉を強調したい場合に使うとよりよいかと思います!

※strongタグは多用するとGoogleから評価を下げられる可能性があるのでなるべくbタグを使いましょう!

字を揃える位置を変更

中央寄せにする

.ta-c {text-align:center;}

左寄せにする

.ta-l {text-align:left;}

右寄せにする

.ta-r {text-align:right;}

文字の大きさを変える

.fz-l{
  font-size: 20px;
}

文字の色を変える

.f-red {
  color: #ff0000;
}

と、この辺まではブログのエディタに用意されている機能でなんとかなっちゃうかもしれませんが、

ちょっと変化を付けたいときに知っておくと便利です。

Webでは色はカラーコードで指定することができるので、ちょっと上のヘッダーの色が嫌だなぁとか、

テンプレートの文字をもうちょっと好みの色に変えたいなーというときに使えます。

カラーコードはこちらのサイトさんにいきますと、自分の好みの色のコードがわかりますよ。

配布されたテンプレートを自分の好みの色合いにするだけでも、ぐっとオリジナリティがでてかっこよくなりますね。

見た目がかっこいいブログはそれだけでもテンションがあがっちゃいます。

応用編

・枠で囲ってみよう

.frame {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #333333;
}

角をまるくすると。。

.frame {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #333333;
  border-radius: 10px;
}

・マーカーのような線を文字に入れる

マーカー線

<span style="background: linear-gradient(transparent 10%, #ffff7f 0%);">マーカー線</span>

transparent 10%のところをお好みで50%や60%にしていくと細くすることもできます。

色も先ほどのカラーコードで自分の好みの色にしてしまいましょう!

コードにもっとくわしくなりたい!

CODE

コードをもっときちんと学んでみたい!という方もきっといますよね。

その場合は三つほど方法があります。

  1. 動画を見て学ぶ
  2. 教材を使う
  3. 学校にいく。

1.動画を見て学ぶ。

もちろんYouTubeにも良質な動画がたくさんあるのですが、

スクードットインストールも有名です。

スクーはゆっくり学びたい方向け、ドットインストールは3分という短い動画ですので、忙しい方むけでしょうか。

2.教材を使う

図書館で本を借りてもよいのですが、私のおすすめはProgateです。

にんじゃわんこというかわいいキャラクターとともにスライドで学び、

実際に手を動かして身に着けていくことができる教材です。

自分のペースで学べて学びやすい!

3.学校へいく。

わたしはこのパターンでした。

職業訓練所や、色々な学校がありますので、友達を作りながら確実に学んでいくならこの方法もおすすめです。

まとめ

  1. ブログはHTMLとCSSでできている。
  2. アウトラインが大事。
  3. 便利なcssをざっとお知らせ。
  4. コードにもっとくわしくなりたい人は動画や良い教材があります。

といったところでしょうか?

あとはテンプレートが助けてくれるはずです。

ここまで読んでくださった方ならきっとお友達に自慢したくなっちゃうようなブログが作れちゃうのではないでしょうか。

オリジナリティあふれるブログをかいて、世界に発信していきましょう!

スズメ団長

以上、
スズメ団長でした!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次
閉じる