“Twenty Fourteen” で more を快適に使おう。(WordPress theme)

LINEで送る
Pocket

WordPress には投稿や固定ページの編集欄に”more”ボタンというものがあって、これを押すと其の場所に「続きを読む→」という文字のリンクを表示してそれ以降の内容をリンク先に表示させることができます。記事の先頭からの抜粋位置を指定できるわけです。(”more”ボタンを使わない場合、編集者の意図しない位置で文章が途切れてしまいます。)

目次

  1. Twenty Fourteen で「続きを読む」をクリックすると・・・
  2. なぜ文章が切れてしまうの?
  3. 簡単な対策 (JavaScriptオフでもOK)
  4. より正確な対策(jQueryを使います。)

1. Twenty Fourteen で「続きを読む」をクリックすると・・・

WordPressのテーマ “Twenty Fourteen”(1.1) では “more” ボタンで設定した「続きを読む→」リンクを辿ると、次の画像のように続きの文章の冒頭が切れてしまうことがあるんです。

twentyfourteen-header

2. なぜ文章が切れてしまうの?

“Twenty Fourteen” はレスポンシブデザインで、スマホなど画面幅が狭いときはトップメインメニューを含むヘッダー部分が記事と一緒にスクロールし、PCなど画面幅が広くなるとブラウザ上部に固定表示となります。
そのため PC などでは固定されたヘッダー部分の下にリンク先の冒頭の文章が隠れてしまうわけです。

functions.phpに記述されているように、ヘッダー画像が設定されていないときbodyタグのクラスにmasthead-fixedが設定され、style.cssで画面幅が広いときにpositionをfixedにしています。

では、ChromeブラウザのDeveloper Toolsを使ってヘッダー部分を調べてみます。

.header-main は高さ48px

.header-main は高さ48px

.header-main は高さ48pxです。

3. 簡単な対策 (JavaScriptオフでもOK)

対策として、ヘッダー部分が固定表示となるときだけリンク先の表示を下にずらすことを考えてみます。

“Twenty Fourteen” のスタイルシートを見ると、HEADER タグの position は relative に設定されていて min-width=783px で fixed に設定されることがわかります。差分の17pxはスクロールバーの幅です。

widthが782以下のとき。

widthが782pxのとき。


widthが783pxのとき。

widthが783px以上のとき。

また、”more” ボタンを押すことでリンク先の記事に

が挿入されることを確認して、widthが783px以上のときにこのspan部分に適当なmarginを設定してみます。(style.cssをさわる場合、Twenty Fourteen のstyle.cssを直接編集するのではなく、子テーマを作ってから編集してくださいね。)
たとえば、

margin-bottomを適当に設定してみる。

margin-bottomを適当に設定してみる。


このように設定すると表示は次のようになります。

切れることなく表示されるようになりました。

切れることなく表示されるようになりました。

4. より正確な対策(jQueryを使います。)

じつは Twenty Fourteen はヘッダー部分の高さが48pxを超えた場合、ヘッダー部分を画面上部に固定表示しないように作られています。(./js/functions.jsをご参照ください。)

なので、以下は過剰な対応となるのかもしれませんが、何かのご参考にどうぞ。

サンプルコード

LINEで送る
Pocket