2017年の公式テーマであるTwenty Seventeen。シンプルでとっても素敵なテーマだと思います。
このブログもTwenty Seventeenをカスタマイズして使っているのですが、利用し始めて、最初に気になったのが、サイトタイトルの位置です。
感じ方に個人差があるとは思いますが、タイトルのポジションが少し低すぎるなと感じました。
デフォルトだとこんな感じです。
タイトルとサイトの説明が、一番下の方に表示されていますが、こんな感じで、画面中央で表示したかったんですよね。
今回は、Twenty Seventeenのタイトル位置の変更に関するカスタマイズです。応用すれば、他のテーマでも使えると思うので、参考になさってください。
もちろん、レスポンシブ対応ですよ！
Java Script でレスポンシブ対応させる
ただ単に、タイトルを動かすだけなら、CSSをいじれば対応できます。
しかし、レスポンシブなテーマの場合、画面サイズによって細かくCSSを再定義してあげなくちゃなりません。
そこで登場するのが、JavaScript（jQuery）です。
移動させたい距離を計測して、リアルタイムで反映させれば、どんな画面サイズにも自動で対応できます。
何はともあれ、実装してみるのが一番なんで、空のjsファイルを用意してください。
置き場所は、こんな感じが多いんじゃないでしょうか。
/wp-content/themes/your-theme/js/ほにゃらら.js
次のコードをコピペして、「ほにゃらら.js」に放り込んでください。
/****************************************
ヘッダーの文字を中央に固定
*****************************************/
nowDistance = function(){
// グローバルナビからwindow（画面）の上端までの距離を計測
var naviUpper = $('.navigation-top').offset().top;
// 動かしたいタイトル要素の高さを取得
var titleBoxHeight = $('.site-branding-text').height();
// 実際に移動させる距離を計算
var movingDistance = (naviUpper/2-titleBoxHeight/1.5);
// CSSでタイトル要素にマージンを与えて移動させる
$('.site-branding-text').css({'margin-bottom': movingDistance + "px"});
};
// 【レスポンシブ対応】移動したい距離をリアルタイムで取得して反映させる
jQuery(function(){
nowDistance();
$(window).resize(nowDistance);
});jQueryが、きちんと読み込まれていれば、すぐに反映されるはずですが、いかがでしょうか？
iPhoneやAndroidでも、しかっり真ん中に表示されているはずです。
コードの簡単な説明は、コメントに書いてありますが、ポイントは、画面上端からナビゲーションまでの高さを計測して（naviUpper）、その中間地点まで移動させているところです。
けれど、計測した高さを、単純に２で割っただけでは、ナビゲーションの高さのぶんだけ、真ん中より少し高めに表示されてしまいます。
そこで、計測した高さから、ナビゲーションの高さを引いてあげました。
// 実際に移動させる距離を計算
var movingDistance = (naviUpper/2-titleBoxHeight/1.5);これで、バッチリ真ん中に移動できます。
以上、「Twenty Seventeenのタイトル位置を変更するカスタマイズ」でした。
こちら、何度やってもうまくいかないのですが何が原因なんでしょうか。。。
.jsのファイル名は何でも良いのですよね？.jsファイルの読み込みはしなくていいのでしょうか？
ご教示頂ければ幸いですm(_ _)m
yzさん
コメントありがとうございます。
jsのファイル名は何でも構いません。任意でOKです。
ただ、空のjsファイルを作っただけでは機能しないので、jsファイルを呼び出し（読み込み）する必要があります。
その方法ですが、仮に【jsフォルダ】の中に【example.js】というjsファイルを新規作成した場合は、functions.phpに次のように書き足せば呼び出し可能なはずです。
function my_files() {
wp_enqueue_script( ‘example-script’, get_stylesheet_directory_uri() . ‘/js/example.js’, array(‘jquery’), ‘20180104’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_files’ );
上記コードの二行目の【 exsample 】の部分をご自身で決めた任意のファイル名に書き換えればOKかと思います。
お試しください。
タイトルのロゴ位置を上方へ移動させたく調べていて、
貴サイトに辿り着きました。
先ずはタイトル位置の変更を試そうと当記事の通り試してみましたが、
上手くいきませんでした。
wp-content/themes/twentyseventeen/jsとjsフォルダを作り、
その中にabc(任意名).jsファイルを入れました。
それで反応が無かったのでコメントのyzさんへのご回答の通り、
functions.phpに
function my_files() {
wp_enqueue_script( ‘abc-script’, get_stylesheet_directory_uri() . ‘/js/abc.js’, array(‘jquery’), ‘20180104’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_files’ );
と書き足したところ、
サイト自体にアクセス出来なくなりました(「××.comページは機能していません。」と云うエラーが返されました)。
素人の質問で大変恐縮ですが、
上記で何か問題点がありましたらご指摘頂ければ幸いです。
尚、最終的にはロゴ共々一番上に持っていきたいと思っております。
何卒宜しくお願いします。
chincom-x さん
サイトにアクセス出来ないとのこと、早急に復旧したいですよね。
ひとつお尋ねしたいのですが、子テーマを作って作業されていますか？
はじめまして。
上記の通りやっているのですが、サイトにアクセスできなくなってしまいます。
子テーマのフォルダーにjsフォルダーをつくって、その中にheader-title.jsというファイル名で下記の内容を入れました。
—–
/****************************************
ヘッダーの文字を中央に固定
*****************************************/
nowDistance = function(){
// グローバルナビからwindow（画面）の上端までの距離を計測
var naviUpper = $(‘.navigation-top’).offset().top;
// 動かしたいタイトル要素の高さを取得
var titleBoxHeight = $(‘.site-branding-text’).height();
// 実際に移動させる距離を計算
var movingDistance = (naviUpper/2-titleBoxHeight/1.5);
// CSSでタイトル要素にマージンを与えて移動させる
$(‘.site-branding-text’).css({‘margin-bottom’: movingDistance + “px”});
};
// 【レスポンシブ対応】移動したい距離をリアルタイムで取得して反映させる
jQuery(function(){
nowDistance();
$(window).resize(nowDistance);
});
// 実際に移動させる距離を計算
var movingDistance = (naviUpper/2-titleBoxHeight/1.5);
—–
さらに、子テーマのfunctions.phpに下記の内容を入れました。
—–
function my_files() {
wp_enqueue_script( ‘header-title-script’, get_stylesheet_directory_uri() . ‘/js/header-title.js’, array(‘jquery’), ‘20180104’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_files’ );
—–
お手数をお掛けしますが、ご教授いただければと思います。
よろしくお願いします。
Konohanaさん
コメントありがとうございます。
サイトにアクセス出来ないとなると、functions.phpに問題があるかもしれません。
初歩的なことで、ご存知だったら恐縮ですが、functions.phpの最初の記述には付けていますか？
もちろん付けているというなら、ひとまず問題を切り分けるため、子テーマのfunctions.phpを削除してみたらどうでしょうか。それでサイトにアクセスできるようならfunctions.phpの記述に問題ありだと確定できます。
アドバイスありがとうございます。
下記の部分を外すと、サイトが見れるようになります。
もちろん、タイトルは中央には動いていません。
あと、はつけています。
お手数をお掛けしますが、よろしくお願いします。
—–
function my_files() {
wp_enqueue_script( ?header-title-script?, get_stylesheet_directory_uri() . ?/js/header-title.js?, array(?jquery?), ?20180104?, true );
}
add_action( ?wp_enqueue_scripts?, ?my_files? );
—–
Konohanaさん
どうやら「’」（クォーテーションマーク）が、全角になっているのが原因のようです。
以前、他の方のコメントに対する返信で、functions.phpのコードを載せましたが、コメント欄で「’」（クォーテーションマーク）を使うと全角に変換されてしまうようです。
きっとKonohanaさんもコピペしてお使いになったのでは無いでしょうか？
自動変換は、WordPressの仕様なのでしょうね。気づかずにご迷惑おかけして申し訳ありません。
対策として、お手数ですが header-title.js と functions.php の「’」（クォーテーションマーク）を全て半角に変換してください。念のため、スペースも削除するか半角で打ち直すと良いかと思います。
よろしくお願いいたします。
ありがとうございます！
サイトは表示されました！！！
でも、残念ながら、タイトルは中央に移動せずに、一番下に表示されてしまいます。
一番下にすきまなく表示されています。
これは何かありますでしょうか？
お手数をおかけします。
Konohanaさん
functions.phpに次のコードを書き足してみてはいかがでしょう。
// WordPress本体のjquery.jsを読み込まないでにCDNを利用する
wp_deregister_script(‘jquery’);
wp_enqueue_script( ‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’, array(), false, true );
wordpressは、デフォルトのままでもjqueryを利用できますが、少し癖があるようで上手く動かないことも珍しく無いようです。
なので、上記はwordpressデフォルトのjqueryを停止して、外部のCDNを利用するための記述です。
jqueryのCDN提供先は複数ありますが、今回はgoogleのサービスを利用しました。
なお、コードをコピペする際は、クオーテーションマークとスペースが大文字になっていないか注意してご利用ください。
できました！
本当にありがとうございますm(_ _)m
これからもカスマイズ楽しみにしています！！！
konohanaさん
こちらこそ、ありがとうございます！
そう言って頂けると本当に励みになります。
konohanaさんのおかげで、不完全な内容に気づくことが出来ました。感謝です。
記事のほうは、今後、当サイトにお越しになった皆さんにご迷惑がかからぬよう、なるべく早く修正したいと思います。
すいません、、いろいろいじっていたら、トップページのタイトルが上のほうにいってしまい、サブタイトルしか見えないくらいになってしまいました。。
元の下のほうの位置に戻したいのですが、どこが原因かわからなくなってしまいまして。。。
ひとまず元に戻す方法はありますでしょうか？
たかはしさん
コメントありがとうございます。
とりあえず元に戻すだけなら、jsファイルを削除してみてはいかがでしょうか。
それで、元の表示に戻るなら、jsに問題ありと判断できますし…
お試しください。
jsファイルは削除しましたが、、変わりません。。
実はjsファイルでうまくいかなかった為、あれこれいじってしまったのです。。
style.cssは元の仕様に戻しましたがそれでも変わらず、、
何が原因なんだろう、、、
たかはしさん
問題箇所を発見するため、手を加えた子テーマのファイル（style.cssやfunctions.phpなど）を一つずつ交互に無効化してみて、どこが悪さしてるのか特定する作業をしてみてはいかがですか？