[[返信する]]
文字の折り返しをしたい
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
[編集]
[返信する]
[戻る]