テーマストークでも出来る!自分好みの上に上がるボタンにカスタマイズせよ!

手を加えるのはテーマフッター(footer.php)とCSSの2箇所を変更するだけ

オープンケージ社のテーマストークを採用されているブログもよく見かけるようになりました。




私は以前にアルバトロスというテーマにて右下にあるページのトップに戻るボタンをカスタマイズしてみたことがありました。

その後もいくつかテーマを変更したりしてこの上に上がる(戻る)ボタンをすっかりカスタマイズしなくなったのですが、他社テーマだとテーマを編集するのが難しくて出来ていませんでした。

その点オープンケージ社のテーマは私のような初心者でも多少ならテーマのカスタマイズが出来るところが魅了でした。

そのようなメリットや親しみやすいデザインも見直し再導入したのです。

そして早速試みたのがか上に上がるボタンのカスタマイズです。

自分好みの画像さえあれば基本的に何だってボタンに出来ちゃうのでやるっきゃないって感じ!

さあ、みんなもレッツ、カスタマイズ!

前回もそうでしたが、今回もパンダの覆面をかぶった夫婦さんのブログからアイデアを参考にさせて頂きます。

ちなみにコピペで出来ちゃうので真似をするだけで簡単に出来ちゃいます。

パンダの夫婦さんの記事では同オープンケージ社製テーマのアルバトロスと他ブログマーケッタージュンイチさんのリリースされたエレファントというテーマでもこのカスタマイズを行ったということでした。

参考:

ELEPHANT(エレファント)をカスタマイズ!右下の上部へ戻るボタンを画像に変更する方法

上記の記事からそのままの内容でストークをカスタマイズ出来ましたので同じようにストークをお使いの方はコピペでやって見てくださいね。

テーマフッター(footer.php)の編集

外観→テーマの編集からテーマフッター(footer.php)を編集します。

基本的にはテーマの編集は子テーマの利用が望ましいため、子テーマを理解された方がカスタマイズされることをお薦めします。

<div id=”page-top”に続く部分が今回編集する箇所となります。

<div id=”page-top”><a href=”#wrapper” class=”fa fa-caret-up”></a></div>

上のコードから下のコードに書き変えるのですが、コピペでオッケイです。

ちなみに次の(ここに画像のURLを入れてください)の部分にメディアファイルとしてアップロードしたpng画像のURLをコピペします。

<div id=”page-top”><a href=”#wrapper”><img src=”ここに画像のURLを入れてください”></a></div>

エレファントでは先ほどのコードはテーマフッター(footer.php)の62行目になるということですが、今回のテーマ ストークでは一番上にあるので探すのが楽でした。

これらのカスタマイズ手順でテーマ ストークの上に上がるボタンが自分好みのオリジナル画像に変わります。

次はスタイルを整えていきます。

追加CSS(外観→カスタマイズ)の編集

スタイルを整えていくためにはCSSを編集する必要があります。

テーマ ストークではCSSの編集は直接いじらなくとも追記する形で可能でした。

手順としては外観→カスタマイズ→追加CSSと選びます。

そこに下記コードをコピペするだけです。

/*↓PC用のボタンだよ↓*/
@media only screen and (min-width: 768px){
#page-top a {
width: 90px;
height: 90px;
padding: 10px;
text-align: center;
display: block;
z-index: 9999;
background: none;
opacity: 1;
margin-right: 3px;
}
#page-top a:hover {
text-decoration: none;
background: none!important;
color: none!important;
}
}
/*↓スマホ用のボタンだよ↓*/
@media only screen and (max-width: 767px){
#page-top a {
width: 80px;
height: 80px;
padding: 10px;
text-align: center;
display: block;
z-index: 9999;
background: none;
opacity: 1;
margin-right: 3px;
}
#page-top a:hover {
text-decoration: none;
background: none!important;
color: none!important;
}
}

まるまるコピペでテーマ ストークでも使えたため、実際にストークを使っている方にはお薦めな方法なので今回記事にしました。

皆さんも参考になさって下さいね。

貴重なカスタマイズ情報を公開してくださいました覆面パンダの夫婦様ありがとうございました。




コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)