『WordPress』カスタムHTMLウィジェットでサイトTOPに背景画像付きボタンテキストを設置

 

どうも、トッド(Todd)(@ThreeFrogblog)です。

WordPressの有料テーマを見ていると、TOPページにヘッダーインフォメーションエリアが実装されているのをよく見かけ、

今っぽいというか、めちゃめちゃカッコイイ印象を受けたので『LION MEDIA』でも取り入れてみようと思い実装してみました。

ピーマン

ヘッダーインフォメーションって何のこと?
この記事で目指すヘッダーインフォメーションとはこんなやつ

MOGAKUN

完成図▼

 

今回の内容は、

WordPressのウィジェットにあるHTMLカスタマイズを使用してTOPページに▲ヘッダーインフォメーションを実装する方法になります。

MEMO
なお、以下で紹介するソースコードをコピペ実装することで100%、上記完成図のようになるとは限りません。文字数などに加えて表示する端末等を考慮した調整を行ってください。

ウィジェットにあるTOPページ上部エリアにカスタムHTMLを取り入れ、ソースコードを記述しよう

まずは、WordPress管理画面から、「外観」「ウィジェット」へ進み【TOPページ上部エリア】に【カスタムHTML】を入れます。

こんな風に・・・▼

そしたら以下のソースコードを【カスタムHTML】内に記述してください。▼

HTML
<div class="SiteTop_Info">
<img src="背景に表示する画像.png">
	<p>ここに好きなテキスト文を記載する</p>
<a href="飛ばしたいリンク先のURLをココに">
	<i class="fas fa-user-circle"></i>
	ボタン名</a>
</div>

背景に表示する画像のサイズは横765×縦419pxで作成しています。

Font Awesomeを使用してアイコンの部分を実装しているので、表示させるための設定が完了していない方はコチラを参考にしてみて下さい▼

『LION MEDIA』テキストリンクの先頭にFont Awesome導入でアイコン表示する方法

CSSでカスタムHTMLに記述したソースコードをドレスアップ

この状態でサイトのプレビューを見ると酷い状態になっているのでCSSで調整していきます。

今回は、PC表示を考慮した以下のソースコードを子テーマのstyleシートに記述していきますが、

スマホなどのレスポンシブ対応にする場合は、

@media only screen and (max-width: 768px){/*下記コード*/}

@media only screen and (max-width: 375px){/*下記コード*/}

+αで書き足してください。

CSS
.SiteTop_Info{
	position:relative;
}
.SiteTop_Info p{
	position:absolute;
  color: #fff;
  font-size: 37px;
	line-height:2;
	text-shadow:0px 3px 3px #787878 ;
	text-align: center;
		top:90px;
	left:5%;
	right: 5%;
  margin:0;
  padding:0;
}
.SiteTop_Info .fa{
	position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-size: 60px;
}
.SiteTop_Info a{
	position: absolute;
  top: 80%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 25px;
  border: solid #fff 3px;
	border-radius:10px;
  background-image: linear-gradient(-90deg, #fc6076 0%, #ff9a44 100%);
  padding: 5px 15px 5px 15px;
  color: #fff;
  text-decoration: none;
}
.SiteTop_Info a:hover{
	background-image: linear-gradient( 135deg, #FCCF31 10%, #F55555 100%);
	color:#fff;
}
.SiteTop_Info img{
	 width: 100%;
}

ここでも、Font Awesomeに関するコードも記述しているので、

アイコンを表示させない場合は上記コード内の.SiteTop_Info .faの部分を消してください。

.SiteTop_Info pの部分にGoogleフォントを使用することでガラッとテキストの印象を変えることもできるのでオススメです。

Googleフォントの導入に関する内容はこちらからどうぞ▼

Googleフォントの導入と使い方/Noto Sans Japaneseをページタイトルと見出しに実装

あとがき

以上の工程で完了です。「LION MEDIA」ならいい感じに仕上がるでしょう。

カスタマイズの参考になればと、思います。

レイアウトに関して崩れているところがある場合は数字の部分を触るなりして微調整してみてください。

最後まで読んでいただき有難うございました。

Fin.

コメントを残す

メールアドレスが公開されることはありません。