import-返信 | ナノ

::Response
簡易コメントやお問い合わせへの返信・回答ページです。
返信不要のメッセージもいつも大切に読ませて頂いています。ありがとうございます。
※タイトルクリックで内容部分が開閉します。

11/21　蒼月さまへ: まずは返信が遅くなってしまい申し訳ありません…！
ご来訪、ならびに当テンプレートのご使用ありがとうございます。

さて、ご質問の件ですが、このテンプレートのメニューは、<div class="menu">～</div>で囲まれた部分にあるリンク（#page数字_リンク文字#や<a href="URL">リンク文字</a>）が丸角の背景付きになる、という設定しか行っておりません。
なので、正常にテンプレートが適用されているなら、スペースを入れても問題ありませんのできちんとスペースがあきます。
↓実際にサンプルページにリンクされたコピーページの記述を使って作ったサンプル
サンプルページ

申し訳ありませんが、同じ状況を再現できなかったため、アドバイスすることが出来ません。
もう少し状況を詳しく教えていただくか、可能であれば実際のページを拝見させていただくとあるいは解決できるかなと思いますが…。
お力になれなくて申し訳ありません。
(2015/11/29 21:55)
11/6　ポッカレモンさま: 初めまして。ご来訪、ならびに当テンプレートのご使用ありがとうございます。
そしてお返事が大変遅くなってしまい申し訳ありません…！

B07の色違いとのことでしたが、シンプル小説02[N07+]*灰青の配色を転用しまして、↓のような感じにしてみましたがいかがでしょうか？
コメレス/疑似スレッド[B07]*灰青
突貫工事で色を変えただけで、あまり細かいところまでの動作チェックはできていないのですが、特に問題なく使えるかと思います。

色の改変の場所についてですが、CSS内にコメントをつけており『/*--- 一覧画面リスト開閉の設定 ---*/』より下の部分がそれにあたります。
このテンプレートは、もとより改変しやすいように細かくコメントをつけていますので、変えたい場所…例えば日記タイトルの部分の色を変えたければ/* タイトル部分 */や/* タイトル左マーク */などの部分を探してみてください。
各プロパティの役割については、改変指南ページ内のよく使うプロパティで一通り説明していますので参考にされてみてください。

Mailフォームのテンプレートについてですが、以前当サイトデザインでのテンプレートのご希望を頂いたことがありまして、いずれはMailフォームを含むセットテンプレートでの配布を考えていますが、今のところ日程は決まっておりません。
といいますのも、かなり前に正式なリクエストをお受けしたテンプレートが未だ消化できておらずかなりお待たせしている状態でして、先にそちらをすべて終わらせてからと考えていますので、それが終わらないかぎりは着手できないのです…。
申し訳ありませんが、気長にお待ちいただけますと幸いです。

最近は夜がめっきり寒くなりまして、昼夜の寒暖差も激しくなっておりますね。ポッカレモンさまも体調の変化には十分お気をつけ下さい。
この度はご要望ありがとうございました。お役に立ちましたら幸いです。
(2015/11/15 22:36)
10/12　陽菜さまへ: 返信が遅くなりすみません…！
色々と試してみて、分からないところがありましたらまたお気にお問い合わせください。
素敵なホームページになるといいですね。
ありがとうございました。
(2015/10/18 13:55)
10/12　蒼月さまへ: 返信が遅くなりすみません…！
希望のレイアウトになりましたなら良かったです^^
マイペースにではありますが、また蒼月さまの気に入ってもらえるようなテンプレートを作成出来ればと思います。
サポートについては、私に分かる限りはやりたいと思っていますので、どうぞお気になさらず。

当テンプレートが貴サイトのお役に立っていましたらうれしいです。ありがとうございました。
(2015/10/18 13:48)
10/11　蒼月さまへ: 再びのご来訪ありがとうございます。
無礼などとは全く思っていないのでどうぞお気になさらずに。拍手の方はどうやら解決されたようで良かったです。

さてご質問の件です。
まず、確認いただきたいところが2ヶ所あります。
1、メニュー部分のリンクが、ちゃんと<div class="menu">～</div>で囲まれているかどうか。
<div class="menu">リンクメニュー</div>

2、下のCSSがHEAD・HTML詳細内にあるかどうか
※/* ---PC＆スマホ--- */ブロックの下の方にあります
.menu a {
line-height: 2.5;
padding: 0.5em 1em;
border-radius: 5px;
background-color: #e5f6ff;
color: #2360c8;
white-space: nowrap;
}
.menu a:hover {
background-color: #bbe2f1;
color: #0c2146;
}
このbackground-color: #e5f6ff;やborder-radius: 5px;が丸角のリンク背景のレイアウト設定部分です。
簡単に説明しますと.menu {～～}の設定が<div class="menu">～</div>で囲われた部分にあるリンク（a）に適用されます。
※この辺りがわからない場合は、改変指南内にあるCSSの書き方で一通り説明していますのでご参照下さい。

2の部分がない場合は、単純にCSSをコピーし忘れているだけだと思いますので、サイト内限定テンプレート作成手順に従い、基準CSSの下にレイアウト用CSSであるHEAD内CSSを貼り付けて下さい。

手順に従っていただければそう難しくはないと思いますので、一つ一つ確かめながらやってみてください。
素敵なホームページになるといいですね。
また分からない所がありましたらお気軽にお問合せ下さい。お役に立ちましたら幸いです。
(2015/10/11 20:49)
10/11　詩音さまへ: ご来訪、並びに当テンプレートを使いたいと思ってくださりありがとうございます。

さてご質問の件ですが、拍手でも特に問題なく適用できます。
やり方としては、既に公開しております同セットの機能テンプレを転用すればやり方としては決して難しくはないかと思います。

特にひねった場所もありませんが、完成図としては下のような感じです。

※メニューの中に『Clap』を組み込む、という想定で作成しています。

今回は、とりあえずメールフォームより転用しています。
【1】拍手機能を作成
【2】基本設定
・ページ貼付時のリンクタイプ『テキストリンク』
・ページ貼付時表示『Clap』※メニューに表示させたい文字
その他の設定は拍手の内容に合わせてお好みの設定でどうぞ。
【3】全体レイアウト
・メールフォームコピーページより全体レイアウトをコピー
・拍手機能の全体レイアウト内に貼り付け
・＃form＃となっている部分を＃clap＃へ変更（＃は半角）
【4】ありがとう画面
※下の＃は半角で！
<div class="midashi2">Clap</div>

お例文とか絵とかをこの辺りに
＃formStart＃＃formInput_18＃＃formSubmit_送信＃＃formEnd＃
その他の細かいレイアウトなどはお好みで調整されて下さい。
また、当サイト内のようにページ内に拍手を設置という感じであれば、基本設定の部分が変わります。
このひとつ前の返信に手順を詳しく書いていますのでご参照下さい。

このような感じでいかがでしょうか。何か疑問点がありましたらまたお気軽にお問合せ下さい。
お役に立ちましたら幸いです。
(2015/10/11 20:49)
10/11　蒼月さまへ: 初めまして。ご来訪並びに当テンプレートを使いたいと思ってくださりありがとうございます。

さっそくですがご質問の件です。
※CSSと全体レイアウトは既に記述済という前提で回答させて頂きます。
シンプルめなページ青[TOP5]-全体レイアウトコピーページ
まず、リンクメニューの件ですが、上記リンク内にありますように、リンクメニューは↓のような使い方をします。
<div class="menu">リンクメニュー</div>
"リンクメニュー"と書かれた部分に、各ページ・機能編集画面の一番下にある、『貼り付け用独自タグ』…＃page1_リンク名＃や＃novel1_リンク名＃などの独自タグを配置すれば自動でサンプルの表示と同じ形になります。

次に拍手フォームの件ですが、既に『拍手機能』は作成されていますでしょうか？
未作成の場合は、機能作成から新規で拍手機能を作成して下さい。
あとは、上記リンク内の▼拍手例と書かれた部分の処理をします。

※↓の＃は実際に使う場合は半角で！
【拍手機能設定画面】
基本設定→ページ貼付時のリンクタイプ『レイアウト指定』
貼り付け時レイアウト→『＃formStart＃＃formInput_18＃　＃
formSubmit_ボタン名＃＃formEnd＃』
【貼り付けたいページの全体レイアウト画面】
＃clap数字＃
または、
＃clap数字_ボタン名＃
※数字の部分は、拍手機能編集画面の『貼り付け用独自タグ』に表示されている数字です。

中央に表示したい場合は、↓のように使います。
<div class="center">＃clap1＃</div>

以上の手順を踏むと、全体レイアウト内は下図のようになるかと思います。
※ピンク枠がリンク部分、青枠が拍手の部分です。

なお、サイトの基本設定…『ホムペ設定』→『その他共通設定』で改行を　<br>に変換して表示『する』の場合は、<br />の部分や空白行は全て詰めて記述する必要がありますのでご注意下さい。

これで解決するかと思いますがいかがでしょうか。
また分からない所がありましたらお気軽にお問合せ下さい。お役に立ちましたら幸いです。
(2015/10/11 13:58)
10/10　陽菜さまへ: お久しぶりです～。お元気そうで何よりです。
お礼についてはお気になさらずに。もし解決に至っていましたら何よりですし、当テンプレートを愛用下さっているとのことで嬉しい限りです。

さて本題のご質問の件です。
N05のテンプレートは、スマートフォンでのリンクの押しやすさを少しでも向上しようと、リンクを一つのブロックのように扱うための設定を行っています。
なので、簡単に言いますとリンク名が長くなると左右に何も入る隙がなくなりブロックごと下に押し出されてしまうのです。
レイアウトにあまり影響がない形で解決策を考えましたので、以下の手順を試してみてください。

※"smart"のクラス名は、CSSとレイアウト内で使う文字が同じであれば、ご自身の覚えやすい半角英数字に変更してOKです。
【CSS】
/* タイトル一覧リンク余白 */
<smartphone>
.titlelist a {
display: inline-block;
line-height: 1.6;
padding: 0.1em 0.4em;
margin: 0.1em 0;
}
/* ↓ここから追加部分 */
.titlelist .smart {
display: inline-block;
margin: 0.1em 0;
}
.titlelist .smart a {
display: inline;
padding: 0 0.4em;
margin: 0;
}
</smartphone>

【小説ページ編集画面】
▼一覧表示でのタイトルの左
<span class="smart"><em>*</em>
▼一覧表示でのタイトルの右
</span>

そうすると、下図のようになります。
←枠でわかりやすくしたもの
←実際の表示

なお、CSSを追加した後は、長文になるタイトルの作品のみ、タイトルの左と右に同じタグを追加すれば全て同じように表示できます。

…本当は、/* タイトル一覧リンク余白 */のブロックを消してしまえばこの問題は一発で解決するのですが、そうするとリンクに余白がなくなりスマートフォンでリンクが押しづらくなってしまうので、少々手間ですがこの方法で解答しています。
毎回使うのが面倒だったり、特に余白について気にならないようであれば、/* タイトル一覧リンク余白 */の部分を消してしまうのも一つの手かなと思います。その辺りはお好みでどうぞ。

これで解決できるかなと思うのですがいかがでしょうか。
また分からない所がありましたらお気軽にお問合せ下さい。お役に立ちましたら幸いです。
(2015/10/11 13:58)
9/6　矢波さまへ: ご来訪、ならびに不具合のご報告ありがとうございます。
当方のテンプレートを気に入って頂けているようで嬉しいです。

さて、ご連絡下さった件、私の方でもCSSをコピーして小説機能を作ってみたところ、確かに反映しておりませんね…。
調べたところ、コピーページのダウンロードCSSの記述を間違っておりましたので、不具合修正として新しいCSSに差し替えを行いました。
変更部分は以下のフォント名部分のみとなっていますので、既に画像等を設定されている場合は、手動で変更された方が早いかと思います。

▼変更前
<pc><link href="//fonts.googleapis.com/css?family=Glass+Antiqua" rel="stylesheet" type="text/css" /></pc>

▼変更後
<pc><link href="//fonts.googleapis.com/css?family=Flamenco" rel="stylesheet" type="text/css" /></pc>

記述ミスに全く気づいていませんでしたので、今回のご連絡大変助かりました…！
これからは記述ミスのないよう努めます。ありがとうございました。
(2015/09/10 20:34)
9/6　抹茶屋さまへ: まずはご来訪ありがとうございます。お元気そうで何よりです＾＾
さて、ご質問の件ですがサンプルページを拝見したところ、うーん、私のスマートフォンとPC（すみません、ちょっと裏技使って入りました）からだとルビは反映しているようです。
当PCでの見え方→
（実際の見え方をお伝えしたほうが良いかと思いまして、申し訳ないですが、スクショを取らせて頂きました）

スクショの通り、特に不具合が見受けられなかったので、当方でもエムペにてサンプルページを作ってみました。
サンプルページ
当PCでの見え方→スクショ
もし抹茶屋さまの端末でも反映しているようであれば、サンプルページ内に設定したCSSも記述していますので良かったらお試し下さい。

それでも変わらない、となるとあと考えられるのは（PCの場合だと）ブラウザの設定くらいでしょうか…。
どのブラウザをお使いかが分からないので例えの話にはなりますが、Chromeの場合、設定メニューで最小フォントサイズを設定することができます。
CSSでそれ以下のサイズを設定しても、メニューで設定したサイズが最優先されますのでその設定したサイズまでしか小さくなりません。
下のURLはサンプルページで表示している『白菊』の青空文庫のページです。このページでもルビの大きさが変わっていない場合、ブラウザの設定による原因の可能性が高いかなと思います。
URL→http://www.aozora.gr.jp/cards/000096/files/1120_22013.html

▽Chromeで最小フォントサイズを設定する方法
1、右上のレンチアイコン（三のマークのようなもの）、又は、Alt+Fキー
2、設定（S）
3、下の方にある『詳細設定を表示…』をクリック
4、ウェブコンテンツ項目の『フォントをカスタマイズ』
5、最小フォントサイズ項目の↓の文字の左にあるバーを好きな位置に動かす
○○: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
※○○の部分がフォントサイズ

同じ現象を再現できなかったのでないとも解答が難しいのですが、また何か困った部分がありましたらお気軽にお問合せ下さい。お役に立ちましたら幸いです。
(2015/09/10 20:34)
8/18　ポテトトさまへ: ご来訪、ならびに当テンプレートのご使用ありがとうございます。お褒めの言葉も嬉しかったですし、気に入って頂けていることが何より嬉しいです。

さっそくですがご質問の件です。
文書型宣言やXHTML変換については、主にPCブラウザでの表示バグを回収する意味や、古いフィーチャーフォンへ対応する意味が強いので、スマートフォンではこの辺りはあまり気にしなくても良いかと思います。
PCブラウザについてもIE8などかなり古いブラウザを使う方を気にしないのであれば、あまり関係ないです（IE8もシェア的にはほぼ0に近い割合となってきています）。
スマートフォン閲覧時、ナノでは文書型宣言を記述しない場合は、最新の記述方式であるHTML5というものになりますのでバグ等はまず心配ありません。

例えに出されていたサイトを確認してみました。
モバスペはスマートフォン閲覧時の場合特にHTML5に変換されるということはないようです。
ただ、上記のように古いPCブラウザでもない限り、表示については基本的に同じになるはずですので、1文字分スペースが空く原因というのが思いつかなかったです…。実際のページを見てみたら何か分かるかもしれない…という程度なのでお力添えできず申し訳ありません。

例えのサイトの場合は、（それが原因だとは断定できませんが）考えられる要因が一つありましたので一応ご説明させていただきます。
ソースを覗いてみたところ、ほぼすべてのページの冒頭に改行<br>が1つ挿入されているようです。
なので、本来ならモバスペの方のページのように、スマートフォンにおいても１字下がった状態にならなければおかしい、ということになります。
ただ例えのサイトはbodyのすぐ下（全体レイアウトの冒頭の部分）に改行が挿入されている場合と、文字寄せのタグを記述後に改行を挿入している場合がありました。

例1）
<br>
<div class="all">内容内容～～～

例2）
<div style="text-align:left">
<br>
<div class="all">内容内容～～～

一見どちらも同じ結果になるように思えますが、正確な文法的にはbody直下にブロック要素（divなど）を記述しなければ文法エラーとなります（つまり例2が正しい）。
PCだとその辺りはエラーとして認識しない場合が多いのですが、スマートフォンだと最新式であるが故に厳密に文法エラーを取って、改行を認識しない＝冒頭に一行空かない場合もあるのかなと思いました。
他者様のサイトでしたので、むやみにアクセス数を増やして荒らしと思われたら非常に心苦しいのであまり詳しく調べられなかったのですが、見た目の違いが起こる原因の一つとしては十分考えられます。

また、モバスペの方はナノと同じようにスマートフォン閲覧時には専用の外部cssが自動挿入されるようです。
↓関係ありそうな部分
* {
margin: 0;
padding: 0;
word-wrap: break-word;
font-family: Helvetica, HiraKakuProN-W3, sans-serif;
line-height: 150%;
}
a {
line-height: 200%;
text-decoration: underline;
border-bottom: 1px #999;
}
同じcssを使っていても違いが出る場合、レンタル元から自動挿入されるcssによって、違いが出てくる場合もあるかと思います。
スペースに関してだと行間（line-height）が怪しいかな…と思います。

また、フォントに関してですが、広告のところのフォントまで変わっても問題ないのであれば、bodyではなく全称セレクタ（*=全てのセレクタに適用される）にしてみてはどうでしょうか。
全称セレクタに設定すれば、上記の自動挿入cssのフォント設定を確実に上書きされます。
…全称セレクタは優先順位が低いので、bodyで設定すれば本来なら変わるはずなのですが、変わらないというのであれば試して損はないと思います。
color-imgシリーズお使いの場合、
body {
line-height: 1.3;
font-family: Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳゴシック", "MS Gothic", sans-serif;
font-size: 87.5%;
letter-spacing: 1px;
}
のbodyの部分を*に変えても問題ありません（変わるとすれば、入力フォーム内のフォントも上記フォントに変わるくらいです）。

どれも予想での解答で大変申し訳ありませんが、何か解決のヒントになれば幸いです。
また分からない部分がありましたらお気軽にお問合せ下さい。ありがとうございました。
(2015/08/23 20:28)
8/4/22時頃　『懐古主義の小説テンプレート～』の方へ: ご来訪、ならびに当テンプレートに興味を持って下さりありがとうございます。
さて、お問合せの件ですが、文章画面のタイトル部分をコピーページから抜き出すと下のようになっています。
<div class="midashi2">＃title＃</div>

この"midashi2"は、テンプレートを小説に転用するにあたり新たに追加した部分になりますので、追加用CSS内に記述があります。
コピーページ直通URL↓
追加CSS

この中にある、midashi2のブロック、つまり『小説タイトル』の部分が該当の設定になります。
/* 小説タイトル */
.midashi2 {
line-height: 1.5;
margin-bottom: 0.5em;
border-bottom: 1px solid #597680;
}
そしてこのborder-bottom部分が下線の設定ですので、太さや形状、色など自由に変えて頂けます。
どれがどの役割かなどは、改変指南ページ内のよく使うプロパティで解説していますので宜しければ参照下さい。

参考になりましたら幸いです。
(2015/08/05 22:17)
7/4　『helix』についてお問合せの方へ: ご来訪、ならびに当テンプレートに興味を持って下さりありがとうございます。

▼カウンターについて
考えられる原因として、タイトル部分を囲むタグが<div>になってはいませんでしょうか？
<div>はブロック要素と呼ばれるもので、このタグで囲まれた前後は強制的に改行されます。
改行をしたくない場合は、<span>タグを使ってみてください。
使用例↓
<span class="title">タイトル</span>

▼拍手について
まず確認ですが、拍手機能は作られていますでしょうか？
作られていない場合は、機能→拍手にてまずは機能を作成して下さい。
その上で、基本設定の『ページ貼付時のリンクタイプ』を"レイアウト指定"にします。
次に、貼り付け時レイアウト内に、#formStart##formInput_18#　#formSubmit_ボタン名##formEnd#を記述します。
実際にページ内で使う場合は、『#clap数字#』を使います。
こうすることで、#clap数字#の部分にレイアウト指定した拍手のフォームが反映されます。
数字は、拍手編集画面にある貼り付け用独自タグの『#clap数字_リンク文字#』の数字になります。
リンク文字の部分については、レイアウト指定で設定しているものが優先されますので使っても使わなくても同じです。

おそらくこれでうまくいくと思いますがいかがでしょうか。
お役に立ちましたら幸いです。
(2015/07/05 14:50)
7/3　晒しについてご報告下さった方へ: 　ご報告頂きありがとうございます。
　元々このタイトルは、画像を見た時にぱっと思い浮かんだものでしたし（私自身プレイヤーでした）、このテンプレート自体がこれをイメージして作ったといっても過言ではありません。
　このテンプレートを公開する前にひと通り調べましたが、曲名や本のタイトル、見出し名といった、単語の組み合わせは、"一般的には"著作権で保護されない（著作物として取り扱われない）と確認しております。
　参考：単語や短いフレーズも著作権で保護される？
　かと言って、（マナー的な意味で）なんでもかんでも使用していいというものでもないと個人的には思っております。
　今回の場合、元より作品を貶めるための使用でありませんし、このまま静観という形を取る所存です。
　ありがとうございました。
(2015/07/05 14:48)
6/23/12時頃　color+imgシリーズ～の方へ: 返信が遅くなり申し訳ありません…！
ご来訪ならびにいつもコメントありがとうございます。毎度励みにさせて頂いています＾＾
日記の方ではたまに進捗状況をお伝えしていましたが、ようやく公開まで辿り着くことができました。
静かなる警鐘、気に入って頂けたようで嬉しいです。
これからも、サイト製作を楽しいと感じてもらえるようなテンプレートを目指して頑張っていきたいと思います。ありがとうございました！
(2015/06/28 22:52)

［PREV］［NEXT］

↑PAGE-TOP
←BACK-HOME