ワードプレスをはじめたての頃、わからなくて悩む問題のひとつに
見出しの作り方、リンクボタンの作り方があるのではないでしょうか？
私に関して言えば
とりあえず、レンタルサーバーに契約して、ワードプレスをはじめて
記事を書いてみて、思ったより簡単だと思ったのですが・・・・・
みなさんのサイトを見てみると
綺麗なデザインの見出しやリンクボタンを使われているサイトが多いですよね
○見出し→記事の本文中に
○リンクボタン→サイドバーや本文中に
そこで私も見出しやリンクボタンを作ってみようと思ったのですが・・・・・
これが、全くうまくいきませんでした
ネットでリンクボタンや見出しの作り方を調べて
サイトの記事の説明文を読んで、その通り行っても、どうやってもうまく反映されません。
最初は、わからなくて相当悩みました。
そこで、ワードプレスをはじめたばかりの方へ
できるだけ簡単に見出しやリンクボタンを作る方法を説明したいと思います
目次
ワードプレスのリンクボタン、見出しを作る
私がワードプレスを始めたばかりのころ悩んだのは以下の４つの点です
１、色々な方のサイトで無料で見出しやリンクボタンのコードを公開してくれていますが
そのコードをどこに入力すればいいのか？
ほとんどのサイトではコードの入力場所が書いていません。
２、たくさんのサイトで見出しやリンクボタンのCSSコードが公開されていますが
コードを見ると英数字の中に日本語で、幅を広く 文字を大きく などの日本語が書かれてい
る場合があります。この文字（日本語）も英数字と一緒に入力してよいのだろうか？
という疑問
３、CSSの指示コードを公開してくれているのはいいが、それだけでは見出しやリンクボタン
が反映されない
４、１～３の問題をやっとクリアして、すべて説明通りに行っているのにどうしても見出しや
リンクボタンが反映されない（表示されない）
以上の問題を順番に説明していこうと思います。
CSSコードの入力場所と入力方法
ワードプレスを利用していて
色々なサイトで無料で公開されているCSSコードをどこに入力すればよいか？ですが
CSSコードの入力場所
１、ワードプレスの管理画面を開きます
２、左のメニューの 外観 にマウスカーソルを合わせます
３、新しく表示されるメニューから テーマの編集 をクリックします
４、テーマの編集 画面が表示されます
テーマの編集画面の余白にCSSコードを入力します
５、CSSコードの入力が終わったら必ず ファイルを更新 をクリックしてください
これでCSSコードの入力が完了です
※子テーマがあるテーマでは、必ず子テーマで編集してください
親テーマ、子テーマのどちらにCSSコードを入力しても見出しやリンクボタンなどを
作成できますが、編集は子テーマで行ったほうが、後々便利です。
また２つ目の疑問の説明ですが、フリーで公開されているCSSコードには
/* 背景色 */ /* フォントサイズ */ などのように所々、日本語で表示されている
ものもありますが、そのまま入力して問題ありません。
そのサイトの解説どおりに入力してください
CSSコードを入力したが、見出しが表示されない
これは、ほとんどのサイトでそうなのですが、
テーマの編集画面にCSSコードを入力しても見出しやリンクボタン等が表示されないのは
CSSコードだけを公開して、記事の本文に書き込むコードを省略しているからです
見出しやリンクボタン等を正しく表示するには
●CSSコード（テーマの編集画面に入力するコード）
●記事側のコード（記事の本文に書き込むコード）
の２つが必要です
CSSコードの入力が終わったら、今度は、見出しを表示させたい場所に
記事の本文側に書き込むコードを入力しましょう
例えば（見出しの場合）
CSSコードが
.sample01{
position: relative;
margin: 0 0 1.5em;
padding: 0.5em;
↓
以下省略
の場合
※これは、例ですので、自分の好きなデザインの見出しやリンクボタンのCSSコードを無料で公開しているサイトから調べて入力してください
記事の本文側に書き込むコードは
<div class="sample01">見本</div>
になります
※見本 のところに好きなテキストを入力します
※sample01 のところは、入力したCSSコードによって違います
変更するのは、基本的にこの２箇所になります
入力する際は、ワードプレスのエディター（記事の投稿画面）で
必ず テキスト モードに切り替えて行ってください
コードを記事側の表示させたい場所に入力すると
見出しが表示されます
このとき記事の投稿画面には、見出し等が表示されないで
見本
という文字だけ表示されますが、プレビューや実際にネット上で見ると
ちゃんと見出しが表示されます
それでも見出しが表示されない場合！
プレビューやネット上で見ても見出しがうまくが表示されない場合は
そのページを開いた状態で
ctrlキー（コントロールキー）とF5キーを同時に押してください
※F5キーだけ押してリフレッシュさせても効果はありません
これでおそらく、ちゃんと表示されると思います。
私もワードプレスを使い始めの頃、記事側にも、テーマの編集画面にも
指示コードを入力したのですが、見出しやリンクボタンが表示されなかったことがあります
おそらくCSSコードが間違っているのだと思い込んでいたのですが
そのとき、違うパソコンでふと自分のサイトを見るとちゃんと表示されていて
驚いたことがあります。
それで調べてみると上記のように、コントロールキーとF5キーを同時に押せば
解決する場合があることを知りました。
また、これは、通常の見出しの例ですが
h1,h2,h3などのタグを使いたい場合でも応用できます
h2タグを使った見出しを作りたい場合
上記の応用でh2タグなどの見出しも作ることができます
例えばh2タグで見出しを作りたい場合は
以下のようになります（記事の本文側に入力するコードです）
<h2 class="sample01">見本</h2>
●上記の sample01 は、入力するCSSコードによって違います
●上記の 見本 のところは、好きな文字を入れてください
※もちろんテーマの編集画面に、これに対応するCSSコードの入力が必要です！
h3タグで自分の好きなデザインの見出しを使用したい場合は、
上記のh2をh3にすればよいだけです。
（前後２箇所ありますのでどちらも変更してください）
リンクボタンを作りたい場合
実は、リンクボタンもCSSコードさえ入手すれば、基本的に見出しの作りかたと同じです
１、まず、自分の好きなデザインのリンクボタンのフリー素材をネットで探します
２、見つけたらそのCSSコードを見出しのときと同じように
子テーマの編集画面に入力してファイルを更新します
３、次に記事側の指示コードですが
以下のようになります
<div class="sample01">リンクボタンの見本</div>
●上記の sample01 は、入力するCSSコードによって違います
●上記の リンクボタンの見本 のところは、移動先のURL付のテキストを入力してください
※必ずテキストモードで入力して下さい
例えば リンクボタンの見本
<a href="http://samplesite.com/abc/post123/">リンクボタンの見本</a>
これを上記のコードに当てはめますので
例ですが、最終形こんな感じになります
<div class="sample01"><a href="http://samplesite.com/abc/post123/">リンクボタンの見本</a></div>
こちらも見出しのときと同じように記事の投稿画面上には
リンクボタンの見本 というテキストでしか表示されませんが
プレビューやネット上で見るとちゃんとリンクボタンが出来上がっているはずです。
それでもリンクボタンが表示されない場合は、そのページを開いた状態で
ctrlキー（コントロールキー）とF5キーを同時に押してください
私も最初は、CSSという言葉を聞くだけで難しいそうと逃げ腰になりましたが、
なんとか使いこなせるようになってきています
初心者の場合は、何度も練習することが必要だと思います
また、練習の際は、記事を書くためのサイトではなく
練習用のワードプレスのサイトをひとつ作っておくと便利かもしれません
その際は、すべて非公開状態で練習するのがよいでしょう。