永遠少年症候群

MENU

about

当サイトは趣味の創作サイトです。著作権は特に明記のない限り放棄していません。
リンクはご自由にどうぞ。
画像リンクの際は下記のバナーをご利用ください。

かいてるひと

ぶくま

Search

title

いつもご利用ありがとうございます。
お題一覧

rule

お題使用の際のリンク・報告は任意です。あったら嬉しいです。もしも報告くださる場合は メール Twitterから。
語尾・一人称等、趣旨が変わらない程度の改変はOKです。
セットお題は1題から抜き出して構いません。あいうえお作文からの抜き出しはご遠慮ください。
自作発言とお題の再配布は禁止いたします。
他のお題配布サイト様のお題と混ぜることはおやめください。

FAQ

最近よくある質問です。基本的に自作発言とお題としての再配布をしないでいただけたら大体の場合は大丈夫です。

二次創作や年齢制限ありのものに使用OKですか?
どうぞ。
同人誌/コピー本での使用OKですか?
どうぞ。奥付などにお題使用の旨は明記してください。
その他の媒体での使用OKですか?
お題使用の明記ができるかどうか、を判断基準にしてください。

novel

ファンタジー、恋愛要素、ハッピーエンド多め。
たまに暴力やグロテスクな表現があります。
小説一覧

Series

  • あいうえお題
  • 血飛沫の国のアリス
  • bloody
  • 僕は勇者になりたかった
  • Celia in Realworld.
  • ココにあるもの
  • エトセトラ!
  • G@mE
  • ハッピーエンドはまだ遠い
  • LUCKY GIRL
  • ファンタジー設定で∞のお題
  • 教えられない教師の話
  • Secondary creation
  • 掌編
  • イメージソング
  • 大正哀歌
  • 世界観・人物紹介
  • 他の形式で読む

    ブクログのパブー……電子書籍形式。詩の投稿はこちらのみ。
    小説家になろう……ガラケー、スマホ対応。pdf形式の縦書き対応。

    シンプルなleanmodalをスマホでも見やすく

     サイト改装にあたり、トップページとお題ページでモーダルウィンドウを多用しております。
     jqueryはleanModalを利用。シンプルで使いやすいです。

    スクロールしたい問題

     ただ、スマホから見た時や長い文章の場合、固定しているのでスクロールしても読めない!
     jquery.leanModal.min.jsの中でポジションが指定されているので、fixedをabsoluteに変えます。

    上に固定されて見えなくなる問題

     スクロールできるようになったけど、今度はスクロールした後に開いたモーダルウィンドウが短かったら上の方に表示されてしまって見えない!
     topはオプションで変更できるため、そこをどうにかしようにもクリックイベントでスクロール位置とって変数入れたらなぜか2回クリックしなきゃ反応しなかったりcssぶっこんで上書きはなんかこう……力技って感じで……。
     さっきもう既にいじってるし、オプションのtopは設定せずにjquery.leanModal.min.jsをいじることにしました。
     モーダルウィンドウのidをクリックイベントで拾っているため、その中でスクロール位置を取ってcssを設定している中のtopをスクロール位置+任意の数字+”pxにすればいいわけです。

    あとは好みの問題

     使っていない変数が宣言されていたので消したらいいかも。
     それから、モーダルウィンドウの中央配置にleft:50%;を設定して、モーダルウィンドウの横幅の半分をmargin-leftでマイナスしているのですが、leftに画面の半分からモーダルウィンドウの横幅の半分を引いた数値を入れた方がcssとしてスマートじゃない?

    以上を総合するとこうなる

     どこの部分なのか説明が面倒なので全文。MIT/GPLのため、上部の著作権表示は残してください。

     scrollTopの後ろに+100をつけていますが、スクロール上部から100pxの位置にきます。好きな数字に変更してください。
     オプションを直接してしまえば他にも減らせるところはありますが、とりあえずスマホでも見やすくするという目標は達成したので以上。

    ads