ブロガーが最低限知っておくべきプログラミングの知識を現役エンジニアが教えます！

HikoPro

こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！

本記事のトピック

ブログを運営していく上で、サイトをカスタマイズしたり最低限のプログラミング知識が必要になると思うが何を学べばいいか分からない！

今回の記事では、現役エンジニアでWordPressでブログを運営している僕がこれから本格的にブログ運営をしていく方向けに最低限知っておくべきプログラミング知識についてご紹介します。

はてなブログやアメブロなどで記事を書いている方はプログラミングに触れることは少ないかと思いますが、WordPressを使ってブログを運営したりアフィリエイサイトを運営している方はプログラミングに触れる機会が時々あります！

この記事を読むことで、、、

サイトのカスタマイズをどうすればいいか理解できる
ブログがどのように出来ているか構造が分かる
metaタグ？headタグ？運営していると出てくる疑問点が分かる
ブログ運営の幅が広がる→SEOに効果あり

このような効果が得られるかと思います！！

こんな方にオススメ

WordPressを使ってブログを運営している方
headタグやmetaタグについて知らない方
プログラミングを少し学んでブログの運営の幅を大きくしたい方
自分好みにブログをカスタマイズしたい方

ブログを作るプログラミング言語について

まず始めにブログは何のプログラミング言語から出来ているかと言うと、、、

HTML、CSS、JavaScript、PHP

主にこの4つの言語で作られています。

HTMLとは

HTMLとはwebページの“見た目”を作るプログラミング言語で、「文章に意味付け」をする役割があります。この記事もHTMLを元に作られており、webページにおいてHTMLを使用しないページはありません。

HTMLはサイトの骨組みを作る言語

CSSとは

CSSはデザイン言語と呼ばれており、HTMLで作った骨組みのページに装飾をしていく言語です。例えば黒の文字を赤色にしたり、ページのレイアウトを変える事も可能です。

CSSはHTMLで作られた骨組みに装飾を指定く言語

JavaScriptとは

ブログサイトでは主にサイトに動きをつける役割があります。

写真をスライドさせたり、アニメーションを実装できたりweb上でサイトを華やかにするには不可欠な言語です。

PHPとは

PHPとは主にサーバサイドの言語と呼ばれており、書いた記事をデータベースに格納したり編集したりする事ができます。後はお問い合わせフォームやコメント機能もPHPで実装する事が可能です。

WordPressやブログサービスはこの4つの言語を組み合わせて作られており、これによりユーザーはボタン一つで記事を投稿したり、ボタンを押すだけで文字の色が赤に変化したりする事ができてます。

ブログのHTML構造

ほとんどのブログの構造がこのようにheader、メイン、サイドバー、footerとなっており、それぞれにしっかりと役割があります。

header：ブログ名メニューバーなどを設置する
メイン：書いた記事がここに反映される
サイドバー：カテゴリー一覧、人気記事を設置して回遊率をあげる
footer：サイト情報や、プライバシー、お問い合わせフォームを設置する

これらの4つは実際に目に見えて分かりやすいのですが、ブログのHTML構造はもう一つありheadと呼ばれるものがあります。

ブロガーが押さえておくべきheadタグとは？

ブログを運営していくと、Googleアナリティクスの導入や、サーチコンソール、その他アフィリエイトサイトの連携をする必要が出てきます。

そこで必要になってくるのがHTMLの知識、特にheadタグの知識です。

headタグを理解すると、SEOの向上だけでなくSNSでの記事の運用にも役立ちます！

Googleアナリティクスの認証コードは<head>直下に配置

ブログ運営で欠かせないのが、サイトのPV数などの統計情報です。

基本的にはGoogleアナリティクスを使用するかと思いますが、アナリティクスとブログを連携させるにはトラッキングコードと呼ばれるものをブログのheadタグ内に設置する必要があります。

<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA123456"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123456');
</script>
<title>ブログ名</title>
</head>

このようにアナリティクスの設定画面からトラッキングコードをコピーし、<head>の直下に設置すればOKです！

meta descriptionで記事内容を要約する

<head>
<meta name="description" content="この記事はmetaタグについて書いています" />
</head>

meta description（メタディスクリプション）とは記事の要約を表す部分で、上記のように書くと検索エンジンに表示されます。

検索すると、タイトルの下に記事の要約が表示されるかと思いますが、meta descriptionに書いた内容がそのまま表示されます。（120文字程度）

これを記述することにより、要約部分がユーザーが欲しい情報とマッチしているとクリック率が高くなるので、PV数の増加にも繋がるので設置するようにしましょう！

WordPressの場合はheadタグを触ることは必要なく、投稿画面の下の方にメタディスクリプションを記述するボックスが設置されているので、そこに書きましょう！

noindex,nofollowで無駄なコンテンツを検索結果に表示させない

<head>
<meta name="robots" content="noindex,nofollow" />
</head>

コンテンツ内容が重複していたり、SEOにとってよくない記事を検索結果から削除したい場合は上記のように記述すると表示されなくなります。

内容が薄い記事や、ブログのカテゴリーと違った記事はSEOによくないので設置すると良いでしょう。

Twitterカードを設定する

Twitterカードとは、公開した記事をTwitterでシェアする際に、ただのリンクではなく、画像やタイトルなどを表示させて、ユーザーのクリック率をあげると言うものです。

Twitterカードを表示させるためにはheadタグ内に様々なmetaタグを記述する必要があります。

 <meta property="og:url" content="ページのURL" />
 <meta property="og:title" content="ページのタイトル" />
 <meta property="og:type" content="ページのタイプ">
 <meta property="og:description" content="記事の抜粋" />
 <meta property="og:image" content="画像のURL" />
 <meta name="twitter:card" content="カード種類" />
 <meta name="twitter:site" content="@Twitterユーザー名" />

サルワカさんの記事で詳しく書かれているので、詳しく知りたい方はぜひ！

CSS,JavaScriptでサイトのカスタマイズ

ブログ運営をしていくと必ずどこかで、「サイトをリニューアルしたい！」「もっとかっこいいブログにしたい！」と思うことがあるかと思います。

その際は、、、

有料のテーマを購入する
エンジニアにリニューアルしてもらう
自分でカスタマイズする

この3つの方法でブログをリニューアルすることができます。

「自分の思った通りにお金をかけずにリニューアルしたい！」と思う方はCSS、JavaScriptこの２つのプログラミング言語を理解する必要があります。

CSS、JavaScriptをそこそこ理解しようとすると1ヶ月はかかるので、サクッとリニューアルしたい方にはお勧めしません。

CSSでサイトをカスタマイズする方法

プログラミング未経験のブロガーでもCSSを使用すれば簡単にサイトをカスタマイズすることができます。

それは自分でコーディングするのではなく、コードをコピーして自分のサイトに貼ると言うことです。

親切にも「コピペ可」でおしゃれなカスタマイズができるコードを公開しているブロガーさんがいらっしゃるのでどんどん活用しましょう！

1.カスタマイズコードをググって見つける

例えば、WordPressを使っていてテーマが「Cocoon」を使っているとしましょう。

「Cocoon カスタマイズ」と検索すると【コピペ可】「Cocoon」まるごとカスタマイズ講座【簡単】このような記事を見つけることができました。

今回はメニューバーをカスタマイズするCSSを例とします。

CSSを自分のブログに貼り付ける

今回はWordPressを例にすると、ソースコードをコピーして、上記の手順で進めていきます。

このようにすればプログラミングを学ぶことなく簡単にブログをカスタマイズすることが可能です。

コードを自分でアレンジ！

いますぐできるちょっとした小技をご紹介します！

background:#ac54c7(カラーコード); → 背景色が変わる
color:#b346cf(カラーコード); → 文字の色が変わる

貼り付けたコードを少し編集すると、自分好みの色に変更することが可能です。

→カラーコードはこちらからコピー