| カテゴリ | デザイン・CSS・スキン |
|---|
| サマリ | タイトルの途中で改行する |
|---|
| バージョン | 1.5.4 |
|---|
| 投稿者 | 砂肝 |
|---|
| 状態 | 質問 |
|---|
| 投稿日 | |
|---|
長いタイトル（一番上に表示されている大きな文字）を改行したいです。
このページですと 質問箱/5453 の部分になります。
特にトップページのタイトルが長くなるため改行したく、以下試しましたができませんでした。
①ページ名の変更にて
&br;を入力
→「エラー:リネーム後のページ名が正しくありません」
~ / <br> / #br / を入力
→タイトル内に~ / <br> / #br / が表示される
②pukiwiki.ini.phpにて$defaultpage=‘○○’;//top/default pageに
①と同じく5パターンを入力
→タイトル内に表示される
以上です。ご教示よろしくお願いします。
- ごめんなさい。ここもwiki内ということを失念していました。 ①ページ名の変更にて ●＆ｂｒ；を入力 →「エラー:リネーム後のページ名が正しくありません」 ● 〜 / ＜ｂｒ＞ / ＃ｂｒ / ＆＃13；＆＃10；を入力 →タイトル内に表示される ②pukiwiki.ini.phpにて$defaultpage=‘○○’;//top/default pageに ●①と同じく5パターンを入力 →タイトル内に表示される です。ご迷惑おかけしました。 -- 砂肝
- 質問文を少し整形しました -- D
- ページ名というのはファイル名なので改行はできないのではないかと思います。 -- D
- どういう環境で確認されているのかわかりませんが、デフォルトの状態であるのならPukiwikiは幅可変です。
このためPCでブラウザのWindowモードで開いている場合、長いページ名であっても開いている幅で折り返されるはずです。
また、幅固定にしている場合も同様だと思います。
幅可変の状態でブラウザの幅を縮めてもページ名が折り返されないのであれば、その下にあるURL表示のせいであろうと思われます。
参考：Q. ページのタイトルの下にあるURLを表示させたくない
- サイト名も表示したいということなら、ページ名に入れるのではなく、pukiwiki.ini.php内でサイトのタイトルを設定した上で、skin/pukiwiki.skin.phpで任意の場所に<?php echo $page_title ?>を呼び出したほうがいいのではないでしょうか。
- 今はスマートフォンであったりPCでもWindows以外を使っていたりと、閲覧環境も様々です。このため表示幅が閲覧機器によって異なったり、インストールされているフォントが異なったりします。
フォントというのはどの端末でも同じものが入っているわけではありません。サイト側で指定したものがあってもそれがインストールされていない環境ではブラウザのデフォルトのもので表示されます。
フォントというのは縦長であったり横長であったりということもあるので、どのフォントで見ても一定幅に同じだけの文字数が入るとは限りません。このため自分が見てちょうどいいと思ったところで改行しても、他の人にとっては変なところでぶちぶちと改行されているように見えてしまうことがあります。
自分一人でしか利用しないサイトなら別ですが、他の人にも見てもらいたいのなら他人の閲覧環境にも多少は配慮したほうがいいと思います。
- こんにちは。質問文の整形とご返答、ありがとうございます。とても助かります。 ページ名は改行できないんですね。。 編集中のwikiはスマートフォンを主ターゲットに、かつ他デバイスでも大きく崩れないようiPad・iPadでのpcブラウザ確認（≒mac pc）・Windowspcで随時確認しています。 その中で、スマートフォンだと、トップページのタイトルが分節の途中で幅いっぱいになり自動改行されてしまうため、任意の箇所で改行できればな…と思った次第です。 （文字を小さくしてスマホ中に一行で表示すると他デバイスで見づらい） タイトル表示を消して、同内容を本文中に表示させるという認識で間違いないでしょうか？やってみます！（もし間違っていてここの質問文をご確認でしたらご指摘いただけるとありがたいです） -- 砂肝
- そもそもファイル名をそこまで長くしないといけない理由がわからないので、サイト名も入れたいのかなと想像しただけです。そういう理由ではないのなら、ページ名を短くするほうがいいのではないでしょうか。 -- D
- まず、「ページ名」に改行コードを含むことはできません(PukiWikiの仕様)。表示時に改行することは可能です。タイトルはdev:BugTrack/2431のためにJavaScriptで構成されていますのでそのロジックが終わった後にJavaScriptで改行するのが簡単だと思います。ロジックが固定でよければ、以下は、ページロードの100msec後に、ページ名の最後の"/"の後で改行する方法です。(skin/pukiwiki.skin.phpにこの<script>のコードを追加します) -- umorigu
<script>
window.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var titleE = document.querySelector('#header h1.title');
var anchors = titleE.querySelectorAll('a');
for (var i = 0; i < anchors.length; i++) {
var a = anchors[i];
if (i > 0 && i == anchors.length - 1) {
var br = document.createElement('br');
a.parentNode.insertBefore(br, a);
}
console.log('[log]==' + a.textContent + '==');
}
}, 100);
});
</script>
- これを応用すると、改行だけでなくJavaScriptで可能な操作であれば何でもできます。("/"より前の文字を小さくするとか) -- umorigu
- もしページ単位で改行位置を変えたい(個別に指定したい)ということであれば、そういう動作（ページ名のどこで改行するかをページ内で指定し、それに合わせたJavaScriptコードまたはJavaScriptから読み取るデータを出力）をするプラグインを自分で作ることになります。ちょっと大変だと思います。 -- umorigu
- skin/pukiwiki.css の末尾に下記の1行を加えると、タイトルの表示幅が詰まったときに文節の途中ではなく、空白や句読点といった区切り文字のところでのみ改行するようになります（効かなければブラウザキャッシュをクリア）。-- mt
div#header h1.title a[title] {word-break:keep-all}
ただし、逆に区切り文字でしか改行しないため、区切り文字を一切含まない長いタイトルでは改行しないまま表示幅をはみ出してしまいます。そのような場合は、下記の矢印の間にある「ゼロ幅スペース」（見た目には隙間のない空白文字）をコピペして、改行させたい箇所に挿入してください（UTF-8版のみ有効）。この空白コードが含まれるぶんURLは若干汚くなりますが、仮に改行コードを入れても同じことが起こるのでご容赦ください。
→← （ゼロ幅スペース：左右の矢印ごとコピペして、矢印だけを消してください。見えませんが間に空白文字があります）
![[PukiWiki-official]](image/pukiwiki-official.png "[PukiWiki-official]")
