自作システムの個人ブログ

様々な情報について適当に記述しています。
(モバイル向け)サイドバーまで飛ばす

「bootstrap」の検索結果

投稿: 2017年02月15日 / 更新: 2017年02月22日 / 筆者: イスターリャ / Comment: 4 / タグ: 運営 システム WYSIWYG freshereditor bootstrap

はじめ

当ブログは元々完全自作をするつもりであった。
ネットからCSSのサンプルを拾ってきたりはしたがどれも5行未満で、ちゃんと読めば自分でも書ける程度のものだ。
ところが、記事を執筆する時点でその目論見というか予定は崩れた。
記事を編集するためのWYSIWYGエディタ。これは(多分)自作するよりも既存のものを使ったほうが早いと思った。

WYSIWYGエディタ

そこでダウンロードしたのがfreshereditor(フレッシャーエディタ)
http://jquery-plugins.net/freshereditor-jquery-rich-text-editor
divタグのcontenteditable属性を利用したエディタで、ブラウザ間の環境差は知らないが、今のところWindows版Chromeの最新版で良い感じに動いている。
bootstrapを使用した立体的で分かりやすい操作ボタン、枠のないスタイリッシュな編集画面は私の心に「これだ!」という感想を持たせた。

早速ダウンロードし、GitHubに載っているクイックスタートをコピペ・ちょっと改変し、ダウンロードしたファイルを配置し、いざ試すと、そこには素晴らしいテキスト編集体験があった。
WYSIWYGはWikipediaによると「What You See IWhat You Get(見たままが得られる)」という意味らしいが、幾つか試した後、これが一番私に合ったエディタだと再確認した。
もちろん、上記のカギ括弧の中身のように、書式付きコピペも可能。まさにその名の通りである。

しかし……

便利すぎて感動のあまり不要なテキストを打っては消し、また打っては消しを繰り返していたのだが、ある重大なことに気がついた。
なんと、ブログタイトル等の一部レイアウトが崩れてしまっていたのである。
これには驚いた。同時にテキストフォームも妙なデザインになっていて、これは何だと調べた。

結果、bootstrapなるものがこのデザインに関わっていることが分かった。
bootstrapとはフロントエンドWebアプリケーションフレームワークだとか書いてあるけど、現在、私はデザインテンプレートのようなものとして認識している。
10kBものCSSのテキストに様々なデザインが定義されているのだ。
なんかJavaScriptもあるらしいが、そちらは今回お世話にならなかったのでカット。

bootstrap排除

この記事を執筆している前日には、bootstrapを排除し、また他のbootstrapを使わないWYSIWYGエディタを探すか自作しよう、と思っていたのだが、bootstrap.cssをよくよく見てみると(当然だが)いくつかの部分に分かれている模様だった。
これをいじることでなんとかならないか、試行錯誤してみた。

主にコメントアウトしかしていないが、なんとかブログデザインを崩さずにbootstrapを利用できるようになった。
ただしコメントアウトが中途半端なので、まだ今後不具合が出てくるかもしれない。
今後もbootstrapに頼るのはエディタだけにしておきたい。