テンプレサイト様そのまま使っているはずなのに、レイアウトが違うのは

1727 views
  1. コメントする
  2. 記事検索
  3. 更新
  4. 凍結

0
わと Chrome 2018/02/02 17:20
たびたびお世話になっております。
今回は問題を見える化するために、ダミーサイトを作成しました。
ぜひ解決にお力添えいただけたらうれしいです。

本題です。

私のサイトの現状を元に作ったダミーサイト
https://alicex.jp/dummydummy/

問題は3つあります。
一、トップページ。メニュー部分左部の謎の空白。(右部のように空白ができないようにしたい)
二、mainページのタイトル1。テンプレサイト様と同じレイアウトにしたい。(文字間隔、文字サイズ
三、mainページのタイトル1。一覧表示でのタイトルの左の数字「01.」がテンプレサイト様と違って小説タイトルより文字が小さいのでテンプレサイト様と同じサイズにしたい。

使用させていただいているデザインテンプレートサイト様のレイアウトです。
http://nanos.jp/shikiri/novel/1/

以上です。
文字がどうしてこうもテンプレサイト様と違うのでしょうか?
コピペしているのですが……
ちなみに、CSSは編集ページの「HEAD編集」に入れてます。

教えてください。よろしくお願いいたします!

残り987件書き込み可

13
しち Firefox 2018/04/07 03:31
>>12
いえいえいえ!何度見直してもあれは書き方が全面的に悪かったです……。
というか、「jQueryまで書く」or「jQueryには触らず、その旨も注記する」か最後まで迷った結果、「jQueryよく分からんからそっとしておこう…注記だけして…」と思っていたのに最終的にそれすら忘れたという……。
すっかり注記した気になっていたので不具合まで考えが及びませんでした……!みみ見直しだいじ……すみませんでした(;´Д`)!!

> いいねボタンお借り致します!とっても可愛いです(*^_^*)
感無量です……!やはり、そうしたお声を頂けると糧になります!
他のテンプレさんと併用してもデザインが反映されるよう、かなりねっちりとスタイルを上書きするCSSになっています……がやはりテンプレさんによっては何かが影響してボタンデザインが崩れる可能性があります。
もしもデザインが崩れるようなことがありましたら、サイトの方にご一報頂けると幸いです。ボタンCSSの参考にいたします。

> ヘッダーの高さを考慮したスムーズスクロールが復活できました!
完成のお手伝いができてよかったです!
確認不足で余計な遠回りなどもさせてしまいましたが、私のなッがいレスにお付き合い頂きありがとうございました……!
私の方こそ、わとさんのおかげで自サイトコンテンツ制作のヒントを沢山頂きまして、本当に参考になりました!
解説書のヒント探しによく掲示板を覗いているので、掲示板でまたお会いすることもあるかもしれません。
とことん粗忽な奴ですが、そのときはまたお付き合い頂けたら幸いです……ここまでありがとうございました!サイト運営頑張ってください!(*´∀`)ノ
12
わと Chrome 2018/04/06 21:24
>>11
お返事ありがとうございます!

>全部書き換えちゃいますよね
いえいえ、こちらが勉強不足で察せず申し訳ありません!
そうだったのですね、jQueryの記述には触らなくて良かったのですね;
しちさんからすると、なるはずのなかった事態になってしまいましたよね、申し訳ありません;

>9を書いてる間に投稿
それはすみませんでした;;;
そもそも、お返事ももらってもいないのに連投した私がまずかったですね、申し訳ありません;

謝ってばかりですね;
本題ですが、
おかげで解決致しました!!
ヘッダーの高さを考慮したスムーズスクロールが復活できました!
良かったらご覧ください!

https://alicex.jp/dummydummy/

>被るのと同時に、スクロールも機能しなくなっていたはずです。
気付いていませんでした^^;でも言われてみればそうだったように思います。

>スクロール速度は「1000」のところを小さくするほど速度が速くなります。
情けないことに我のことながら覚えていませんが、800くらいにしてみました!

>元テンプレさんだとjQuery1.9.1くらいのバージョンだった気がしたんですが、個人サイトでIE8以下とかの古いブラウザに対応する必要性はまず無いかと思うのでjQueryのバージョンは現在の最新のものに書き換えています。(こっちの方が軽量なので)
ありがとうございます!感謝です!

>*【デザイン編集】ページの中の【編集枠数設定】で、トップページや子ページの編集枠を『2』以上にし、
>*「頻繁に編集するコンテンツ(infoとかmainとかの白箱)」枠と、「普段触らない・消えたらヤバイ記述(jQueryや、デザイン上重要なタグ)」枠を分けておくとうっかり事故が防げてお勧めです。
教えていただいた通りにしました。今回追記した「jQuery」だけ2個目の枠に入力しました^^

>テンプレサイト(仮)
教えてくださってありがとうございます!
私のしたド素人な質問ですらカバーされているような素人に大変助かるサイトさんで、感動いたしました。

数字とハートがくるくるしつつ文字色のみ変化のいいねボタン
お借り致します!とっても可愛いです(*^_^*)
記載は必要ありませんとありましたが、
しちさんはサイト作成における私の師匠様ですので、ご報告させていただきます。

>掲示板でのやりとり
しちさんには、本当にたくさんお世話になりました。
こんなに丁寧に多くのことを助けていただけて、感謝してもしきれません。
サイトを理想のものにすることができまたのも、しちさんのおかげです!
しちさんに出会えて良かったと思っています^^*
もしまた掲示板に現れることがあるかもしれませんが、その時は
良かったらよろしくお願いいたします!
しちさん、本当にありがとうございました(*^_^*)
11
しち Firefox 2018/04/04 20:46
>>10
うあああ実にすみません!今回も私の方のミスです!!
前回>>6で書き換えのとき、「※jQueryの記述には触らず」と注記入れ忘れてました!!!!そうですよねこんな書き方じゃ全部書き換えちゃいますよね?!明らかに確認不足でした…お手間を取らせてしまい本当にすみませんんんn
そして>>8の方、たった今気付きましたすみませんすみません完全にスルーしてるような感じになっていますが気付いてなかっただけですすみません……自分が9書いている間に投稿されてたんですね……自分の長文が一番上にあったのですぐ下のレスにまったく気付きませんでした……

>>0のダミーサイトにも現状を反映されていますか?
この状態であれば、事態の原因はjQueryだけかと思います。

#【デザイン編集】の一番下に以下追加

<!-- ▼jQuery▼ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
$('a[href^="#"]').click(function() {
var speed = 1000; //スクロール速度
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var headerHeight = 110; //固定ヘッダーの高さ
var position = target.offset().top - headerHeight; //移動先の座標にヘッダーの高さ分余白追加
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>

>ヘッダメニューの「info」のリンクをクリックするとタイトル「information」がヘッダメニューにかぶってしまう
スムーズスクロールに関するjQueryの記述が消えていたためですすみません…。被るのと同時に、スクロールも機能しなくなっていたはずです。
*jQueryによりページ内リンクを押した時に『スムーズなスクロールアニメーション』『移動先の座標に固定ヘッダー分の余白を上に追加』『URLに#が付かないようにする』という操作を行っています。
繰り返しになりますがjQueryの記入位置は、
    </div><!-- ▲★/#main★▲ -->
より下になります。

スクロール速度がいくつだったか忘れてしまったのですが、「1000」のところを小さくするほど速度が速くなります。
元テンプレさんだとjQuery1.9.1くらいのバージョンだった気がしたんですが、個人サイトでIE8以下とかの古いブラウザに対応する必要性はまず無いかと思うのでjQueryのバージョンは現在の最新のものに書き換えています。(こっちの方が軽量なので)
言うてjQueryには不勉強な人間なので変なアレンジなどは加えておりません。このあたり、変に弄ると機能しなくなるので編集の際にはご注意ください。

*【デザイン編集】ページの中の【編集枠数設定】で、トップページや子ページの編集枠を『2』以上にし、
*「頻繁に編集するコンテンツ(infoとかmainとかの白箱)」枠と、「普段触らない・消えたらヤバイ記述(jQueryや、デザイン上重要なタグ)」枠を分けておくとうっかり事故が防げてお勧めです。

>テンプレサイト(仮)
あれそう言えばこの掲示板だと名前の所にURL入力枠がないですね……お助け板の方には名前の横にサイトリンク貼れるようなのに。ていうかガイダンスには入力枠ある前提の記載があるのに。
宣伝だけを目的とした投稿だとダメかもですが、多分だいじょう……ぶ……だと思いますおそらく。
http://alicex.jp/piran000/
……未だに工事中なのでちょこちょこ表示崩れたりそもそもコンテンツ空っぽですがこういう所におります。今まだ、いいねボタンの配布しかしておりません…。
お察しの通りかなりの粗忽者なので、色々推敲校正校閲を重ねている内に本格開業が延び延びになっている奴です……本当に掲示板でのやりとり参考になります。


多分これでヘッダーの高さを考慮したスムーズスクロールが復活するはずですが、もしダメならHEADとHTMLどっちも確認する必要があります。
何か削れているか余計なものが入っているか記述が壊れているかかもしれないので……。
前回はまた確認不足で余計な手間を増やしてしまい本当にすみませんでした……!
10
わと iPhone 2018/04/03 18:49
>>9
しちさん、お返事が遅くなり申し訳ございません。
実は、一旦解決したと思いきや別の問題が発生してしまいましたので、
お手数ですが、引き続きお付き合いいただけますでしょうか><

お返事に関して言及させていただきたいこともありますので、
勝手ながら本題は最後に書かせていただきます。

>●もしWebフォント…例えばHannariを使いたくなったら…
ご丁寧にありがとうございます。
知りたいことでしたので、大変助かりました。
変更時はぜひ参考させていただきます!

>改変手引き書付きのテンプレサイトを作っているところなので…
そう言っていただけると嬉しくなってしまいます^^
私のような初心者にとっては、しちさんが作られているサイトがあると大変頼もしくあります!
URLやサイト名をここで貼るのは、違反の可能性があり心配ですが、
良かったらぜひ訪問させていただきたいです!


ここで本題ですが、
>>8と被る形になりますが、連投してしまい失礼いたしました。

……改めまして。

ヘッダメニューの「info」のリンクをクリックすると
タイトル「information」がヘッダメニューにかぶってしまいます。
PCだけでなくブラウザを変えてスマホでも同現象です。
タイトルがヘッダにかぶらないようにする方法を教えてください。
スクショを2枚掲載致します。

1枚目:現状
2枚目:したいこと

新しい質問として挙げるか迷ったのですが、
私が余計なタグを入れたか消し損ねてしまったのか、
以前は起きなかった現象のためこのツリーで続行させていただきました。
どこのCSSやHTMLを貼れば良いでしょうか?
ぜひお力添えお願いいたします><
750×1100JPEG
129KB
750×1099JPEG
135KB

9
しち Firefox 2018/02/16 03:00
>>7
いえいえこちらこそ、長いコメントにお付き合いいただいた上に丁寧なご返信を頂戴し、誠にありがとうございます!

> トップページとメインページは別々のサイト様からデザインをお借りしております。
なるほど!それででしたか〜〜
不要だけど意図がよく分からない記述に関してはあまり触れずに放置している部分があったりするので、>>6の状態でもまだ不要な記述が残ってましたね(^0^;)
(※ページが無駄に重くなるとかデザインが崩れるとかのレベルのものは排除しているので問題はないと思います)

> Hannariを使っているものとばかり思っていました。反映しておらず今のレイアウトなのでしたら、消す方向でも満足です。
Webフォントを使うときは、そのページに当該Webフォントを読み込ませるためのコードを書かなければなりません。(>>0の段階ではトップページにHannariフォントが読み込まれていなかった=トップページ上にHannariを表示することができなかった)

●もしWebフォント…例えばHannariを使いたくなったら、『HEAD間編集』の“1行目”に、

<link href="//fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />

とフォントを読み込ませるためのコードを書きます。(1行目じゃなくてもいいんですが、とにかく<style>〜</style>タグの“外に”書いてください)
●あとはHannariフォントを使いたいセレクタ、例えば見出し<h1><h2>にHannariを使うのであれば『HEAD間編集』のCSSの中にこう指定↓

h1,h2{/*サイト名と見出し共通*/
color:#73b6e6;
font-weight:normal;
letter-spacing:3px;
text-align:center;
font-family: "Hannari","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "MS 明朝", 'Times New Roman','Georgia', serif;
}

↑の“font-familiy:…;”の部分がフォントの指定です。
コンマで区切っていくつもフォントを指定するのは、「1つ目のフォントがなければ2つ目のフォントを表示、1も2もなければ3つ目のフォントを…」という感じに優先度順に並べてあるためです。
一番表示したいのはWebフォントなので、本命の“Hannari”は一番最初に書きます。
(参考:『font-familyの書き方まとめ』https://saruwakakun.com/html-css/basic/font-family-how-to

>Androidでも英数字が明朝体で表示されるように…
Androidだとフォント指定を「明朝体(serif)に!」と指定してもフォント変えられないんですよね〜少なくとも今は、CSSで日本語を明朝体やゴシック体に指定することはできません…
が!半角英数字だけはゴシック・明朝・等幅フォントなどを指定できます。まず端末の中にフォントが入っているので。

先の例だと、'Times New Roman','Georgia'の2つが、「Androidでも英数字を明朝体にする」ための指定。
Androidのバージョンにもよるかもしれませんが、これらを指定しておくと「このフォントによく似たフォントで代替しとくね!」とAndroidさんが忖度してくれるみたいです。(どっちか一つでも良さそうですが、念のためで二つ入れてます)

"游明朝"とかは和文フォントなのでAndroidではスルーされます。PC用の指定だと思ってください。「PCでは游明朝の英数字使いたいけどAndroidのためにGeorgiaも入れたい」ということで、font-familyの順序が
* Webフォント>PC向けの明朝体和文フォント>Android向けの明朝体英数字フォント>もうなんでもいいから明朝体の何かを表示してくれの指定【serif】
になっています。
変更時のご参考までに……

h1,h2ではなくbody{font-family:…;}に先述の指定をした場合含め、Hannari実装例の画像をついでにつけときます。(Android7.1.1での表示例)
平仮名が変わるだけでも印象が違うのであとはお好みで……

>白背景箱を増やしたり減らしたり
増やすときは <div id="m●" class="kiji">〜</div> の●部分の数字を変えるなどして、「“idセレクタ”が被らないように」だけ気をつけてくださいませ。
人間で言えばidは『個人名』みたいなもので、同一ページ内に同姓同名のセレクタが何人もいるとページ内リンクが効かなくなったりしますゆえ……
例えばメニューの <a href="#m1">info</a> というリンクは『「id="m1"」さんの所めがけて飛ばすリンク』なので、「id="m1"」が他にも一杯いたらどこへ飛ばせばいいか分からない……という事態になるのです。

最後になりますが丁寧なご返信本当にありがとうございました!
改変手引き書付きのテンプレサイトを作っているところなので、大変大変参考になりました!
そういう理由でよくよく掲示板覗きに来ているため、またお目に掛かることがあるかもしれません。サイト運営頑張ってください!(*´∀`)ノシ
750×1920PNG
835KB
750×1920PNG
831KB

8
わと iPhone 2018/02/16 01:45
>>6
たびたび申し訳ありません。
しちさん、新たな問題を発見致しました…!

ヘッダメニューの「info」をiPhoneにてタップすると、タイトル「information」がヘッダメニューにかぶってしまいます。
タイトルがヘッダにかぶらないようにするにはどうすれば良いのでしょうか。

口頭では分かりづらい可能性がありますので、スクショを2枚掲載致します。
1枚目:現状
2枚目:したいこと

ぜひお力添えいただけたら嬉しいです。
750×1096JPEG
131KB
750×1085JPEG
136KB

7
わと Chrome 2018/02/12 20:33
>>6
しちさん、お返事が遅くなり大変申し訳ございません!
また、意味不明な箇所が多数あるために気をもませてしまい、重ねて申し訳ない気持ちです。

とっくにお気づきかと思いますが、恥ずかしながらゼロから作る知識がないために、恐れ多くもテンプレサイト様でお借りしているデザインを改変させていただいている状態です。
そのため、修正させていただいております。

おかげで私自身も把握しやすくなりました。
なにより、いつもレイアウトのイメージをとてもよく汲み取っていただけますし、分かりやすくて、本当に感謝しております。

ここまでご丁寧にしていただけているので、応えられる範囲となりますが綴りたいと思います。

>文字サイズ問題に関しては、わとさんが書き足されているのだと思うのですが…
>現状の font-size:10pt は「ほぼ13px」なので、なぜ変更されたのかちょっと意図が分かりませんでした(元テンプレの文字サイズは13px)
同じブラウザなのに自サイトとテンプレサイト様で表示されている文字サイズが違ったため、知識がないなりにネットで調べた結果、変えました;余計なことをしただけのようで恥ずかしいです。

>><p>タグを使う意義が薄く、htmlをややこしくさせているだけのように見えるので、トップページでは<p>を使わない方向で書き換えてもよろしいですか?
htmlを見やすく修正してくださり感謝です!

>改変されたと思しき箇所に関しては他にも
>●既に指定済みのスタイルを何度も上書きしている
>●現状(デモページ内では)使用されていないセレクタに関する指定がある(本番で使うのでしょうか…?もしくは消し忘れ?)
コピペで対応しているレベルのため、消し忘れのようです;

>(現状不使用が『article』『strong』とフォーム部品、かつ使用箇所不明なのは『h3』『.box』『.footer』です。.footerはもしかして下部ALICE+リンクへの指定ですか?)
footerはもしかして下部ALICE+リンクへの指定のつもりでした。分からないまましていることが本当に恥ずかしいです。

>●フォントの指定がおかしい……というか、Webフォントが読み込まれてないやら、使ってないWebフォントが無駄に読み込まれているやらで大変なことになっています
>(トップページではWebフォント'Hannari'を使わないということで、消した方がよいのでしょうか?)
そんなことになっていたとは……。Hannariを使っているものとばかり思っていました。反映しておらず今のレイアウトなのでしたら、消す方向でも満足です。

>.box{/*現状不使用・テンプレにも無し・どこに使おうとしたものでしょう?*/
今更ですが実は、トップページだけはほぼ改変なのです。
トップページとメインページは別々のサイト様からデザインをお借りしております。
メインページのテンプレサイト様Aを、テンプレサイト様Bのヘッダーメニューを合体させていただきました。
そのため、テンプレサイト様Bでのデザインの名残が残ってしまわれたと考えられます。
知識がないというのに、自己流は本当に恥ずかしいことです;

>●Androidでも英数字が明朝体で表示されるようfont-family書き足しました(PCでの表示フォントは変えない仕様で)
こことてもうれしいです!汲み取ってくださり感謝します!

>●使用箇所が不明な記述には/*コメントアウト*/でメモ入れてます。現状いらない記述だけどどこかで使うのかな……と悩んだ部分です。.boxとか
申し訳ありません。本当に申し訳ありません。上記のテンプレサイト様A、Bの理由のためです……。

>現状だと背景画像に紛れてALICE+リンクが見えづらくなっているので白背景付いた方がいいかと思いました。規約違反回避に…
危なかったです、本当にありがとうございます!

>あと、headerと見た目揃えた方が綺麗かと余計な気を利かせてfooterの丸角指定取りました
お気遣いありがとうございます!しちさんが修正した通りで利用させていただきます。

>●文字サイズ『○px』に揃えました。小説ページと揃えた方が綺麗かと以下略…
文字サイズが違っていることにすら気付けていませんでした……
ありがとうございます!修正案を利用させていただきます。

>(白背景内の文字色を#666から「#4c4c4c」に変更して、「文章を左寄せ」にしたかったということでよろしかったでしょうか?.kijiクラスに指定しておきました)
はい、その通りでございます!汲み取ってくださりありがとうございます。

>●<div>を纏めたりして閉じタグ行方不明事件撲滅に努めました
本当に事件ですよね……時間をさいて目を通してくださってとても感謝しております。

>*  <!-- ▼メニュー1のスクロール先▼ -->
>*  <div id="m1" class="kiji">
>*     〜本文内容〜
>*  </div><!-- ▲/.kiji_#m1▲ -->
>でひとかたまりの白背景箱です。
増やしたり減らしたりしたかったので、勉強になりました!

しちさん、今回もご丁寧にありがとうございました。
とても感謝でいっぱいです!!
何かありましたら、またしちさんにお願いしたいです。m(__)m
本当にありがとうございました!
6
しち Firefox 2018/02/04 13:32
毎度すみません、>>5の続きです。
理由説明は>>5にて。とりあえず、訂正箇所を連ねます。>>5と書いてること重複します。

#――↓小説ページの【全体デザイン】を

<article>
#novel#
</article>

*※もしも表紙・文章画面に<article>を書いているのならそっちは消して、【全体デザイン】にのみ<article>〜</article>を書きましょう。閉じタグ欠落はデザイン崩れのもと※

#――↓トップページの【HEAD編集】<style>〜</style>は全部書き換え(※</style>の後にあるjQueryの記述は触らずに)(※小説ページのCSSも触らずに。トップページだけ)

<style type="text/css">
body {
padding: 0;
margin: 0;
font-size: 13px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "MS 明朝", 'Times New Roman','Georgia', serif;
background: url(##IMAGE_DATA_1_URL##);
background-size: 467px;
color: #666;
letter-spacing: 1px;
line-height: 24px;
}
img{
border:0;
max-width: 100%;
}
a{
outline: none;
text-decoration: none;
border-bottom: 1px solid #CFCFCF;
}
a:link,a:visited {
color:#73b6e6;
text-decoration:none;
}
a:hover{
color:#8bd8ed;
}

#header{
width:100%;
background-color:rgba(254,241,131,0.8);
position:fixed;
top:0;
padding:20px 0;
text-align:center;
}
#header ul,#header li{
margin: 0;
padding: 0;
list-style:none;
}
#header li{
display: inline;
padding:0 5px;
}
#header li a:hover{
color:#4c4c4c;
border:none;
}
#main{
width:80%;
max-width:500px;
text-align:center;
margin:110px auto 10px;
}

.kiji{/*本文入れる白背景箱*/
color:#4c4c4c;/*の中の文字色。テンプレでは#666だった*/
text-align: left;
background-color:rgba(252,255,255,0.8);
-webkit-border-radius:10px;
border-radius:10px;
margin:0 0 25px;
padding:10px;
}

h1,h2{/*サイト名と見出し共通*/
color:#73b6e6;
font-weight:normal;
letter-spacing:3px;
text-align:center;
}
h1{/*サイト名*/
font-size:22px;
margin:-5px 0 5px;
}
h2{/*見出し*/
font-size:18px;
border-bottom:6px double #CFCFCF;
}
h3{/*トップページでは不使用?不要ならh3の指定全消しで*/
color:#73b6e6;
font-size:14px;
border-left:20px solid #73b6e6;
padding:0 0 0 12px;
text-align:left;
}

.topnabi{
margin:25px 0 0;
text-align:right;
}

.box{/*現状不使用・テンプレにも無し・どこに使おうとしたものでしょう?*/
width:80%;
font-size:12px;
overflow: auto;
height:34px;
color:#666;
border:1px solid #CFCFCF;
background-color:#fff;
padding:2px;
text-align:left;
}

/* -----▼フォーム部品 */

textarea,input,select,button,
input[type="text"],input[type="button"],input[type="submit"]{
color:#666;
font-size:11px;
border:1px solid #ccc;
background-color:#fff;
padding:2px;
}
input[type="text"]{
width:90px;
max-width:90%;
height:auto;
}
input[type="button"],
input[type="submit"]{
min-width:35px;
height:auto;
}

footer{/*下部ALICE+リンク周りの指定*/
background-color:rgba(252,255,255,0.8);
margin:0;
padding:10px 0;
}
-->
</style>

#――【デザイン編集】には

<div id="header">
<h1>サイト名</h1>
<ul>
<li><a href="#m1">info</a></li>
<li><a href="#m2">main</a></li>
<li><a href="#m3">link</a></li>
</ul>
</div><!-- /#header -->

<div id="main"><!-- ▼★#main★▼ -->

<!-- ▼メニュー1のスクロール先▼ -->
<div id="m1" class="kiji">

<h2>information</h2>

当サイトは△▽をメインとした創作小説サイトです。<br>

<div class="topnabi"><a href="#m1">TOP ▲</a></div>
</div><!-- ▲/.kiji_#m1▲ -->

<!-- ▼メニュー2のスクロール先▼ -->
<div id="m2" class="kiji">

<h2>main</h2>

<a href="https://alicex.jp/dummydummy/novel/1/">タイトル1</a><br>
<a href="https://alicex.jp/dummydummy/novel/2/">タイトル2</a><br>
<a href="https://alicex.jp/dummydummy/novel/3/">タイトル3</a><br>

<div class="topnabi"><a href="#m1">TOP ▲</a></div>
</div><!-- ▲/.kiji_#m2▲ -->

<!-- ▼メニュー3のスクロール先▼ -->
<div id="m3" class="kiji">

<h2>link</h2>
<a href="">リンク</a><br>
<a href="">リンク</a>

<div class="topnabi"><a href="#m1">TOP ▲</a></div>
</div><!-- ▲/.kiji_#m3▲-->

</div><!-- ▲★/#main★▲ -->

#――↑ここまで

>――CSS
●明らかにいらない記述と、他で代替できるか纏められる記述を削りました
●Webフォントは一つとして機能していなかったので読み込みURLごと消去しました
●Androidでも英数字が明朝体で表示されるようfont-family書き足しました(PCでの表示フォントは変えない仕様で)
●使用箇所が不明な記述には/*コメントアウト*/でメモ入れてます。現状いらない記述だけどどこかで使うのかな……と悩んだ部分です。.boxとか
●.footerは多分 <footer>(=下部ALICE+リンク)への指定だったんじゃないかな〜〜と思って勝手に<footer>への指定に書き換えました。ちなみにピリオド取ってfooter{…;}にしただけです。
現状だと背景画像に紛れてALICE+リンクが見えづらくなっているので白背景付いた方がいいかと思いました。規約違反回避に…
あと、headerと見た目揃えた方が綺麗かと余計な気を利かせてfooterの丸角指定取りました
*(必要なら
-webkit-border-radius:10px;
border-radius:10px;
*の2行をfooter{…;}の中に戻してください)
●文字サイズ『○px』に揃えました。小説ページと揃えた方が綺麗かと以下略…
●変更の意図が不明だった部分は字下げ無くしてあるので、コレジャナイときはそこを直して頂く感じで…

>――デザイン編集
●CSS弄った結果いらなくなった<p>タグ消しました
(白背景内の文字色を#666から「#4c4c4c」に変更して、「文章を左寄せ」にしたかったということでよろしかったでしょうか?.kijiクラスに指定しておきました)
●<div>を纏めたりして閉じタグ行方不明事件撲滅に努めました
*  <!-- ▼メニュー1のスクロール先▼ -->
*  <div id="m1" class="kiji">
*     〜本文内容〜
*  </div><!-- ▲/.kiji_#m1▲ -->
でひとかたまりの白背景箱です。

トップページはテンプレをかなり改変されているみたいなので、憶測で書き直してるところ多々です。意図汲み取りきれてないと思います…
長々と失礼しました!

5
しち Firefox 2018/02/04 12:57
>>4
いえいえ!毎度長々としたレスですみません!そして今回も長くてすみません!
ダミーページ覗かせて頂きました〜。解決できてよかったです!

ただ今更なんですが閉じタグ無いところを見つけてしまいました……
●小説ページにおいて、閉じタグ</article>がない
多分articleは【全体デザイン】に書いてあるのではないかと思うのですが、そこを

<article>
#novel#
</article>

こういう感じに、
#novel#を <article>〜</article> で包み込むように閉じタグを書き足してください。
articleは終了タグを省略できませぬゆえ……
小説ページの問題点はこのくらいだと思います。CSSに無駄な記述があったりもしますが…

あとなんかもう後出しで申し訳ないんですが、トップページは問題いっぱいありました……
●<li>タグが<ul>〜</ul>タグに包まれていない
(<li>はリストの“項目”なので、項目を包む<ul>タグ必須)
●閉じタグ</div>の欠落が4箇所ある
●<div id="kiji">がいっぱいいる
(div id="◎◎"は1ファイル内で1回しか使ってはいけない。idセレクタは人間で言うところの名前とかマイナンバーなので、これだと待合室に“div所属の山田太郎さん”が沢山いて目当ての太郎さんが見つけづらいという状態)
●インラインに背景画像が入りっぱなし
(CSSで背景指定してるので【背景画像設定】は使わなくていい)
●フォントサイズの指定、「…px」と「…pt」が入り乱れていてモヤッとする(小説ページと文字サイズ完全に合わせた方がいい?現状、文字サイズちょっと違います。ちょっとだけ)

<div id="kiji">に関してはCSSも少し弄る必要ある奴です。
と言っても、
  #kiji{…………;}
のところを、
  .kiji{…………;}
という風に、“#”を“.”(半角ピリオド)に書き換えるだけです。

こうすると<div id="kiji">を <div class="kiji"> に書き換えることが可能になります。
classセレクタと言って、idが個人名ならclassは「1組の人、2組の人」という感じなので1ファイル内の中で何度使ってもOKです。
というかidセレクタとclassセレクタ纏めたらいいかな…
* <div id="m1" class="kiji">
とすると、“kijiクラスのm1さん(=メニュー1のスクロール先を指定されたkiji)”にできますので…
すみませんややこしいんで、改変箇所は別に纏めて書き込みます。先に理由と理屈だけ……

文字サイズ問題に関しては、わとさんが書き足されているのだと思うのですが…
現状の font-size:10pt は「ほぼ13px」なので、なぜ変更されたのかちょっと意図が分かりませんでした(元テンプレの文字サイズは13px)
もしも文字色を変えるだけの目的でしたらbodyの文字色指定を書き換えるだけなのですが…
><p>タグを使う意義が薄く、htmlをややこしくさせているだけのように見えるので、トップページでは<p>を使わない方向で書き換えてもよろしいですか?
改変されたと思しき箇所に関しては他にも
●既に指定済みのスタイルを何度も上書きしている
●現状(デモページ内では)使用されていないセレクタに関する指定がある(本番で使うのでしょうか…?もしくは消し忘れ?)
(現状不使用が『article』『strong』とフォーム部品、かつ使用箇所不明なのは『h3』『.box』『.footer』です。.footerはもしかして下部ALICE+リンクへの指定ですか?)
●フォントの指定がおかしい……というか、Webフォントが読み込まれてないやら、使ってないWebフォントが無駄に読み込まれているやらで大変なことになっています
(トップページではWebフォント'Hannari'を使わないということで、消した方がよいのでしょうか?)

……と色々あるのですが、明らかな問題点と、明らかな不要箇所だけ直したものを次で書き込みます……(不明箇所は放置)
4
わと Chrome 2018/02/03 22:34
>>2
しちさん!ご無沙汰しております。
毎度、解答ありがとうございます。
結論から申します、しちさんのおかげで無事解決しました!
良かったら改善したのをご覧くださったらうれしいです。
https://alicex.jp/dummydummy/

>なるほどこういうデザインでしたか!
はい!ようやくお見せすることができました……!しかし今思うと、最初からダミーサイトを作れば良かったと、反省しております^^;と言っても最近思い至ったのですが;
見てくださってありがとうございます!

>>(一)headerの余白
>ブラウザのデフォルトマージンのせいですね。PCで確認したら確かに謎余白できてました。
ありがとうございます!ご確認いただくことができて良かったです!

>>(二)mainページのタイトル1(小説ページ)の体裁
>文字間隔・文字サイズというのが具体的にどの部分かちょっと分かりませんでした。後述する.list周り以外はテンプレ通りのように思えますが……。とりあえず気付いた部分だけ。
いいえ!完璧に解決したと思います!本当に感謝です!

>>(三)数字を大きくしつつ、内容説明と小説タイトルの文字サイズを13pxで揃える
>見た目の違いや問題点は>>1さんが書かれているので二番煎じですが…
より詳しく記載してくださったおかげで、解決しました!ありがとうございます!

>多分【表紙画面デザイン】で、
>* #list#
>* </p>
>になってるんじゃないかと思います。
前回も思いましたが、本当にすごいですよね、しちさん……!
その通りでした^^;でも細かく記載してくださるおかげでとても分かりやすく助かります!

>#3-b)『タイトルの右』には以下だけ
この件まで、ありがとうございます!実は、教えていただけない箇所かと期待していなかったので、ここまでご丁寧にしてくださってありがとうございます!
<p>実践いたしました!

>とりあえず気付いた部分だけ……
今回も本当にありがとうございました!くどいくらいにお礼を申し上げてしまいましたが……言い足りないくらい感謝してます!
しちさん、本当にありがとうございました!

3
わと Chrome 2018/02/03 22:19
>>1
解答ありがとうございます。

>CSSの該当箇所を
>.list>div{font-size:20px;}
>.list>div>a{font-size:13px;}
>に直せば二と三は解決かと。
教えてくださったところは無事修正でき、解決できました!

>ただし内容説明は大きくなるのでまた別の書き方が必要です。
困りました……;;

>一は謎の空白がどれのことか解らないのでスルー
どうしましょう……;;
ブラウザが違うからでしょうか?
まだすべて解決できていません……。

ななしさん、解答ありがとうございました!
2
しち Firefox 2018/02/03 07:48
>>0
なるほどこういうデザインでしたか!
最低限だけ弄ります。

>(一)headerの余白
ブラウザのデフォルトマージンのせいですね。PCで確認したら確かに謎余白できてました。
●bodyに余白を0にする指定を書きます。
●背景画像がHEAD間CSSではなくインラインで挿入されていますが、CSSに纏めておきます。
#ので【背景画像設定】ページで『背景画像を使用しない』に設定を戻す
●それと html,body{…;}の『html,』が消えてるので一応戻しておく
#----以上を踏まえてbody関連を以下に書き換える----

html,body {
height: 100%;
}

body {
padding: 0;
margin: 0;
font-size: 13px;
font-family: 'Hannari', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "MS 明朝", serif;
background: url(##IMAGE_DATA_1_URL##);
background-size: 467px;
color: #666;
letter-spacing: 1px;
line-height: 24px;
}

*※background: url(##IMAGE_DATA_数字_URL##);の独自タグ部分は、画像アップローダーにある当該画像の『画像URL表示』タグを貼ること。数字を適宜書き換えてください※

>(二)mainページのタイトル1(小説ページ)の体裁
文字間隔・文字サイズというのが具体的にどの部分かちょっと分かりませんでした。後述する.list周り以外はテンプレ通りのように思えますが……。とりあえず気付いた部分だけ。
縦書きタイトルはフレーム素材を使わないのでしたらCSSの h1{…;} の中から
> background: url(#フレーム素材#) no-repeat center top;
> background-size: 87px 256px;
計2行を消してください。不要なので。

それと『お相手名 あたたかな風』にあたるCSSですが
> h2 {
> text-align: center;
> font-size: 18px;
> margin: 40px 0 15px;
# text-align: center; ←この行は不要なので消去
> }
です。

>(三)数字を大きくしつつ、内容説明と小説タイトルの文字サイズを13pxで揃える
見た目の違いや問題点は>>1さんが書かれているので二番煎じですが…
#1)まず不要な</p>を処理
多分【表紙画面デザイン】で、
* #list#
* </p>
になってるんじゃないかと思います。
#ここの</p>を </div> に書き換えてください。
<div class="list">の閉じタグが消えてしまっています……。

#2)前に書き換えた.list{}を以下のように戻して、数字の見た目を戻します。
.list {
max-width: 240px;
width: 90%;
margin: 0 auto;
color: #CFCFCF;
font-size: 20px;/*数字サイズ*/
}

●内容説明の文字サイズを13pxにしましょう。
#3-a).list a{……;}の次あたりに以下を入れる
.list p{
font-size: 13px;/*内容説明*/
margin-left: 2.5em;/*左の余白*/
}

#3-b)『タイトルの右』には以下だけ
<p>内容説明

●<p>は閉じタグを省略できるので、(3-b)のように始まりの<p>のみでもOKです。
●(3-a)の『左の余白』は不要だったらこの1行を消すか、数値を弄ってご対応のほど。
こうすると内容説明が<p>要素になるので、あとは .list p{…;} を弄れば文字色・余白・行間等々の見た目を変えられます。

とりあえず気付いた部分だけ……
1
ななし KYT31 2018/02/02 22:02
>>0
ソース見ると結構違いますよ。
テンプレ抜粋
<p class="list">数字<a>タイトル</a></p>
で、
.list{font-size:20px;}※数字部分
.list a{font-size:13px;}※タイトル部分
テンプレ作者は元々の数字フォントが小さいためにわざと20pxにしたのでしょう。

ダミー抜粋
<div class="list"><div>01.<a>小説タイトル</a><br> 内容の説明</div></p></div>
で、
.list{font-size:13px;}
.list a{font-size:13px;}
恐らく内容説明文が大きくなって13pxに減らしてみたのでは。pタグをdivに書き換えたときの名残か不要なpの閉じタグもあります。
CSSの該当箇所を
.list>div{font-size:20px;}
.list>div>a{font-size:13px;}
に直せば二と三は解決かと。
ただし内容説明は大きくなるのでまた別の書き方が必要です。

一は謎の空白がどれのことか解らないのでスルー
1ページ中1ページ目

関連スレッド

関連スレッド



Back to Top