カスタマイズ

【htmlとcss】ヘッダーのブログタイトル右上にボタンを設置する方法

ヨシキリ
ヨシキリ

こんにちはヨシキリです。

今回は、ヘッダーの上にリンクボタンを設置する方法をお伝えします。

「お問い合わせ」や「ログイン」など、目立たせたいボタンを設置するのにピッタリ!

ワードプレスでの操作方法となります。

カスタマイズの前に、データのバックアップをとってください。

カスタマイズは自己責任でお願い致します。

目立たせたい重要なボタンをヘッダー上に置こう

今回のカスタマイズを行うと、こんな風にボタンを設置することができます。

ヘッダーの中にコードを挿入することになるので、プラグイン「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以下の画面では表示されないようになります。

ヨシキリ
ヨシキリ
以上、ヘッダーにリンクボタンを設置する方法でした!
あわせて読みたい
【httpsで安全に】ワードプレスのブログを自分で常時SSL化する方法 SSL化とは簡単に言うと、サイトやブログでの通信を暗号化して、サイトを利用しているユーザーの個人情報やログイン情報を保護すること...