永遠少年症候群

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形式の縦書き対応。

    痛エディタつくる【Atom/Brackets】

     使ってますか、痛エディタ。

     私もね、日番谷くんを背景に設定してますよ。テンション上がるわ……。ただただ上がるわ……。
     最近Atomに乗り換えたので、その前に使っていたBracketsもご紹介。

    そもそも何が面倒なのか

     cssなどのスタイルで背景画像を指定する際、cssファイルと画像が同階層にあったら、こんな風に相対パスで記述しますよね。

     エディタのテーマではこのような相対パスが使えないのです。拡張機能やパッケージとしてテーマを入れているため、格納場所から素直に呼び出しているわけではないようです。

    Bracketsを痛エディタ化

     Bracketsでは二通りの方法があります。
     base64形式で読み込む方法と、相対パスの場所を特定して画像を置いておく方法です。

    base64方式

     線画のオシャレな嫁の画像に見守ってもらう痛エディタを作りたい場合や、パターンのような小さく単純な画像の場合はbase64でいいと思います。大きいと地獄を見ます!!!!
     画像をbas64に変換して、url部分に入力します。base64への変換は、photoshopで画像レイヤーを右クリックしてSVGコピーするのが簡単でした。そのまま張り付けるとsvgになってしまうのではじめと終わりを削る必要がありますが……。
     photoshopがない方は[winキー]+[R]でファイル名を指定して実行し、[cmd]と入力してOKをクリック、コマンドラインで頑張ってください。cdでフォルダを変更していって、[base64 ファイル名]のコマンドでbase64形式で書き出してくれるはずです。
     その際、下記のようにdata:img/png;base64というbase64で書き出していますよという指定が必要です。pngのところは変わるかも。

    相対パスに先回り方式

     嫁を全画面表示するような痛エディタを作りたかったら、テーマファイルが呼び出される場所に画像を入れてしまうという方法もあります。
     先程の相対パスを入れてみて、F12でコンソールを見てみますと、指定された画像がないというエラーが出ています。
     その場所はfile:///C:/Program Files (x86)/Brackets/www/styles/img.jpgとなっています。
     試しに、そのフォルダをのぞいてみると、imagesフォルダがあり、その配下に様々なアイコンが格納されていました。下記のように入力すると、元々入っていたBracketsのアイコンが呼び出されてBrackets愛のあるエディタになります。

     このように、呼び出し元の相対パスに画像を入れ込むと、大きな画像でも入れられます。

    Atomを痛エディタ化

     Atomも相対パスじゃ通らなかったのですが、Atomはもっと簡単です。
     例えば、atom-syntaxというテーマパッケージの中にimagesディレクトリを作成して、img.jpgという背景画像を格納した場合、呼び出し方は下記のようになります。

     絶対パスなんだけど、atom基準。
     どういう仕組みなんだろうなぁ……。

     表示されない場合は、背景色が上にかぶっている可能性があります。
     新規テーマ作成時のbase.lessの上数行は

     という感じになっているかと思います。
     ここでatom-text-editorにbackground-imageを単純につけても背景色のほうがなぜか強い。
     そのため、背景色はもっと下のレイヤーにつけてあげる必要があります。

     こんな感じ。
     もしくは、@syntax-background-colorを半透明にしてあげたら可読性上がるかもしれませんね。

     ちなみに、既存のテーマをいじるのは嫌だなぁと思って新規でテーマを作成することにしたのですが、こちらの【Atom】完全版!オリジナルテーマを作って公開!~自作テーマの作成と公開の仕方③~という記事がとても参考になりました。
     
     Atomは背景を付けることができるパッケージがありますが、あのパッケージはクソ重いのでテーマ作っちゃうほうがストレスないですね。アニメーションも好きな感じにできるし。

    ちなみに

     日番谷くんエディタはこんな感じです。新規で作って色そのまま。そのうち色を十番隊カラーにする。
     このスクショはAtomですが、Bracketsでも同じような見た目でした。なので、BracketsではBase64方式で表示してました。最初画像を大きくしすぎて編集中に地獄を見ましたが。

     羽織も素敵だけど軍服っぽい日番谷くんもたまらないですね。

    ads