タグ・デザイン掲示板

[

携帯でもPCでも小説をLINE風に見せる方法
by ジャケン

2016-02-25 14:40
"LINE風小説"などと検索しても思うようなスレがなかったので質問させて頂きます。似たようなスレがあれば誘導と削除勧告お願い致します。

題名どおり、ナノさんの小説機能でLINE風の小説を作っています。
そっくり真似をする訳ではなく、画面の右と左から文章が出てくるような感じにしたくて、本文入力にHTMLタグメーカーの<div style="text-align:right" align="right">文章</div>だけをを使って書いていました。(SNSアプリLINEの吹き出しが無い感じです)

しかし、これだとPCで見た時に右の文章が右に寄り過ぎていて、LINE風に見えなくなってしまいました。
PC画面の中央に寄せて、それでも右と左から文章が出てくるような感じにしたいです。(PCのナノログイン前のページのような。分かりにくい表現でごめんなさい)

必要あるかわかりませんが、

□HEADタグ
<style type="text/css">
body,td {
font-size:72%;
font-family:メイリオ,Verdana;
line-height:25px;
letter-spacing:3px;
padding:0px;
margin:0px;
scrollbar-face-color:#99cccc;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-highlight-color:#ffffff;
padding:10px;
margin:10px;
}</pc>

div#bg{
background-color:#99cccc;
width:500px;
<pc>height:100px;</pc>
<nopc>height:60px;</nopc>
margin:0px;
padding:10px;}
a{text-decoration:none;}

a:hover{
border-bottom:dotted #99cccc 1px;}
</style>

拙い文章力で、何をしたいか伝わらなければ申し訳ありません。
しかし、今困っていますので、ぜひ返信をくださると本当にありがたいです。

ezweb
[編集]

by と

2016-02-25 15:20
全体レイアウトと文章画面レイアウトの内容もこちらへ書き出しお願いします

pc
[編集]

by 匿名

2016-02-25 16:15
＞PC画面の中央に寄せて

センタリング（サイト全体を中央配置）だと思うので、添付しておきますね。
「pc 中央」で検索。（次回はこのようなキーワードで検索してみてください。）
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=1939&viewType=thread

pc
[編集]

by ジャケン

2016-02-27 19:27
>>と様

□全体レイアウト
<pc><font size="3"></pc><nopc><font size="2"></nopc><nopc><font size="2"></nopc><pc><font size="3"></pc><pc><font size="3"></pc><nopc><font size="2"></nopc><div style="margin:15px;">#novel#<pc></font></pc><nopc></font></nopc><nopc></font></nopc><pc></font></pc>

□文章レイアウト
<div align="right"><font size="4"><font color=#99CCCC></font></font></div><font size="1">
<span style="line-height:20px;">#text#
<div style="text-align:right" align="right"></div>

情報が足りておらずすみませんでした。

>>匿名様

添付ありがとうございます。

<pc_only>
body {
width :420px ;
line-height:2;
margin:0 auto;
padding: 0;
}
</pc_only>

とし、DOCTYPE宣言に

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

と入力したところ、目的の表示になりました!!
ご回答ありがとうございました。

pc
[編集]

by 匿名

2016-03-05 14:23
スレ主さんがまだ見てるといいんですが…
重複が多いので、修正しちゃいますね。

□全体レイアウト
#novel#

□文章レイアウト
<div style="text-align:right" align="right">
<font size="4" color="#99CCCC">タイトル</font>
</div>
#text#
<div class="clear"></div>

□HEAD
<style type="text/css">
<pc_only>
body {
width: 600px;
margin:0 auto;
padding: 0;
font-family: "メイリオ",Verdana;
}
</pc_only>
body {
font-size: 88.8%;
line-height: 1.5;
}

.left {
float: left;
clear: both;
text-align: left;
max-width: 500px;
margin: 10px 20% 10px 10px;
padding: 10px;
background: #fff;
border: 1px solid #777;
border-radius: 15px;
border-bottom-left-radius: 0px;
}
.right{
float: right;
text-align: right;
max-width: 500px;
margin: 10px 10px 10px 20%;
padding: 10px;
background: #85e249;
border: 1px solid #777;
border-radius: 15px;
border-bottom-right-radius: 0px;
}
.clear{
clear: both;
}
</style>

文章ページ本文で
<div class="right">
右側寄せ文章
</div>
<div class="left">
左側寄せ文章
</div>
とすると、左右にボックスができます。わかりやすいように「background: 色コード;（背景色）」を記述しているので不要なら削除してください。

それっぽかったので回り込みさせてます。回り込み解除用の<div class="clear"></div>は消さないでください。

吹き出しはご希望になかったので、簡単ななんちゃって吹き出し風になってます。不要な場合は「border-radius: 15px;border-bottom-right-radius: 0px;」を削除すると角丸じゃなくなります。

文章ページ本文で<div>または<p>を使うので、全体レイアウトで<font>#novel#</font>とすると、<font><div></div></font>（インライン要素の中にブロック要素）になるのでよくないです。

pc
[編集]

by ジャケン

2016-03-16 23:36
>>匿名様

修正ありがとうございます！
お返事遅くなり大変申し訳ありません。
確かに重複が多かったですね。教えて頂いた記述方式はすっきりしていて分かりやすいです。もっとタグを勉強したいと思います。

なんちゃって吹き出しも使って見ました！LINEらしさが増して前より良い小説になったと思います。

丁寧にお答え頂いて本当にありがとうございました。

このスレッドがまた誰かのお役に立てると嬉しいです。

ezweb
[編集]

[