こんにちはヨシキリです。
今回は、ヘッダーの上にリンクボタンを設置する方法をお伝えします。
「お問い合わせ」や「ログイン」など、目立たせたいボタンを設置するのにピッタリ！
ワードプレスでの操作方法となります。
カスタマイズの前に、データのバックアップをとってください。
カスタマイズは自己責任でお願い致します。
もくじ
目立たせたい重要なボタンをヘッダー上に置こう
今回のカスタマイズを行うと、こんな風にボタンを設置することができます。
ヘッダーの中にコードを挿入することになるので、プラグイン「Add Code to Head」を使いますが、全然難しくないので安心してください。
プラグインを使わずに使用しているテーマの「header.php」を直接いじってもOKですが、初心者にはリスクが高いので、不安な方はプラグインを使いましょう。
「Add Code to Head」をインストールする
プラグインのインストール手順です。分かりきってるわ！！という方はどんどん先へ進んでください。
ダッシュボードの「プラグイン」をクリック
「新規追加」をクリック
キーワードに「add code to head」と入力し、「今すぐインストール」をクリック
「有効化」をクリック
これでインストールが完了しました！使い方は、
サイドバーの「設定」＞「Add Code to Head」をクリック
↓↓このスペースにコードを記入していきます。
「Add Code to Head」に記入するHTML
「Add Code to Head」に記入するhtmlは以下の通り。コピペして、入力すべきところは入力して貼り付けてください。「変更を保存」を忘れずに。
<div align=”right”>
<a href=”リンク先のURL” class=”link headbutton”>お問い合わせ</a>
</div>
- <div align=”right”>のrightをleftに書き換えると、ボタンの位置が左になります。
- 「お問い合わせ」は、「ログイン」や「メルマガ登録」など任意の文字に変更してください。
「style.css」に記入するCSS
次に、ボタンのデザインをcssで指定していきます。その際、「style.css」に追記していきます。
「外観」＞「テーマの編集」をクリック
「編集するテーマを選択」で、必ず子テーマを選択してください。親テーマをいじってしまうと、テーマの更新があったときにせっかく記入したコードが消えてしまいます。
子テーマを選択したのち、「style.css」に追記します。
追記するcssは以下の通り。色や余白の大きさなど、それぞれの値はプレビューを繰り返しながらご自身でいい感じにしてください。
/*ヘッダーボタンのデザイン*/
.headbutton {
position: relative;
display: inline-block;
text-decoration: none;
padding: 10px 40px;/*文字の上下左右の余白*/
color: #ffffff !important;/*文字の色*/
background: #ff687b;/*ボックスの色*/
border: solid 4px #ff2c50;/*周りの線色*/
border-radius: 0px 0px 14px 14px;/*角の丸み 左上 右上 右下 左下の順*/
font-weight: bold;/*文字の太さ*/
font-size: 16px;/*文字の大きさ*/
top: -5px;/*上から-5pxの場所に配置*/
right: 60px;/*右から60pxの場所に配置*/
}
これをコピペしたら、「ファイルを更新」をクリック。
ブログのトップページを開き、再読み込みするとボタンが表示されると思います。
スマホでの表示を消したいとき
確かに、↑これだと位置が微妙でちょっとダサい…
パソコンでは表示させて、スマホでは表示させないようにしましょう。
/*モバイルでヘッダーのボタンを表示させない*/
@media screen and (max-width:600px){
.headbutton{display:none;}
}
これを先ほどの「style.css」に追記すればOK。幅が600px以下の画面では表示されないようになります。
