[[返信する]]
文字の折り返しをしたい
by とくめい
2018-09-06 10:55
似たようなトピがなかったので、新規に作成させていただきました。

現在小説サイトを2つもっております。
そのうち1つはテンプレを使用し、一定の文字数で改行され見やすいのですが、もう1つの方も同じようにしたく思います。
HEAD内を見てみたのですが、どの部分をコピーすればよいのかよく分かりません。
よろしければお知恵を貸してください。

以下HEAD内のタグです。

一定改行される方↓

<style type="text/css">
* { padding : 0px ; margin : 0px ; }
html,body,td {
font-family:'Century Gothic',Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HGゴシックM","Meiryo","メイリオ",sans-serif;
line-height: 1.5;
letter-spacing: 2px;}

a {
text-decoration: none;
border-bottom: 1px dashed #000000;}


h1{
display: inline;
text-align:left;
color:#c85179;
padding:4px 6px;
}
.desc {
margin:5px 0 0 8px;
color:#999;
font-size:0.7em; //通常のpに対して70%サイズ
}
.counter {
display: inline}

ul li {
display: inline;
}

ul li:after {
margin-left: 3px;
}


}
#site-box {
width:px;
margin : 10px auto
}
#a-box {
padding : 20px 0 0 0px;
margin : 0px 0 0 18px;
width: px;
font-size: px;
}
#c-box {
clear: both;
width: px;
background-color : #c85179;
padding : 0px;
margin : 0px;
color:#fdeff2
}

<pc_only>
br {
letter-spacing: normal;}

h1{
display: inline;
text-align:left;
color:#c85179;
padding:4px 6px;
}
.counter {
display: inline}

#site-box {
width:700px;
margin : 10px auto
}
#a-box {
padding : 20px 0 0 0px;
margin : 0px 0 0 180px;
width: 700px;
font-size: px;
}
#c-box {
clear: both;
width: px;
background-color : #c85179;
padding : 0px;
margin : 0px;
color:#fdeff2
}
a:hover{
position:relative;
top: 1px;
left: 1px;}
</pc_only>
</style>


今回折り返しをしたい方↓

<style type="text/css">

body {/*=ベース=*/
text-align: center;
margin: 0;
padding: 0;
}

a {/*=リンク_総合=*/
text-decoration: none;
}

a:hover {/*=リンク_マウスオーバー時=*/
color: #ffffff;
position: relative;
top: 1px;
left: 1px;
}

p {
margin: 0;
}

#layout {/*=枠=*/
margin: 5px ;/*外側_余白*/
padding-top: 2em !important;/*内側_上余白*/
padding-bottom: 1em !important;/*内側_下余白*/
background-color: #ffffff;/*背景色*/
border: 1px solid #cccccc;/*枠線*/
font-family: 'メイリオ', 'Meiryo', sans-serif;/*フォント*/
color: #000000;/*文字色*/
}

#layout a {
color: #000000;/*枠内_リンク色*/
}

p.title {/*=全体のタイトル=*/
margin: 1em 0;/*余白(上下 左右)*/
font-size: large;/*文字サイズ*/
}


ul.list {/*=リスト=*/
margin: 2em 0 1em;/*余白(上 左右 下)*/
padding: 0;
list-style: none;
}

ul.list li.none ,
ul.list br {
display: none;
}

ul.list li.set {/*=『設定』へのリンク=*/
margin: 2em 0 1em !important;/*余白(上 左右 下)*/
}

<nopc>
/* ==ガラケー向け== */

#layout{
padding: 25px;/*枠内_余白(左右)*/
}

</nopc><pc>
/* ==pc,sp向け== */

#layout{
margin-top: 2em;/*枠外_上余白*/
margin-bottom: 1em;/*枠外_下余白*/
}


@media only screen and (min-width: 332px) {
/*===
ブラウザ幅332px( 下記の最低幅 + 枠内外左右余白合計 + 枠線太さ左右分 )以上でリスト部分を5列に
===*/

ul.list {
width: 25%;/*pc向け幅*/
min-width: 300px;/*最低幅*/
margin-right: auto;
margin-left: auto;
text-align: left;
}

ul.list li {
display: inline-block;
margin-top: 15;/*行毎の余白*/
width: 20%;/*5列で100%*/
text-align: center;
}

ul.list li.ext {
margin-top: 15;/*あとがき_上部余白*/
}

ul.list li.block {
display: block;
width: auto;
}

}
</pc>

</style>

よろしくお願いします。

この他、文章画面レイアウトなども必要でしたら提示します。
pc
[編集]
by 774
2018-09-06 17:00
#layout {/*=枠=*/ 下を以下に変更で多分できると思いますよ。数値はお好みで。

margin: 5px ;/*外側_余白*/

max-width: ○px ;/*最大幅*/
margin: 5px auto ;/*外側_余白*/


解決しない場合はレイアウトの提示をお願いします。(CSSはHTMLと対応してるのでHEAD中身だけじゃわかりません)


参考にされたテンプレートですが数箇所「width: px;」という記述があります。数値無しだと問題あるため行ごとの削除をお勧めします。
pc
[編集]
by とくめい
2018-09-07 10:49
774様、ご返信ありがとうございます。

試してみたところ、目次ページのみ幅が狭くなっただけで、一定文字数での改行もされませんでした。
目次ページはそのままで、文章画面のみ一定文字数で改行されるようにしたいです。

以下全体レイアウト及び文章画面レイアウトです。

全体レイアウト

<div id="layout">#novel#</div>


文章画面レイアウト

<div class="all"><div align="left">#title#<br /><hr color="#DDDDDD" size="1" /><br>#text#<br /></div><br /><div align="center"><font color="#DDDDDD">[ #pageNum#/#pageCount# ]</font></div><br /><center>[ #prev_Prev_Prev# ] [ #next_Next_Next# ]<br />[<a href="#pageList_url#">Contents</a>]<br />[<a href="#bkm_url#">しおりを挟む</a>]</div></div>

よろしくお願いします。
pc
[編集]
by 774
2018-09-08 02:58
それなら以下を追加で多分大丈夫です。
.all {
max-width: [字数]em;/*最大幅*/
margin: 0 auto;/*センタリング*/
word-break: break-all;/*半角英字の折り返し*/
text-align: left;/*字寄せ*/
}


・各指定詳細は『[:前の単語] css』で検索、調整してください。

・一定字数との事なので最大幅の単位をemにしています。
こちらも『単位 css』で検索を。

・文章画面の<div align="left">も、上記でまとめて指定したので、対応する閉じタグと一緒に削除しちゃってください。

・閉じタグのない<center>と開始タグのない</div>があります。修正をお勧めします。
└htmlに慣れていないようでしたら、ホムペ設定にて「改行を<br>に変換:しない」への変更をお勧めします。ページレイアウトに関わらず改行できるので編集ページが見やすくなる→ミスしにくくなります。

・webページ作成関連は殆ど『やりたいこと [css]or[html]or[javascript]or[jquery]』で検索すれば出ます。今後のご参考までに。
pc
[編集]
by とくめい
2018-09-20 19:58
774様、お返事が大変遅くなり申し訳ありません。

ご提示いただいたものを追加し、左寄せのdivタグも削除してみましたが、ただ文章が中央揃え(?)になっただけで、左寄せ及び改行はされませんでした。
数値を変えてみたりもしたのですが、変わりません。

挿入する場所が悪かったのでしょうか。

また、自分で調べていじってみましたが結果は変わらずでした。
お手数ですが、またお知恵をお貸しください。よろしくお願いします。
pc
[編集]
by 774
2018-09-21 14:27
すみません、自環境(android,ios,windowsの主要ブラウザ数種)からだと問題なく表示されているのでお手上げです。
どのように編集したかもわかりませんので固有名詞とIDだけ伏せてソース表示(方法要検索)、提示してください。
pc
[編集]
by とくめい
2018-09-21 19:17
774様、ご返信ありがとうございます。

以下、ソースです



<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" />

<style type="text/css">

body {/*=ベース=*/
text-align: center;
margin: 0;
padding: 0;
}

a {/*=リンク_総合=*/
text-decoration: none;
}

a:hover {/*=リンク_マウスオーバー時=*/
color: #ffffff;
position: relative;
top: 1px;
left: 1px;
}

p {
margin: 0;
}

#layout {/*=枠=*/
margin: 5px ;/*外側_余白*/
padding-top: 2em !important;/*内側_上余白*/
padding-bottom: 1em !important;/*内側_下余白*/
background-color: #ffffff;/*背景色*/
border: 1px solid #cccccc;/*枠線*/
font-family: 'メイリオ', 'Meiryo', sans-serif;/*フォント*/
color: #000000;/*文字色*/
}

#layout a {
color: #000000;/*枠内_リンク色*/
}

p.title {/*=全体のタイトル=*/
margin: 1em 0;/*余白(上下 左右)*/
font-size: large;/*文字サイズ*/
}


ul.list {/*=リスト=*/
margin: 2em 0 1em;/*余白(上 左右 下)*/
padding: 0;
list-style: none;
}

ul.list li.none ,
ul.list br {
display: none;
}

ul.list li.set {/*=『設定』へのリンク=*/
margin: 2em 0 1em !important;/*余白(上 左右 下)*/
}

.all {
max-width: [5]em;/*最大幅*/
margin: 0 auto;/*センタリング*/
word-break: break-all;/*半角英字の折り返し*/
text-align: left;/*字寄せ*/
}


/* ==pc,sp向け== */

#layout{
margin-top: 2em;/*枠外_上余白*/
margin-bottom: 1em;/*枠外_下余白*/
}


@media only screen and (min-width: 332px) {
/*===
ブラウザ幅332px( 下記の最低幅 + 枠内外左右余白合計 + 枠線太さ左右分 )以上でリスト部分を5列に
===*/

ul.list {
width: 25%;/*pc向け幅*/
min-width: 300px;/*最低幅*/
margin-right: auto;
margin-left: auto;
text-align: left;
}

ul.list li {
display: inline-block;
margin-top: 15;/*行毎の余白*/
width: 20%;/*5列で100%*/
text-align: center;
}

ul.list li.ext {
margin-top: 15;/*あとがき_上部余白*/
}

ul.list li.block {
display: block;
width: auto;
}

}


</style><title>タイトル | ナノ</title>
<style></style></head>
<body bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#000000" alink="#000000">
<div style="background-color: #dc143c; text-align:center;"><font color="#FFFFFF" >現在一時休止中です。この画面は管理者にのみ表示されています。</font></div>


<div id="layout"><div class="all">タイトル<br /><hr color="#DDDDDD" size="1" /><br>


小説本文


<br /><br /><center><font color="#DDDDDD">[ 11/98 ]</font></center><br /></div><div align="center">[ <a href="/ID/novel/1/14/" accesskey="*">Prev</a> ] [ <a href="/ID/novel/1/16/" accesskey="#">Next</a> ]<br />[<a href="/ID/novel/1/?ParentDataID=13">Contents</a>]<br />[<a href="/ID/novel/1/bookmark?DataID=15&code=a188deb4170cc4b51d866e139553fa77">しおりを挟む</a>]</div></div>


<!-- -->


<div align="center" ><div style="margin:10px 0"><a href="https://d-love.net/?utm_source=nanos&utm_medium=text&utm_campaign=nanos_footer_ad">アクセス制限機能充実<br />夢小説のDLove</a></div></div>
<div align="center">
<a href="http://nanos.jp"><span style="color:#ffffff">- ナノ -</span></a></div>

</body>
</html>

もう一度ちゃんと確認してみたところ、左寄せにはなっていましたが、改行はされていません。(数値を100、10、5といじってみました)

何がいけないのでしょうか。
何度もすみません、よろしくお願いします。

pc
[編集]
by 774
2018-09-21 20:50
あーすみません。em前の[]外してください。
編集箇所分かりやすくするため囲ってたんですけど余計でしたね。
pc
[編集]
by とくめい
2018-09-22 11:24
774様、どうもありがとうございます。
左寄せかどうかは別として、思っていたようになりました。

何度もご迷惑をおかけして申し訳ありませんでした。
とても助かりました。
本当にありがとうございました。
pc
[編集]

[返信する]
[戻る]
×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -