タグ・デザイン掲示板

[

特定の文字に下線を引きたいのですが・・・
by ゆう

2015-08-11 17:57
一応検索してみたのですが、見当たらなかったので質問させて頂きます。
特定の文字に下線(破線)を引き、文字と下線の間にも間隔をあけたいと思っています。ここまでは調べて何とかなったのですが、文字の下線の長さを変更する事って出来ますか？
今のままだと下線の長さは文字と同じ長さなので、下線の長さだけを変えたいのです。
もし分かる方が居ましたら教えて下さいm(__)m

pc
[編集]

by T

2015-08-11 22:51
例えばこんな感じですか
<span style="border-bottom:1px dashed;padding:5px 20px;">文字</span>

pc
[編集]

by ゆう

2015-08-11 23:09
現在テキスト本文にこのような感じで書いています。

<span style="border-bottom:dashed #f4b3c2 1px;padding-bottom:3px;">文字</span>

これだと本文に反映されるのが、

文字
------

このような文字と同じ長さの破線なので、これを

文字
---------------

こんな感じで破線だけを長くする方法を教えてほしいのです。
伝え方が下手ですみません。

pc
[編集]

by ゆう

2015-08-11 23:23
T様
T様に教えて頂いたやり方でやったところ出来ました！ありがとうございますm(__)m
ただもう一つ質問なのですが>_<
小説の本文タイトルで今のを使用しているのですが、ページによってはタイトルを書かないページもありまして、そのタイトルを書かないページに何故か破線だけ現れてしまいます。タイトルを書かないページの破線を消す事はできませんか？

pc
[編集]

by T

2015-08-11 23:56
何が原因かわからないので使用しているタグとHEAD内の記述を書き出していただけませんか？

pc
[編集]

by ゆう

2015-08-12 00:16
本文に使用しているのは、

<div style="margin-left:1.0em; margin-right:1.0em; margin-top:40px; margin-bottom:25px; line-height:1.8; letter-spacing:1px;"><center><span style="border-bottom:dashed #fed2af 1px;padding:8px 90px;"><font size="5" color="8a8a8a">#title#</font></span></center>

#text#

<div align="right">#prev_←_←# | #next_→_→#</div></div>

で、HEAD内は、

<link href='http://fonts.googleapis.com/css?family=Delius' rel='stylesheet' type='text/css'>
<style type="text/css">
body{font-family: 'Delius', メイリオ;
line-height: 1.5;
letter-spacing: 1px;
font-size: 13px;
text-align: ;}

br {
letter-spacing: normal;}

a {
<pc_only>
background-color:;
</pc_only>
<mobile>
background-color: ;
</mobile>
margin: 1px;
text-decoration: underline;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;}

a:hover {
background-color:;}

#all {
<mobile>
margin: 40px 10px 10px 10px;
</mobile>
<pc_only>
width: 500px;
margin: 5% auto 5% auto;
</pc_only>}

h1 {
<mobile>
margin: 0 30px 0 30px;
</mobile>
<pc_only>
width: 200px;
margin: 0 auto 0 auto;
</pc_only>
letter-spacing: 2.5px;
font-size: 22px;
font-weight: normal;
text-transform: uppercase;
border-bottom: dashed 1px #d2b48c;}

p.text1 {
margin: 20px 5px 30px 5px;}

p.text2 {
margin: 30px 15px 30px 20px;
line-height: 2.0;
letter-spacing: 0px;
font-size: 12px;
text-align: left;}

input {
border: solid 1px #ccc;
color: ;
padding: 3px 10px;
font-family: 'メイリオ', sans-serif;
background-color:;}
</style>

という感じになります。まだ始めたばかりの初心者なので他ユーザー様のテンプレートを使用して作っていますが、どこをどう直したらいいのか全く分かりません（－＿－；）

pc
[編集]

by あ

2015-08-12 01:00
・顔文字は消してください友達ではありません
・小説機能を使用していると仮定して、文章画面レイアウトに記述している物を取って全ページ(本文)に手打ちすることでお望みの形になると思うのですがどうでしょうか？

pc
[編集]

by ゆう

2015-08-12 07:28
小説機能を使用しています。
すみませんが言われている意味がよくわかりません・・・初心者でも分かるようにご説明いただけると幸いです。理解力不足ですみません。

pc
[編集]

by あ

2015-08-12 12:54
ナノの基本なことはサポートを見てください
他人任せにしすぎでは？
それと初心者と顔文字の使用は関係ありませんよ
それに初心者さんは公式テンプレの使用を推奨されています

質問の方ですが、
文章画面レイアウトに入れている#title#とそれを装飾しているタグ（h1など）を削除し、毎回ページを作成する時にタイトルを入れることで要望のようなことが出来ます。

pc
[編集]

by T

2015-08-12 15:34
タイトルの左右に開けた90pxぶん、下線が残るみたいです。特定のページだけこれを消す方法がちょっと思いつきませんでした。

■文章画面レイアウトを下記に変更
<div style="margin-left:1.0em; margin-right:1.0em; margin-top:40px; margin-bottom:25px; line-height:1.8; letter-spacing:1px;"><div class="daimeiwrap"><span class="daimei" #title#</span></div>

#text#

<div align="right">#prev_←_←# | #next_→_→#</div></div>

■HEAD欄に下記CSSを追加
<style type="text/css">
.daimeiwrap{text-align:center;}

.daimei{
color: #8a8a8a;
font-size: x-large;
border-bottom: dashed #fed2af 1px;
padding: 8px 90px;}
</style>

■第一話(タイトル付きの小説ページ)
【タイトル】<span>小説タイトル</span>
【一覧画面でのタイトルの左】
【一覧画面でのタイトルの右】
※一覧画面(目次)で、本来第二話(タイトルなしの小説)がくる場所に一行分の行間ができるので、第一話と第二話の間に入る改行タグ<br />をコメントアウト(→)で消しています。

これで一応ご希望の形にはなると思いますが、タグの使い方は正しくありませんので他ブラウザでの動作の保証はしません。（確認IE11。全体レイアウト表紙画面レイアウト目次画面レイアウトは「最低限のタグのみ」で作成）それにこの状態で小説を書き続けたとしても、後々レイアウトの変更などを行う場合にタグの書きかえなどで大変な思いをする羽目になると思うのであまりお勧めはできません…。小説機能やタグをある程度使いこなせる自信がなければ、あ様のおっしゃるとおり各小説本文の中にひとつひとつタイトルを入れて書いた方が安全だし簡単です。
どなたか他にいい方法をご存じでしたら私にもご教授ください。

pc
[編集]

by ゆう

2015-08-13 00:31
分かりました。それでは本文に直接書く方法で書いていきたいと思います。ご丁寧な解説どうもありがとうございました。

pc
[編集]

[＃次]

[