WordPress 有料テーマ Snow Monkey の基本的な構造について – CSS・エディタースタイル設計編
Snow Monkey アドベントカレンダー6日目の記事です。 昨日はさとうさんが「Snow Monkey オンラインセミナーに参加しました！」というタイトルで Snow Monkey オンラインコミュニティでライブ放送を視聴したときのことを記事にしてくださいました。とても嬉しくなる記事で、ライブ放送もやってよかったなと思いました。ライブ放送はまたやってみたいと思います！ 今日は Snow Monkey の CSS 設計や CSS・エディタースタイルに関する Tips なんかを書きたいと思います。 命名規則・CSS フレームワーク Snow Monkey は Basis という自作の Sass/CSS フレームワークを使用しています。Basis については今までいくつか記事を書いているので詳しくはそちらをご参照ください。 Basis は命名規則に FLOCSS を使っているので、Snow
WordPressテーマ作成にSASSとGulpを使った環境構築 - Qiita
Gulpを使って色々な処理を自動化する方法 https://tech-dig.jp/%E3%80%90gulp%E5%85%A5%E9%96%80%E3%80%91gulp%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%89%B2%E3%80%85%E3%81%AA%E5%87%A6%E7%90%86%E3%82%92%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ GulpでWordPressのテーマ開発はここまで効率化できた https://www.webprofessional.jp/wordpress-theme-automation-with-gulp/ https://sndbox.jp/websystem-develop/wordpress/wordpress-sa
めっちゃうれしい！GulpでWordPressのテーマ開発はここまで効率化できた
Sassのコンパイルや画像の最適化、ブラウザーのリロードなど、面倒な作業を自動化できるタスクランナー。WordPressテーマの開発でも威力を発揮しそうです。設定が面倒でしょ？ と思っていた人も、これをきっかけにはじめてみたら？ Webサイトのコードは複雑化する一途で、繰り返しの作業が生じるのがごく当たり前になっています。しかし、世の中にはより優れた、効果的な開発プロセスがあるはずです。 このチュートリアルでは、Gulpを使ってWordPressのテーマ作成を自動化する方法と、ワークフローの自動化でテーマ作成のプロセスを改善する方法を紹介します。 なぜワークフローの自動化が必要なのか ワークフローを最適化することは、開発プロセスにおいて非常に有益で、取り組む価値があります。その理由をいくつか挙げます。 カスタムツールで、繰り返しの多い、つまらないタスクをすべて省ける ほかの重要なコアとなる
Sass+CompassでWordPress用のCSSを作ると、ビジュアルエディタ用CSSの管理が幸せになる。
Sass+CompassでWordPress用のCSSを作ると、ビジュアルエディタ用CSSの管理が幸せになる。 WordPressのエディタ用CSS、editor−style.cssとしてよく紹介されていますが、すごく便利ですよね。 サイトによって違うスタイルを、いい感じに管理画面で表示することで、記事の完成系がすごくわかりやすく、直感的な操作に近付きます。 ちなみにこのブログはこんな感じのビジュアルエディタで投稿されています！ 自分のブログやウェブサイトでは使っていなくても、実案件などでは使っているよ！という人も多いのではないでしょうか。 ただ、普通に用意しようとすると、面倒臭いんですよね。 メインのcssに変更を入れるたび、editor-style.cssにも手を入れなくてはならないというのはどうにも面倒臭い。 @importでCSSを読み込む形で切り分けても良いのですが、何かと柔軟に
GulpでSassのコンパイルとWordPressデータベースのエクスポートを設定してみた
Gulp はフロントエンドまわりのあれこれを自動化してくれるタスクランナー、ビルドツールです。同じようなツールとして Grunt がありまして、僕はいつも Grunt のほうを使っていたのでこれまでにもいくつか記事を書いています。 どうも最近 Grunt よりも Gulp のほうが軽くて良いぞという声をちらほら聞いていたのでちょっと試してみました。 準備など… 僕はVCCWでローカルの WordPress 環境を作成しており、Gulp を含めたファイルの配置は以下のようになっています。 - /PATH/TO/DIR - vccw/ - www/ - wordpress/ - wp-content/ - themes - mytheme - scss/ - style.scss - style.css - gulpfile.js - mysql/ < gulp でデータベースをエクスポートし
第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」を開催しました
おはようございます。 よつばデザイン：後藤さん、コワーキングスペース茅場町：田中さん、InAdvanceonlyの小林さんの４人で主催している「ゼロから始めるWordPress勉強会」を昨日9月17日にコワーキングスペース茅場町で開催しました。 第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」＆質問大会！〜 – Co-Edo WordPress 勉強会 | Doorkeeper 今回のゼロから始めるWordPress勉強会はSassとフレームワークを活用したテーマ作りを勉強します。 Sassって何？ Sassについてゼロから解説いたします（小林） Bootstrapって何 … 最終的に29名もの方々にご参加いただきました。 みなさん、ありがとうございます！ 今回のテーマは「Sass+Bootstrap+_sでテーマを作ろう」 今までは
超倍速でWordPressオリジナルテーマ作成！骨だけ「Bones」の使い方をザックリと
【発表】WP テーマ選びで悩んでる？ 日本語テーマの比較はこちら。 デモサイトを見ながら使い方とできることを比べられます 【テーマ選び方】8つ比較 「Bones」は、WordPressの「ブランクテーマ」とか、「スターターテーマ」って呼ばれる、カスタマイズ前提のテーマの一つなのだけど、そのカスタマイズのしやすさが他のブランクテーマと比較して圧倒的です。（当人比。ちなみに、その他のブランクテーマは下記リンク先を） 密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ 「Bones＝骨ばっかり」というその名が示す通り、「骨組み」として、自分好みに肉付けしやすく、オリジナルのテーマ作成をビューンとひとっ飛びに高速で進められます。 簡単にまず、優れた特徴をあげてみましょう。 子テーマ不要 よそ様が作ったテーマをカスタマイズする場合、子テーマを用意した方がいいです。直接、元のテーマ
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。 Read less
知って得するSass/Compassのインストールと使い方
本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする設定の方法を紹介。第2回の「WordPress初心者でも爆捗！ テンプレートカスタマイズ＆ショートコード作成超入門」でWordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説した。 第3回の「CSSコーディングで泣かないためのSassの基礎知識と10の利点」では、さらなる爆捗のために、「Sass」についての概略を解説した。第4回の前回「いまさら聞けないSassの使い方入門―― インストールとコマンド、Dreamweaver連携」では、Sassの
WordPressでSass,Lessが使える！Jetpackでブラウザからコンパイル！
WordPress.com(ブログサービスのほう)のCSSエディターがSass・Lessに対応したようです。 WordPress.comの機能はパッケージ型のWordPressでもJetpackプラグインにより提供されているので早速試してみました。 とりあえずプラグインをインストール。 1. プラグインからJetpack by WordPress.comをインストール。 2. WordPress.comのアカウントが必要なので登録しアカウント認証。 インストールと認証が完了するとJetPackのメニューが現れます。 JetPackのメニューからカスタムCSSを選択。 もしくは、「外観」から追加された「CSS編集」。 CSSスタイルシートエディター画面にいきます。 この「カスタムCSS」とは、テーマのstyle.cssとは別のCSSで、 テーマのCSSをいじらずに外観を編集する際に使用します
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
