タグ・デザイン掲示板

[

デザインが崩れる
by 友香

2016-06-24 00:52
LINE風に吹き出しをつけて登場人物同士が会話しているようにみせたいのですが、上手く設定できません。いろいろ調べたのですがどうもわからないので教えて頂きたいです。
小説ページはテンプレ使用で、ネットで調べたLINE風吹き出しをHEAD/HTML詳細に追加でいれたのですが、デザインに収まらず崩れてしまいます。
どうすれば良いでしょうか？

HEAD/HTMLはこうなっています。

<META NAME="ROBOTS" CONTENT="NOINDEX">
<META NAME="ROBOTS" CONTENT="NOFOLLOW">
<META NAME="ROBOTS" CONTENT="NOARCHIVE">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<META NAME="ROBOTS" CONTENT="NONE">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<meta name="robots" content="noarchive">
<meta name="robots" content="noindex,nofollow,noarchive">
<meta name="robots" content="none">
<META NAME="GOOGLEBOT" CONTENT="NOINDEX">
<META NAME="GOOGLEBOT" CONTENT="NOFOLLOW">
<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">
<META NAME="GOOGLEBOT" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<MATA NAME="GOOGLEBOT" CONTENT="NONE">
<meta name="googlebot" content="noindex">
<meta name="googlebot" content="nofollow">
<meta name="googlebot" content="noarchive">
<meta name="googlebot" content="noindex,nofollow,noarchive">
<meta name="googlebot" content="none">
<META NAME="LIBWWW-PERL" CONTENT="NOINDEX">
<META NAME="LIBWWW-PERL" CONTENT="NOFOLLOW">
<META NAME="LIBWWW-PERL" CONTENT="NOARCHIVE">
<META NAME="LIBWWW-PERL" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<META NAME="LIBWWW-PERL" CONTENT="NONE">
<meta name="libwww-perl" content="noindex">
<meta name="libwww-perl" content="nofollow">
<meta name="libwww-perl" content="noarchive">
<meta name="libwww-perl" content="noindex,nofollow,noarchive">
<meta name="libwww-perl" content="none">

<pc_only><style type="text/css"></style></pc_only>
<smartphone><style type="text/css"></style></smartphone>
<nopc><style type="text/css">
body{
text-align:left;
line-height:105%;
letter-spacing:1px;
font-size:82%;}

.top{
padding:2% 5%;
font-size:120%;
letter-spacing:2px;}

.main{
margin:1% 5%;}

.midashi{
margin:0% 0% 2% 0%;
font-family:Arial;
font-size:90%;}

.line01{
border-bottom:dashed #999999 1px;
margin:0% 0% 2% 0%;
letter-spacing:1px;}

.line02{
border-top:dashed #999999 1px;
border-bottom:dashed #999999 1px;
margin:0% 0% 2% 0%;
letter-spacing:1px;}

span.line{
padding:0.1em 0.1em;
border-bottom:dashed #bbbbbb 1px;}

span.subhead{
padding:0.1em 2.0em 0.1em 0.8em;
margin:2% 0%;
background-color:#000000;
color:#ffffff;}

h1{
text-align:right;
padding:1% 0% 0% 0%;
margin:0% 0% 2% 0%;
font-size:100%;
font-weight:normal;
border-top:double #cccccc 3px;}

a{
text-decoration:none;
border-bottom:dotted 1px #000000;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#cccccc;}

input,textarea,select,option{
color:#555555;
background-image:none;
background-color:#ffffff;
border:solid 1px #cccccc;}
</style></nopc>

長々と申し訳ないですが、宜しくお願い致します。

pc
[編集]

by 友香

2016-06-24 00:54
追加で入れたい吹き出しの部分です。

どこに追加するのが一番良いんでしょうか？

/*******************************
* 左からの吹き出し
********************************/
.left_balloon {
position: relative;
background: #fff;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-right: 20%;
clear: both;
max-width: 500px;
float: left;
}
.left_balloon:after,
.left_balloon:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.left_balloon:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 7px;
margin-top: -7px;
}
.left_balloon:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000;
border-width: 8px;
margin-top: -8px;
}

/*******************************
* 右からの吹き出し
********************************/
.right_balloon {
position: relative;
background: #85e249;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-left: 20%;
clear: both;
max-width: 500px;
float: right;
}
.right_balloon:after,
.right_balloon:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.right_balloon:after {
border-color: rgba(133, 226, 73, 0);
border-left-color: #85e249;
border-width: 7px;
margin-top: -7px;
}
.right_balloon:before {
border-color: rgba(119, 119, 119, 0);
border-left-color: #777;
border-width: 8px;
margin-top: -8px;
}

/*******************************
* 割り込みを解除
********************************/
.clear_balloon{
clear: both;
}

pc
[編集]

by 匿名

2016-06-24 19:17
robots はすべてのクローラー。
noneは noindex,nofollow　と同じ。

以上のことは大手検索エンジンにて調べてみてください。検索避けが（大小文字含め）もの凄く重複してます。
ヤ○ーエンジンは一番上の一つ以外読まないらしいので、<META NAME="ROBOTS" CONTENT="NOINDEX">が一番目だと「follow,archive」の状態です。

検索避けは↓を一番上に一つのほうがいいです。
<meta name="robots" content="noindex,nofollow,noarchive,noimageindex">

がっちりしたいなら↓からそれぞれ必要なのを指定するといいです。
noindex, nofollow, nositelinkssearchbox, notranslate, noarchive, nocache, nosnippet, noimageindex, noodp, unavailable_after

<meta name="robots" content="noindex,nofollow,noarchive">だけでもハ○ナ検索にも載らないです。

本題の吹き出しはPC・スマホだけでいいいいなら
<pc><style type="text/css"> ここに記述 </style></pc>
すればいいです。cssの書き方そのものがわからないなら勉強してください。

HEADのcssだけでは情報不足です。
レイアウトタグがないと調整できません。

pc
[編集]

[