使いやすいWordPressのためのCSSのつくりかた第45回 WordBench 大阪での発表資料です。 あとがき：http://www.torounit.com/blog/2015/09/15/2088/
ぼくのかんがえたさいきょうの editor-style #wpacja2013 - Toro_Unit
WordPress Advent Calendar 2013、3日目を担当させていただきます。@Toro_Unitです。 今回はWordPressで活用されているようで活用されていないような気がする、editor-style.cssをがっつり掘り下げてみようかと思います。 そもそもeditor-styleとは WordPressの投稿画面のビジュアルエディタ(ビジュアルリッチエディターとも言いますね)に適用するCSSのことです。 テーマのfunctions.phpに add_editor_style(); と記述すると、テーマ内のeditor-style.cssというファイルが、読み込まれるようになります。 また、引数にファイル名を指定することが可能で、その場合、 add_editor_style("css/editor.css"); とすると、テーマディレクトリのcss/editor.c
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう！〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう！〜
子テーマ - WordPress Codex 日本語版
なぜ子テーマを使うのか? 子テーマの使用にはいくつかの利点があります。 テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。 子テーマを使用することで開発時間を短縮できます。 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。 子テーマの作り方 子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。 子テーマディレクトリ style.css functions.php 子テーマを作成する最初のステップは、子テーマディレクトリの作成です。wp-content/themes ディレクトリ下に作成します。子テーマディレクトリの名前には最後に '-ch
WordPress で Foundation を利用するときの JS と CSS の読み込み方法 - megane9988のブログ
CSS フレームワークの Foundation を利用して、WordPressのテーマを制作する際に関連のJSとCSSを読み込む方法です。ファイルを読み込む際には wp_enqueue_style と wp_enqueue_script を使います。読み込んだままだと app.js において [code lang=text] Uncaught TypeError: undefined is not a function [/code] というエラーが出てしまい正しく動作しないので、カプセル化を行います。 上 : app.jsのカプセル化 下 : JSとCSSを functions.php から読み込み 参考サイト WordPress で CSS、JavaScript ファイルを読み込む正しい方法 | EastCoder wordpressにjQueryのスクリプトを書くとUncaught
WordPressのカスタムメニューにCSSを当てる方法 | データベースに接続できません
メニュー項目にアイコンを付けたい場合はこの中で、menu-item-367、menu-item-368といったクラスにCSSを当てればよかろうと思っていた。しかし、このように数字をともなうクラス名は構築した環境によって異なるため、テスト環境ではmenu-item-367なのに、本番環境ではmenu-item-52 となってしまったというような食い違いが生じる。 テスト環境と本番環境の両方を考慮し、クラス名を調べつつCSSを当てればよいのか？ちょっと面倒だし、間違えやすいなぁと思いながらやっていた。 ところが、最近あることを知った！ (知らなかったのは私だけなのか？) メニュー項目にクラスを付与 カスタムメニューの各メニュー項目には、ダッシュボードより好きなクラスを付与できるのだッ！！ ダッシュボードの[外観]-[メニュー]に表示オプションがある。 表示オプション このなかに、「CSSクラス
CSSコーディングで泣かないためのSassの基礎知識と10の利点
CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
3media.biz - 3media リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
WordPressテーマの作り方 » HTMLからWPテーマを作成する
HTMLファイルを用意する HTMLファイルがあるとテーマ作成はラク 新規のテーマを開発し始める方法の１つに、まず元となるHTMLファイルを作成して、それをWordPressのテーマファイルに直すというやり方があります。予めサイトのデザインが決まっていると、テーマ開発はよりスムーズです。 今回は、下記サイトを例にします。 このHTMLの軽い説明 div#container: サイトの中身全体を囲んで中央寄せ header#header: サイト名とメニューバーを入れる div#main: サイト中央のブロック。投稿記事＋サイドメニューを囲む div#content: 投稿記事を囲む aside#sidebar: サイドメニューを囲む footer: コピーライトを表示 CSS HTMLファイルからWPテーマファイルを作成する 1. style.cssを作成する まずは、スタイルシートをWo
WordPressでCSSプリプロセッサ入門
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
WordPress3.2 テーマ「Twenty Eleven」 サイトタイトルの表示・非表示について - WordPress 不動産プラグイン
nendeb「Twenty Eleven」テーマでは、サイトタイトル（一番左上の会社名部分） の、表示・非表示を管理画面から操作出来ます。 管理画面の「外観→ヘッダー」 カスタムヘッダー設定ページ内下の方に 「テキストを表示」設定部分があります。 そこでサイトのタイトルの表示・非表示が選べます。 普通は表示されていますが、「いいえ」を選ぶとタイトル部分を消せます。 (「テキストを表示」を「いいえ」にすると</head>の直前に下記の様にCSSが追加されます。) <style type="text/css"> #site-title, #site-description { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1p
エビスコムの本のロードマップ (2014) | エビスコム
昨年の本あたりから、同じ本に初級者向きだというレビューと中～上級者向きだというレビューをいただくケースが増えてきました。 これは、狙い通りではありますし、エビスコムの本をご贔屓にしていただいている方にはご理解いただけると思います。しかし、はじめて手にとっていただく方には「？」以外の何ものでもありませんので、このあたりでエビスコムの本のロードマップを公開したいと思います。 HTML5 スタンダード・デザインガイド CSS3 スタンダード・デザインガイド【改訂第2版】 この2冊のメインテーマは、「これまで第一線でバリバリと仕事をしてきたものの、忙しすぎてHTML5やCSS3といった最近のトレンドにちょっと乗れてないな…なんて方が、これまでに積み上げたスキルを生かしてこれからも第一線でがんばってもらうためには何が必要か？」というところから始まっています。 そのため、現状＆ちょっと未来までの把握と
知って得するSass/Compassのインストールと使い方
本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする設定の方法を紹介。第2回の「WordPress初心者でも爆捗！ テンプレートカスタマイズ＆ショートコード作成超入門」でWordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説した。 第3回の「CSSコーディングで泣かないためのSassの基礎知識と10の利点」では、さらなる爆捗のために、「Sass」についての概略を解説した。第4回の前回「いまさら聞けないSassの使い方入門―― インストールとコマンド、Dreamweaver連携」では、Sassの
WordPressテーマ 『Twenty Fourteen』の記事タイトルの英字が大文字変換されないよう修正する
WordPress公式テーマ『Twenty Fourteen』の記事タイトルなどに含まれる英字が全て大文字に変換されてしまうのを修正するための備忘録です。 スクリーンショットのとおり記事タイトルの見出しはソースではAndroidとMarkdownと記述していますが、自動的にANDROID、MARKDOWNのように単語の先頭文字以降もすべて大文字に変換されてしまっています。個人的に全て大文字というのは余程目立たせたい場合を除いて使わない手法なので元に戻すことにしました。 テーマのstyle.cssを開き、text-transformプロパティについてuppercaseをnoneに修正するだけです。たとえば、サンプルとして『markdown editor』をtext-transformでいろいろと変換してみます。 記述したとおりに表示 text-transform: none; markdow
wordpressでカテゴリー一覧を表示する方法
この記事は公開から１年以上経過しており、内容が古くなっている可能性があります。 ウィジェットを使用せずに、カテゴリ一覧を表示させたい場合は wp_list_categories() を使用します。 例） <ul> <?php wp_list_categories(); ?> </ul> しかしデフォルトで使用すると、 ・カテゴリー ・アニメ ・プログラム ・HTML という風に、なぜか「カテゴリー」という文字が先頭に来てしまいます。 （「アニメ」「プログラム」「HTML」はそれぞれトップレベルカテゴリです。） この「カテゴリー」という文字、非常に邪魔！ これを消すには、引数に「title_li=」を渡します。 例） <ul> <?php wp_list_categories(‘title_li=’); ?> </ul> これで ・アニメ ・プログラム ・HTML という風に表示されます。
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自作テーマをWordPress公式ディレクトリに登録するつもりなら作成時やってはいけないこと
mignonstyle.com
2014.07.09 WordBench Tokyo LT
http://www.wpfunction.me/