お借りしたテンプレート通りにならない

凍結

0 Anonymous K

画像1のお借り先のような感じにしたいのですがどうしても画像2のようになってしまいます。
（🟦がお借り先の正式なもの
　🟥が私が編集したレイアウトになります）

🟦HTML・css


<style type="text/css">
/* 全体設定 */
body {
background-color: #434b48;
color: #b1bab6;
}
a:link {color: #b8ab84;}
a:visited {color: #9d8d5b;}

<nopc>
body {
line-height: 1.5;
font-size: x-small;
}
<imode>
a:focus {color: #222d2f;}
</imode>
<softbank>
a:focus {color: #839b5c;}
</softbank>
</nopc>
<pc_only>
body {
line-height: 1.7;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳゴシック", "MS Gothic", sans-serif;
font-size: 87.5%;
letter-spacing: 1px;
}
</pc_only>
<smartphone>
body {
line-height: 2;
font-family: Roboto, "Droid Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 14px;
letter-spacing: 1px;
}
</smartphone>
<pc>
a:hover, a:active, a:focus {
position: relative; bottom: 1px;
text-decoration: none;
color: #839b5c;
}
</pc>

<nopc>
input, select, textarea {
background-color: #5b6662;
color: #a8b2ae;
}
input:focus, select:focus, textarea:focus {
background: #bac2bf;
}
</nopc>
<pc>
input[type="text"], input[type="password"], input[type="number"], select, textarea {
border: 1px solid #6a8279;
color: #7a948a;
}
input[type="text"]:hover, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:focus, input[type="number"]:hover, input[type="number"]:focus, textarea:hover, textarea:focus, select:hover, select:focus {
border: 1px solid #b3c1bc;
}
input[type="submit"] {
border: 1px solid #6a8279;
color: #7a948a;
}
input[type="submit"]:hover, input[type="submit"]:focus {
border: 1px solid #b3c1bc;
background-color: #73817b;
color: #c3cac7;
}

/* 外枠 */
.waku {
width: 500px;
margin: 0 auto;
}
@media only screen and (max-width: 560px) {
.waku {width: auto;}
}
</pc>

/* 画像サイズ制御（画面サイズを超える画像は縮小） */
.waku img {
width: auto;
max-width: 100%;
height: auto;
}

/* 左右余白設定 */
<nopc>
.yohaku {
padding: 1em 10px 0.5em 10px;
}
</nopc>
<pc_only>
.yohaku {
padding: 1.5em 30px 0.5em 30px;
}
</pc_only>
<smartphone>
.yohaku {
padding: 1.5em 6% 0.5em 6%;
}
</smartphone>

/* タイトル設定 */
.title {
line-height: 1.3;
color: #c28f70;
}
<nopc>
.title {
font-size: small;
}
</nopc>
<pc>
.title {
font-family: "Times New Roman", serif;
font-size: 1.2em;
}
</pc>

/* メニュー設定 */
.menu {
padding: 0.5em 0;
font-family: "Georgia", serif;
}

/* 見出し設定 */
.midashi {
line-height: 1.5;
padding: 1px 0.5em;
margin-bottom: 0.5em;
border-bottom: 3px double #8faab0;
color: #8faab0;
font-family: serif;
}
<pc>
span.midashi {
display: inline-block;
*display: inline;
*zoom: 1;
}
</pc>

/* 汎用タグ */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

</style>

🟦全体レイアウト　

<div class="waku yohaku"><img src="トップ画像URL" alt="" /><br /><span class="title">サイト名</span> / カウンター
<div class="menu">リンクメニュー</div>
#clap数字#<br />
ここに内容
</div>

※以下サンプル※
▼文字寄せ
<div class="left">左寄せ</div>
<div class="right">右寄せ</div>
<div class="center">中央寄せ</div>

▼見出し
<span class="midashi">文字分だけ</span>
<div class="midashi">一行ブロック</div>

▼拍手例
#clap数字#
（基本設定⇒ページ貼付時のリンクタイプ⇒レイアウト指定
　貼付け時レイアウト⇒『#formStart##formInput_18#　#formSubmit_ボタン名##formEnd#』※18やボタン名の部分はお好きなように）

▼テキストエリア例
<textarea name="link" rows="3" cols="18"><a href="http://nanos.jp/サイトID">サイト名</a>*お名前</textarea>

になります。
HTMLはそのままトップページ編集のHTMLに貼り付け、その下枠に全体レイアウトを貼り付けました。
編集をして貼り付けたのが以下の物になります。

🟥全体レイアウト

<div class="waku yohaku"><img src="##IMAGE_DATA_4_URL##" alt="" /><br /><span class="title">サイトタイトル</span> / カウンター
<div class="menu">#fp1_info#</div>
#clap数字#<br />

<br>
<br>
<span class="midashi">説明タイトル</span><br>
あいうえお
かきくけこ
<br>
</div>

と編集をしたのですがうまく出来ず文字も左に寄り過ぎたり、タイトルの色や他の箇所も正式なテンプレートと同じようになりません。編集せず貼り付けても画像②のようになってしまいます。

05/05 04:45

返信

コメント投稿検索

3 Anonymous K

>>2
しち様。

返信が遅れてしまい申し訳ございません。

おっしゃるとおりです……ナノ用のテンプレサイト様からお借りしております。
普段もナノ用のテンプレをお借りして問題なく使えていたので今回も同じようにと思っていたのですが…、端末別表示タグと言うのが原因とは思わず……。
端末別表示タグの意味もわからなかったので気づきませんでした。使えなくて当たり前ですよね。

何種類か独自タグの意味や使い方が分からないものが多くスレにお世話になりっぱなしです。
いつもすみません…ありがとうございます。

ALICE+のテンプレでさえもいまだに編集に手こずる箇所もあるので先にそちらで慣れていこうと思います！

返答くださっただけではなく、詳しくありがとうございました！

05/07 02:33

返信

2 しち SOG10

>>1
>>0さんの端末側の問題ではありません。
結論から申しますと、別のテンプレをお使いになるのであれば「ALICE+用のテンプレ」を使用されるのが一番楽だと思います。
（すでにそのおつもりでしたら失礼いたしました）

ちなみに>>0のように、配布元での表示とALICE+での表示が異なってしまっているのは、
お使いのテンプレが、ALICE+以外（たぶんナノ）の独自タグを使っているためです。

件のテンプレートに使われている独自タグこと『端末別表示タグ（<nopc>など）』が、おそらくナノ仕様だと思います。
こちらのテンプレ、ナノ用のテンプレサイトさんのものではありませんか？

この端末別表示タグというのが、ナノとALICE+で「よく似ているけど機能がちょっと違う」のです。
そのため同じCSS・HTMLでも、ナノで使ったときとALICE+で使ったときで表示が変わってしまいます。

端末別表示タグが使われているテンプレだと、ナノ独自タグをALICE+独自タグにすべて書き換える必要があります。
この>>0のテンプレは構造が複雑めなので、独自タグの勝手が分からないと改変は難しいほうですね……。

『端末別表示タグ』が使われていないテンプレにするか、
もしくはALICE+用のテンプレをお使いになったほうが、改変の手間がなく楽かと思います。
参考までに、ナノとALICE+の端末別表示タグ一覧の画像を載せますね。

**読まなくてもいい補足**『端末別表示タグ』とは
閲覧者の端末の種類（スマホ・PC・ガラケー等）によって、表示／非表示を出し分けることができる独自タグです。

例えばALICE+の独自タグなら、
>　<nopc>この中はガラケーとスマホにのみ表示</nopc>
と書くと、括った部分が「ガラケーとスマホでのみ表示（パソコンでは非表示）」になります。

しかしナノの独自タグにおける <nopc>●●</nopc> は、ALICE+とは違って「ガラケーでのみ表示」になります。

つまり、>>0のCSSでは
「ナノだとスマホとガラケーで表示するスタイルが、ALICE+ではガラケーでしか表示されない（＝つまり本来のスマホ用スタイルが、スマホでの閲覧時に表示されていない）」
という状態になったりしているんですね。

ALICE+用でないテンプレを使う際は、『端末別表示タグ』が多用されていないものにしたほうが改変の手間が減るのでお勧めです。