無糖

テンプレート＋１

21/09/03

「How to fly」

高所恐怖症の方は画像を変更してください。

お問い合わせ返信

21/08/19

シキ様

追記

はじめまして、ご連絡ありがとうございます。XRIAでの機能関連についてです。（とっても長くなってしまったので箇条書きで失礼します）

【メールフォーム】
①トップページ側の編集
・body(index)のメールフォーム部分を以下に差し替える  <form action="http://ID.数字.mailbox.xria.biz/?guid=on" method="post" class="mailForm space"> <input type="text" name="name" placeholder="お名前" class="enter"><br> <textarea name="message" placeholder="メッセージを入力してください" class="enter"></textarea><br> <input type="submit" value="送信" class="button"><input type="reset" value="消去" class="button"> <input type="hidden" name="mode" value="send"> </form> 
②メールフォーム機能の編集
・「送信項目設定」で名前、メッセージ以外の項目を「入力自由」に変更する（↑のフォームに入力欄がない項目を入力必須にしてしまうとエラーが発生します）
・メール機能にユートピアの配布CSS適用させる

【名前変換】
※XRIAでは名前変換機能をトップページに設置することができないため、別に小説機能を作成する必要があります。
・body(index)から小説部分以外を削除する（インフォメーションやブクマリストなど）
・名前変換フォームを以下に差し替える
 <form action="http://ID.数字.novel.d.xria.biz/?guid=on" method="post" class="nameChange space"> <input type="text" name="n1" placeholder="名字" class="enter"><input type="text" name="n2" placeholder="名前" class="enter"> <input type="submit" value="input" class="button"> <input type="hidden" name="mode" value="set"> <input type="hidden" name="page_pass" value=""> <p>設定中：#name1##name2#</p> </form>

基本的には以上で実装できると思います。（難しいことになるとお答えできないかもしれませんが）もし動かない場合は再度ご連絡くださいませ。

以下は蛇足かもしれませんが、入力する場所ごとにコードを分けたものです。短編URLを一つ一つ貼り付けなくてもよくなるのでよろしければお使いください。
一覧ページ編集→ページ上部編集ボックス
<a id="top"></a>   <header class="mainHeader mobile_hidden"> <div class="headerContents"> <nav class="mainNav"> <h1>サイト名</h1> <ul> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> </nav> <div class="siteInfo"> last up:00/00/00 <ul class="list-slash"> <li><a href="">rank</a></li> <li><a href="">rank</a></li> <li><a href="">rank</a></li> </ul> </div> </div> </header>   <div class="pageWrap"> <div class="contentsWrap">  <div id="main" class="box"> <section> <h2>main contents</h2> <p>名前変換は全作品共通です。</p> </section>  <form action="http://ID.数字.novel.d.xria.biz/?guid=on" method="post" class="nameChange space"> <input type="text" name="n1" placeholder="名字" class="enter"><input type="text" name="n2" placeholder="名前" class="enter"> <input type="submit" value="input" class="button"> <input type="hidden" name="mode" value="set"> <input type="hidden" name="page_pass" value=""> <p>設定中：#name1##name2#</p> </form>  <h3>long</h3> <p>上に行くほど新しいです。更新はゆっくり。</p>  <ul class="longList space"> <li class="long1"> <div class="longInfo"> <div class="title"><a href="">タイトル</a></div> <div class="summary">説明</div> </div> </li> <li class="long2"> <div class="longInfo"> <div class="title"><a href="">モノクローム・エデン</a></div> <div class="summary">説明</div> </div> </li> <li class="long3"> <div class="longInfo"> <div class="title"><a href="">宵闇のプリズム</a></div> <div class="summary">つかみ取れないものはない</div> </div> </li> <li class="long4"> <div class="longInfo"> <div class="title"><a href="">タッチミー・タッチユー</a></div> <div class="summary">この手を振りほどく勇気を</div> </div> </li> <li class="long5"> <div class="longInfo"> <div class="title"><a href="">ユートピア</a></div> <div class="summary">愛おしすぎて涙が出そう</div> </div> </li> </ul>  <h3>short</h3>  <ul id="short" class="shortList space">
一覧ページ編集→ページ下部編集ボックス
</ul>  </div>  <nav class="backTop"> <a href="#top" id="back">▲</a> </nav> </div> </div>
一覧ページ編集→スレッド部編集ボックス
<li>#title_l#<a href="#url#">#title#</a><span class="caution">#title_r#</span></li>

お問い合わせ返信

21/08/07

いずみ様

追記

はじめまして、ご連絡ありがとうございます。お問い合わせいただいた「Blurred Sky」のビル画像についてです。
backgroundのURLを書き換えても変更が反映されない場合は、キャッシュが影響している可能性が高いです。ブラウザのキャッシュクリアやシークレットモードでの閲覧など、まっさらな状態での閲覧をお試しください。

また、こちらの検証中にCSSの削除漏れを発見したのでお知らせします。.mainHeader::beforeのbackgroundが二行あるうちcenter bottom～で始まる行は不要な記述なので、削除してご利用ください。※表示に問題はないので面倒だったら放っておいてもOKです。

以上、用件のみで失礼いたします。もし解決しなかった場合はお手数ですが、ブラウザや、スマホの場合は使用サービス（ナノ、XRIAなど）を添えて再度ご連絡くださいませ。

テンプレート＋１

21/07/24

「ボーダーライン」

やっぱり水色が好きです。

お問い合わせ返信

21/06/19

ktdk様

追記

はじめまして、ご連絡ありがとうございます。
お問い合わせいただいた「a back lane」のヘッダー画像についてです。大変申し訳ないのですが、私の環境では状況が再現できなかったため詳しい原因が分かりかねます……。

ブラウザのキャッシュが影響している可能性があるので、まずはキャッシュ消去やシークレットモードでの閲覧などをお試しください。

また、本件との関係ははっきりしないのですが、配布ファイルのヘッダーの背景設定部分にタイプミスがありました。（モバイル用CSSのheader{background:～}の指定で、centerと/の間のスペースが二つになっていました）このスペースを一つに修正すればもしかすると上手く表示されるかもしれません。

以上、かもしれないばかりの回答で恐縮ですが、解決に近づけば幸いです。

お問い合わせ返信

21/06/08

saku様

追記

はじめまして、ご連絡ありがとうございます。お返事が遅くなり申し訳ありません。

お問い合わせいただいたユートピアのスクロールについてですが、
httpのページ→スマホ版safari〇、PC版Chrome〇
httpsのページ→スマホ版safari×、PC版Chrome×
という状況でお間違いないでしょうか？

サーバーによって動作が変わることは考えにくいので、アップロードファイルやパスの指定など、何かが上手く設定できていないのかもしれません。

もし配布コードに改変を加えている場合は、jQueryの読み込みURLがhttpsから始まるものになっているかご確認ください。（<script src="https://～）
※httpsのページでは、httpから始まるURLの読み込みがブロックされてしまうようです。
また、iPhoneではメモリが重くなるとアニメーションが動かなくなる場合もあるそうなので、他のアプリを終了してからの読み込みもお試しください。

解決しない場合はお手数ですが、「当サイトの配布ページでの動作の様子」「iOS、Safariのバージョン」などの詳細を添えて再度ご連絡いただければと思います。

Blurred Skyのzipファイルについてご連絡くださった方

追記

Twitterでもお知らせしましたが、改めましてご連絡ありがとうございました。

リンクを修正して現在はダウンロードできるようになっていますので、お手数ですが再度お試しくださいませ。ご迷惑をお掛けして申し訳ありません。

テンプレート＋１

21/06/01

「Blurred Sky」

水彩っぽく塗るのが楽しかったです。トップページの動作は今のサイトデザインを流用しました。

お問い合わせ返信

21/04/06

まるまる様

追記

はじめまして、ご連絡ありがとうございます。お返事が遅くなり申し訳ありません。

お問い合わせの件ですが、どちらもナノの設定でhtmlの改行を<br>にして表示する設定が有効になっているのが原因だと思います。
①ホムペ設定→その他表示設定→改行を<br>にして表示「しない」に変更するか、②bodyの～と以下の改行を消去して一行で記載すれば正しく表示されます。※表示的には①がおすすめですが、他のページのレイアウトに障る可能性もあるのでご注意ください。

検証に使ったコード（②を適用したもの）を以下に記載しますので、よろしければ該当箇所を差し替えてお使いください。
 <ul class="profList"><li><div>誕生日</div>01/01</li><li><div>血液型</div>O型</li><li><div>身長</div>000㎝</li><li><div>体重</div>00㎏</li><li><div>好きな色</div>ブルーグレー</li></ul>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>$(function(){var $box = $('.box');$('.bgColor, li > div, .profText').addClass('changeBg');$($box).each(function(){var $color = $(this).data('color');var $targetBg = $(this).find('.changeBg');$($targetBg).css('background-color', $color);});$(window).scroll(function(){var $scroll = $(window).scrollTop();$($box).each(function(){var $point = $(this).offset().top - $(window).innerHeight() * 0.3;var $target = $(this);if($scroll >= $point) {$target.addClass('view');} else {$target.removeClass('view');}});});$('#back').click(function(){$('html,body').animate({scrollTop:0}, 1200);});});</script>

お問い合わせ返信

21/03/07

じゅんな様

はじめまして。ご連絡ありがとうございます。温かいご感想までいただき恐縮です。
お問い合わせいただいた件についてですが、画像のような状態でお間違いありませんでしょうか？

これはナノのサイトをスマホで閲覧した際に自動で読み込まれるCSSが原因だと思います。

方法①
シンプルな解決策としては、モバイル用（画面幅599px以下用）のCSSを以下のように書き換えて、ナノ側のCSSを上書きすれば配布ページと同じような表示になります。

textarea { width: 90%; } /* ↓ここから追加部分 */ form input[type="text"], form input[type="submit"] { width: auto; height: auto; padding: 3px; background: #ffffff; border: solid 1px #000000; border-radius: 0; box-shadow: none; color: inherit; font-size: inherit; font-weight: normal; } form input[type="submit"] { padding: 3px 1em; background: #f0f0f0; } /* ↑ここまで追加部分 */ form input[type="text"] { margin-right: 0.5em; width: 7em; }

方法②
他のサイトの受け売りですが、ナノ側のCSSファイルを読み込ませないという方法でも解決できるようです。（こちらについてsikaku様が「ナノのスマホ向け自動出力CSSの消去」という記事を掲載されているのでそっとご紹介します）

私の方で試したところ、①②ともにAndroid10のスマホから問題なく表示されました。もしうまく表示されないなどの不具合がありましたら、お手数ですが再度ご連絡ください。

お問い合わせ返信

21/02/15

梅様

追記

はじめまして。ご連絡ありがとうございます。
チョコミントの小説ページで、背景色が上手く表示されない件についてです。
背景の白い部分は、/* 全体の余白、リンク色など */直下の.pageWrapの中のbackground:#fff;で指定しているので、後からの記述でこの値が上書きされてしまっていないかご確認ください。
同じCSSファイルを読み込んでいても一方のページだけしか表示されない場合は、htmlの方に原因がある可能性もあります。ページ全体が<div class="pageWrap">～</div>で囲まれているか（不要な</div>でpageWrapが閉じてしまっていないか）なども再度ご確認ください。

テンプレート＋１

21/01/09

「noise」

明けましておめでとうございました。

「オールドフラワー」でタイトルをお借りしていたサイトさんが閉鎖されていたのでこちらも上げ直してます。

お問い合わせ返信

20/12/16

まいみ様

追記

はじめまして。ご連絡いただきありがとうございます。
お問い合わせいただいた件ですが、私の環境では以下のコードで問題なく追加できました。

html

<li id="box6">
    <a href="">
        <div class="longInfo">タイトル</div>
        <span class="longTitle">あらすじ</span>
    </a>
</li>

CSS

#box6 {
    background: url('URL') center / cover #bbbbbb;
}

ボックスの数に上限はないので、何かが上手く指定できていないことが考えられます。
まずは上記をそのままコピペ→開発者ツールなどをご利用の上、box6の要素にどんなCSSが適用されているかご覧ください。

→上記のCSSが適用されていない場合
htmlやCSSの記述に過不足がないかをご確認ください。

→上記のCSSが適用されている場合
画像の拡張子や、相対パスがcssファイルから見たものになっているかなど、画像に関する部分を再度ご確認ください。

※可能性は低いですが、お使いのアコーディオンメニューで「box6」というidを使用している場合は、他の文字列を使用するという対応でも解決できると思います。

お問い合わせ返信

20/12/08

ご感想などをお送りくださった皆様もありがとうございました。

C様

追記

はじめまして。ご連絡ありがとうございます。お褒めの言葉もいただけて嬉しいです！

ヘッダーの高さに関してですが、親要素のbodyにheightが指定されている場合にheaderのheight:150%が作用しているのが原因かもしれません。
すでにお試しいただいた方法（headerの高さを20remに指定）の他に、モバイル版CSS/* ヘッダー設定 */のheight: 150%;を削除でも解決すると思うので、よろしければお試しください。ご迷惑をおかけして申し訳ありません。
※ヘッダーのheight:150%があまり意味のない指定であることを知ったので配布CSSからも削除しました。

改装が反映されていない方

追記

はじめまして。ご連絡ありがとうございます。
お問い合わせいただいた件ですが、キャッシュの関係で上手く表示されないのかもしれません。お手数ですが、Webサイトデータの削除やシークレットモードでの閲覧をお試しいただけますでしょうか？ご迷惑をお掛けして申し訳ありません。
またご連絡についてはどの件についてもサイトのフォームからお送りいただいて大丈夫です。お気遣いありがとうございます。

サイト改装

20/12/05

サイトを改装しました。

（12/08追記）トップページの更新日表示はWeb屋の芝生DIY様の記事を参考にして作成しました。

テンプレート＋１

20/11/22

「memories」

リクエストありがとうございました！

シングルページというと私の中ではこのイメージなんですが、もし読み取り間違えていたら教えてください。（12/08追記）合ってたようで良かったです！

そして今回のリクエスト募集はこの辺りで締め切りたいと思います。約半年間お付き合いいただきありがとうございました！