Wood-Roots:blogHOMEWorks201804/27コードを投稿し共有できるサービス「Codetter」をリニューアルしましたWorksコードを投稿し共有できるサービスCodetter(こーどったー)をリニューアルしました。調べてみると2011年7月リリースだった...7年前とは...。ADsCodetterとは何かもともとはTwitterにコードを投稿しづらい(字数制限や昔は改行も入れられなかった)ため、外部に投稿してTwitterにリンクを投稿すればどうかと思い作成したサービスです。リリースしたWordPressを使ったWebサービスで、はじめてニュースサイトで紹介されました(ツイナビというサイトです)。これで味を占めてWordPressでいろいろと作るようになったものの、作れども作れどもパッとしないまま現在に至ります...。同様のサービス(で遥かに高機能...)はGistやCodePen、jsFiddleなどがありますが、Codetterはもっとフランクにカジュアルに、動くかどうか分からないような雑コードでも投稿できるような、ゆるいサービスを目指したいと思っています。以前のTwitterのロゴをパk...モチーフにしたロゴを使っていましたが、今はTwitterも鳥だけのオシャレなロゴになりましたので独自のロゴを作成しました。「<>」を図案化したものです。いえばヒゥイヒヒーなどと言われてましたね。Bootstrap4の使用これまでCSSフレームワークはfoundationしか使ったことがなかったのですが、今回Bootstrap4を使ってみました。Bootstrap3以前はデザイン面での主張が強く、一目でBoostrapと分かってしまうものでしたが、Bootstrap4はまさに「フレーム」としての役目に特化したものという印象です。font-sizeやfont-family、配色などは調整しないと日本語環境で野暮ったくなってしまいますが、主張しすぎないグリッドレイアウトがクラスの付加だけでできあがります。実際に使ってみて、以下の点を注意すると扱いやすいのではないかなと思います。bg-white"><p>あああああああああ</p></div></div>と極力クラスの付加で対応するようにすると、レイアウトの破綻が起きにくいのではないかと思います。クラスが足せない場合は@extendを活用するWordPressに限りませんが、CMSが自動で出力するHTMLを修正するのは難易度の高い作業です。正規表現を使ったりJavascriptで無理やり整形したり、最悪コアファイルをいじらないと修正できないというケースもあります。そのようなHTMLに対しては、Sassの@extendを使い必要なクラスのスタイルを付加します。以下のようなHTMLを出力しますが、このul>liにナビゲーション用のクラスを付けようとするとフィルターフックで正規表現を書かないといけないためとてもめんどくさいです。title="カテゴリー概要">カテゴリー名</a></li></ul>そこでCSSに以下のように書きます。同じスタイルが適用できます。Bootstrap4を使うにはSassのビルド環境が必須と言ってもいいでしょう。Editor)の導入これまでは単なるtextareaだったのですが、Aceというエディタ環境を導入しました。入力中のハイライト表示のほか、タブの入力や自動インデント、アンドゥ・リドゥなどの機能が使用できます。́∀`)投稿ページだけでなく通常の表示でもReadOnlyモードで使用していますが、個別ページはまだしも一覧ページがだいぶもっさりと重いので何か手段を考えたいと思います...。DNSの変更でまた手こずってしまった...。ConoHaへの課金も着実に増えてきたので誰か!このリンクから申し込んで!ということで改めてCodetterをよろしくお願いいたします。Articles関連記事Works2018.04.27コードを投稿し共有できるサービス「Codetter」をリニューアルしましたWorksWordPressサーバー2018.04.17当ブログをWebサーバのみConoHaに移管し、常時SSLに対応しましたWorks2017.12.125年前にリリースした楽天モデルのWebギャラリー「楽モ」をリニューアルしましたWorks2017.05.085年前にリリースした「Web制作者の(苦笑)」をリニューアルしました。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトCommentsコメントはまだありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。