サポート » 使い方全般 » タイトルを途中で改行するには

  • 解決済 WP_manabu

    (@wp_manabu)


    ウェッブサイトを、スマホで見た場合、
    ヘッダーにかぶさるタイトルを改行させる(2行にする)には、どのようにしたら良いでしょう。

    〇〇事務所のウェッブサイト

    を、途中で改行して、

    〇〇事務所の
    ウェッブサイト

    にしたいと思っております。

    現状、以下の記述により、
    スマホで見た場合の文字の大きさをレスポンシブにしております。

    @media (max-width: 650px) {
    .site-title{
    	font-size: 24px
     }
    }

    このへんをアレンジするのかな、とも思ったりしていますが…

    テーマは、twentyseventeenとなります。
    ご教示のほど、よろしくお願いいたします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

15件の返信を表示中 - 1 - 15件目 (全17件中)
  • こんにちは

    CSS だけでは難しいそうです。タグ(span、br など)を挿入するのはどうでしょうか。

    例:

    template-parts/header/site-branding.php テンプレートファイル:

    <?php if ( is_front_page() ) : ?>
    	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <?php else : ?>
    	<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
    <?php endif; ?>

    <?php if ( is_front_page() ) : ?>
    	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">〇〇事務所の<br />ウェッブサイト</a></h1>
    <?php else : ?>
    	<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">〇〇事務所の<br />ウェッブサイト</a></p>
    <?php endif; ?>

    CSS:

    @media screen and (min-width: 30em) {
    	.site-title br {
    		display: none;
    	}
    }
    トピック投稿者 WP_manabu

    (@wp_manabu)

    ご回答、ありがとうございます。

    うまく、いったっぽいのですが、文字化けしてしまいますー。
    エンコーディングさせると存じますが、その記述が分かりません汗)

    お手数をおかけします。もうしばらく、お付き合いいただけると幸いです。

    テーマエディター(管理画面のメニューより、[外観]-[テーマエディター])でファイルを編集すると文字化けしないと思います。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    ご回答、ありがとうございます。

    twentyseventeenですと、
    「外観」の項目は、「テーマ」「カスタマイズ」「ウィジット」「メニュー」「ヘッダー」となっていて、
    「テーマエディター」という項目が見当たりません汗)

    「カスタマイズ」の中かな、とも思ったのですけれど、やはり「テーマエディター」は見当たりません。
    twentyseventeenの場合、特別だったりしますでしょうか。

    よろしく、お願い申し上げます〜

    トピック投稿者 WP_manabu

    (@wp_manabu)

    お世話になっております。

    ネットで「twentyseventeen」関係を検索してみると、
    たしかに「外観」の中の項目は、
    「テーマ」
    「カスタマイズ」
    「ウィジット」
    「メニュー」
    「ヘッダー」
    「テーマエディター」
    の6つになっています。

    当方の場合、なぜか、「テーマエディター」が、ナイのですね〜
    「子テーマにしているから」と思い、親テーマもチェックしてみました。
    がしかし、こちらにも「テーマエディター」は見当たりません〜なぜでしょ。

    様々な要因があるようです。こちらのトピックをご確認ください。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    ご回答、ありがとうございます。
    貼っていただいたトピックを順番に見ております。

    現在のところ、@npsslさんの、以下の指摘が該当しています。

    >あと、考えられるのは、wp-config.phpに無効化設定が書き込まれている
    >プラグインエディタ、テーマエディタの無効化
    >define(‘DISALLOW_FILE_EDIT’, true);

    ただし、当方のwp-config.phpテンプレートには、
    以下のような(変更またはこの行を削除しないでください)という注意書きが記されていて、

    // BEGIN iThemes Security – 変更またはこの行を削除しないでください
    // iThemes Security Config Details: 2
    define( ‘DISALLOW_FILE_EDIT’, true );
    // ファイルエディタを無効 – セキュリティ > 設定 > WordPress の微調整 > ファイルエディタ
    // END iThemes Security – 変更またはこの行を削除しないでください

    1)ちょっと判断を迷っていたり、
    2)もし書き換える場合、define( ‘DISALLOW_FILE_EDIT’, false ); で良いのかなと思ったりしています。

    アドバイスいただけると、助かります〜

    トピック投稿者 WP_manabu

    (@wp_manabu)

    失礼しました。
    お聞きするより、まず、やってみるべし、ですね。

    define( ‘DISALLOW_FILE_EDIT’, false );にて、「外観」 >「テーマエディター」が表示されました〜

    トピック投稿者 WP_manabu

    (@wp_manabu)

    テーマエディター > assets > テーマヘッダー(header.php)のテンプレートの冒頭に、
    以下を記述しましたが、エラーが出てしまいました汗)
    @charset “UTF-8”;

    エラーメッセージ
    syntax error, unexpected ‘”UTF-8″‘ (T_CONSTANT_ENCAPSED_STRING)

    記述する場所、あるいは記述が間違ったりしていますかね。

    define( ‘DISALLOW_FILE_EDIT’, false );にて、「外観」 >「テーマエディター」が表示されました〜

    // BEGIN iThemes Security
    から
    // END iThemes Security
    は、iThemes Security プラグインが書き込んだものと思われます。ここを書き換えると、プラグインの設定と不整合が起きる可能性があります。プラグインの設定に該当する設定項目があると思いますので、そちらで設定された方がいいかと思います。

    @charset “UTF-8”;

    header.php は PHP ファイルなので不要ではないでしょうか。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    …そうですよね、スタイルシートに書くべき記述でした。

    というわけで、テーマエディター > スタイルシート(style.css)に
    @charset “UTF-8”;
    を記述し、ファイルを「更新」しようとしましたが、
    またもエラー表示が。それも、かなりキツめのメッセージです汗)

    >このファイルを更新する前に1個のエラーを修正する必要があります。
    >サイトを壊してしまうかもしれませんが、それでもアップデートしますか ?

    トピック投稿者 WP_manabu

    (@wp_manabu)

    これは推測というレベルさえ行かない、当てずっぽうなのですが…

    1)ヘッダーにかかる当該タイトルを、Chromeの「検証」にて確かめてみると、
    <h1 class = “site-title”> </h1>となっています。

    2)サーバーより、WordPressをチェックしてみますと…
    wp-admin/cssのディレクトリーの中に、たくさんのcssのテンプレート群がある。

    これを糸口に、どこかのテンプレートに、何かの記述をすれば良いのかな、と思ったりしております〜

    変更するファイルは、template-parts/header/site-branding.php だけです。他のファイルを変更する必要はありません。CSS はカスタマイズの [追加 CSS] に追加してみてください。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    ご回答、ありがとうございます。

    1)template-parts/header/site-branding.php 内の記述の変更、
    2)「追加CSS」への追記

    やってます〜

    うまく改行できてるっぽいのですが、なぜか文字が化けてしまうんです〜

    このファイルを更新する前に1個のエラーを修正する必要があります。

    //以下5行、モバイルのヘッダータイトルを改行させるためのコード(cssへの記述と連動)

    <?php //以下5行、モバイルのヘッダータイトルを改行させるためのコード(cssへの記述と連動) ?>

15件の返信を表示中 - 1 - 15件目 (全17件中)
  • トピック「タイトルを途中で改行するには」には新たに返信することはできません。