毎日、Twitterで日々の成果や頑張りをツイートしてします!

【ブログ初心者必見】WordPress(Stork19)の簡単なカスタマイズ方法を紹介

アイキャッチ画像

みなさん、お疲れ様です!カズトンです!

ブログを始めて少し慣れた頃に、思い出しますことがありますよね笑

「自分のサイトのデザインをカスタマイズしたい」

でもWordPressって難しいって聞くし…

自分もカスタマイズしたいけど、知識ないし、ネットで調べてもよくわからないことが多かった。

すごいデザインにカスタマイズするのはなかなか大変だと思いますが、ちょっとしたデザインなら僕ら「初心者」でも案外簡単にできちゃうんですよね!

今回の記事は、「初心者でもできるWordPressのカスタマイズ方法を紹介」です!

画像をいっぱい使って説明しています!少しは、わかりやすいと思います!

初心者だからといってコピペでできるだなんて思わないでください!笑

簡単でも、ある程度知識を学んでカスタマイズをして行きましょう!

今回の記事は、以下の人におすすめ!
  1. ブログ初心者でWordPressのカスタマイズに挑戦したい人
  2. HTML,CSSの知識が少しある人

少しの前提知識を紹介しますので、それをしっかりと覚えてカスタマイズを挑戦してください!

と、その前に今回利用するWordPressのテーマは「Stork19」です!

初めに、そちらの紹介をしてからカスタマイズ方法に移ります!

カスタマイズ方法から、知りたい人は、こちらから!

では、スタートです!!

WordPressテーマ「Stork19」をご紹介!

まずは、このサイトのトップページを見て下さい!

こんな感じのトップページなら、ブログを初めたばかりの初心者でも余裕でできるテーマになっています!

今後も、このテーマ「stork19」のカスタマイズや設定方法を紹介して行こうと思いますので検討してみてください!

前提知識を学ぼう!

前提知識として、HTMLとCSSを少し学ばないといけません。

HTMLとCSSは、プログラミングと言われるものになります!

でも安心してください!

WordPressを少しカスタマイズする分には、全然難しくありません!

プログラミングでHTMLやCSSを学ぶと大変ですので、「WordPress」から見た「HTMLやCSS」について説明していきますね!

HTMLやCSSをちゃんと学びたい人は、progateなどで勉強してみてくださいね!

HTMLについての知識

HTMLとは

まず、「HTMLとはなんぞや!」となりますよね!

HTMLとは、「WordPressで書いた文字をコードで表したもの」となります!

WordPressでよく使う見出しを例に上げると、

HTMLの書き方

HTMLの書き方は、「タグをテキストで囲む」です!

HTMLの構造はこちら!

<~>と</~>のことをタグといいます!

そのタグで文字を囲むと文字に意味をもたせることができます!

コードで、上のように書くと実際には以下のように見えます!

タグに固有の名前をつけることができる!

タグに固有の名前をつけることができます!(自分の好きな名前)

これをつけることによって、CSSでデザインができるようになります!

名前の付け方は以下の通りです!

タグの種類

続いては、WordPressでよく出てくるタグの種類を表でまとめました。

<○></○>の○の中に入ると思って下さい!

種類意味
h1,h2,h3,h4,h5,h6見出し
p本文
aリンク
img画像
liリスト

CSSについての知識

CSSとは

続いて、「CSS」とはなんだ!

CSSとは、「HTMLに色をつけたり、線を足したりするデザイン役」です!

先ほどと同じように画像で紹介

CSSの書き方

先ほども言いましたが、CSSはHTMLをデザインするためにあります!

ですので、「どのHTML」を「どのようにデザイン」するのかを書く必要があります!

「どのHTML」を指定するためには、class=”〜”の「〜」を指定すればいいということです!

もう一度、「class=”~”」を見たい人は、こちら

この形で書きましょう!

CSSの種類

続いては、CSSの「どこを」と「このように変えたい」のところになにが入るのかを表にまとめました!

これもWordPressでよく出るものをまとめました!

どこを意味このように変えたい意味
color文字の色をred(blue),#ffffff赤,白
background-color背景の色をred(blue),#ffffff赤,白
padding周りの余白10px10px分の余白
margin周りの余白10px10px分の余白
border-top
(reft,right,bottom)
周りの線を
(topなら上みたいに)
soild 2px red一本線 線の太さ 色
width横幅10px横幅を10pxに
height縦幅50px縦幅を50pxに

まだまだあるので、ぜひ調べてみて下さい!

HTMLとCSSを実際に使うと

先ほど説明したものをまとめて、実際にどう使うのかを説明します!

今回の手順は以下の通りです!

  1. あるテキストの文字の色を赤に変えたい!
  2. HTMLに名前をつける(class=”~”)
  3. CSSで、デザインを指定!
  4. 実際にできた!

HTMLに名前をつけました!

今回は、「lead」という名前にしました!

CSSで、「leadという名前のHTML」の「文字の色」を「赤」に変えるという指定をしました!

実際に変わったぞ〜!!

結論!WordPressとは!

結論ですが、

「WordPress」は、「HTMLとCSS」に等しいということ!

カスタマイズ方法(実例あり!)

今度は、実際にWordPressをカスタマイズするためにはどうすればいいのかを説明していきたいと思います!

カスタマイズに必要なのは、「HTMLの名前」をゲットすることと「CSSを書くこと」です!

その2つの手順を踏まなければなりません!

  1. Google Chromeの「検証」からHTMLの名前を取得する。
  2. カスタマイズの追加CSSにデザインする。

この手順を説明すると同時に、WordPressのデザインを変えるのを題材にして一緒にしていきましょう!

今回の題材!

ブログ記事のタイトルの下に、線を入れる!

以下のような感じにしたいと思います!

Google chromeの「検証」から、名前を見つけろ!

Google chromeをまだダウンロードしてない方はこちら

Step1

実際に変えたいデザインがあるブログサイトに飛んでください!

そして、マウスを利用している場合は「右クリック」トラックパッドを利用している場合は「2本指クリック」してください!

すると、「検証」が出るので、そこをクリックしてください!

Step2

すると、横にコードがズラッと並んだものを見えましたよね!

この画面が、「WordPressで作ったブログサイト」を「HTMLとCSS」として表示してくれています笑

この中から、「ブログ記事のタイトル」のHTMLを探します!

めちゃくちゃ大変ですよね笑

そんなときは、下の画像の「矢印」をクリックしてください!

このボタンをクリックすると、カーソルをサイトに当てるとそのHTMLを出してくれます!

すると、青色の背景が付きます!そこでクリックしてください!

すると右側にも青色の背景色が付きます!(そこがタイトルのHTMLです!)

HTMLの名前をゲット!!

これで、1つ目の手順クリアです!これは、必ずメモしておきましょう!

CSSでデザインをしていきましょう!

先ほどで、HTMLの名前が「entry-title,single-title」でした!

どちらの名前をつけてもOKです!

Step1

WordPressのダッシュボードに行きましょう!

次に、「外観」の「カスタマイズ」に行きましょう!

すると、右の欄に項目が表示されます!

その一番下にある「追加CSS」をクリックしてください!

コードを書く欄が出てきます!

Step2

この行に以下のコードを書きます!

HTMLの名前は「.single-title」ですね!

そして、下の余白と下に線を追加しました!設定方法は「CSSの種類で説明」しています!

Step3

「公開」をクリックして、公開してください!

これで完成です!!

実際にデザインが変わっているか確認してみましょう!

確認

ちゃんと反映されています!!

お疲れ様でした!

まとめ

最後まで読んでくださり、ありがとうございました!

最後にポイントだけまとめておきますね!

まとめポイント
  1. カスタマイズをするためには、「HTMLの名前」と「CSSのコード」が必要!
  2. 「HTMLの名前」は、Google chromeの検証で探す!
  3. 「CSSのコード」は、カスタマイズの追加CSSに書く!

この3つのポイントを抑えて、カスタマイズをして良いブログサイトを作って行きましょう!

アイキャッチ画像も、ブログには必要です!おすすめのデザインツールを紹介しているので読んでみては?

アイキャッチ画像

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です