Skip to main content

Home/ WordPress Beginners/ Group items tagged css

Rss Feed Group items tagged

Toshiro Shimura

WordPressのリッチエディタにCSSを適用する | Tech de Go - 0 views

  • WordPressのリッチエディタにはTinyMCEが使われている。リッチエディタを使うのはソースコードなどタグを記事本文として流し込むときだけなので、あまり気にしなかったが、使っている人から、なぜ明朝体のでかいフォントなのかと言われた。皆さんはどうしているのだろうか。ここではリッチエディタにオリジナルのCSSを適用する方法を調べてみた。 リッチエディタはiframeで実現されているため、擬似的にhtml-head-bodyの構造を取っている。ここに適用されているCSSは以下の3つだが、このうち”wordpress.css”が変更の対象となる。 wp-includes/js/tinymce/themes/advanced/css/editor_content.css wp-includes/js/tinymce/plugins/wordpress/wordpress.css wp-includes/js/tinymce/plugins/spellchecker/css/content.css 変更するにはまず適用するCSSを作成する。その際に、変更するwordpress.cssを当該CSSで@includeする。 フォントの指定を含め、一般的な設定をするのなら以下のようなCSSになるはず。使用しているテーマのCSSから必要な部分だけ持ってくればよい。
  • CSS /* rich_editor.css ver 0.1 by Junon */ @import url('http://www.techdego.com/wp-includes/js/tinymce/plugins/wordpress/wordpress.css'); body { margin: 0; padding: 0 10px; background-color: #fff; color:#000; font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif; font-size: 0.8em; line-height: 1.4; } p a:link { text-decoration: none; color: #186FD0; border-bottom: 1px dotted #186FD0; } p a:visited, p a:active { text-decoration: none; color: #666; border-bottom: 1px dotted #186FD0; } p a:hover { text-decoration: none; color: #186FD0; border-bottom: 1px solid #186FD0; } p { margin: 1em 0; } li { margin-top: 1em; } ul li { list-style: square; } ul li ul { margin-bottom: 0.3em; } ul li ul li { list-style: circle; } a:link img, a:hover img, a:visited img, a:active img{ border: none; } .alignleft { float: left; } .alignright { float: right; } .clearer { clear: both; } code, pre { font-family: "courier new", courier, monospace; } 上記をTinyMCEに適用すればよいのだが、今回は自分のテーマに付随させてテーマを外せばエディタのCSSも変わるようにする。
  • 上記のCSS(ここではrich_editor.cssとする)をテーマのstyle.cssと同じ階層に保存する(背景画像をテーマと共有するため)。 テーマのfunctions.php(無ければ新規に作成)の最後に以下のコードを記述する。 PHP function replace_editor_css($css_file) { $css_file = get_option('siteurl') . '/wp-content/themes/**theme-name**/rich_editor.css'; return $css_file; } add_filter('mce_css', 'replace_editor_css'); ちなみに、上記の部分を別のphpファイルにして、pluginsフォルダに入れるとプラグインになる。テーマを変えてもCSSを適用したいならプラグイン化をお勧めする。
Toshiro Shimura

ビジュアルエディタをAdvanced TinyMCE Editorで拡張 | BoozerBlog - 1 views

  • WordPressには標準でビジュアルエディタが入っているけど、ちょっと物足りない。文字の大きさを変えられなかったり、文字色を変えられなかったりと、あって当たり前と思えるようなものがないのがない。 そこで Advanced TinyMCE Editorで機能を拡張してしまいましょうと。まずはダウンロードしたファイルを解凍。その中にadvanced-tinymceフォルダとpluginsフォルダがある。
  • ダウンロードしたファイルを解凍。その中にadvanced-tinymceフォルダとpluginsフォルダがある。 advanced-tinymceフォルダをいつものように/wp-content/plugins/にアップロード。 pluginsフォルダ内を/wp-includes/js/tinymce/pluginsにアップロード。 管理画面でプラグインを有効化。 ここまでで、新規投稿画面に移動したときに拡張が表示されていれば、これで完了。 表示されていない場合はブラウザのキャッシュをクリアしてみる。これで表示されれば完了。 これでも表示されない場合は、各種設定→ Advanced TinyMCE Editorのオプション画面にあるCSSの場所を記述するテキストボックスにcolorpicker.css,editor_content.css,editor_popup.css,editor_ui.cssの4つをコンマ区切り(このまま)記述して保存すれば使えるようになる。 使っているモニタ(うちのモニタでも)によっては、ボタンをすべて表示させると、投稿画面のサイドバーにはみ出してしまいますので、自分で使うボタンを吟味した方がいいかもしれません。ボタンの選択はCSSを記述したAdvanced TinyMCE Editorのオプション画面で行うことが出来ますので、お好みで。
Toshiro Shimura

TinyMCEで「emoddy」を (絵文字プラグインの製作) | kyms - 0 views

  • CSS HappyLifeさんで配布されている「emoddy(絵文字プラグイン)」をTinyMCEで使えるようにプラグイン実装中。 TinyMCEのプラグインとしての実装なので、Nucleus・MODx・WordPress・Xoops・ZenCart…その他諸々で使えると思います。まだ完成してないですが、CSS HappyLifeさんに製作報告をお届けしたいのでとりあえずエントリー立てておきます。
Toshiro Shimura

[WP]テンプレートファイルの仕様と構成 - WebTecNote - 0 views

  • Wordpressのデザインはテーマと呼ばれてます。テーマを構成するファイル群がテンプレートファイルです。 他のブログのようにテーマをテンプレートと呼んでも通じるけど、検索するときはテーマ(Theme)を使う方が良いかも。 ダウンロードしたばかりだと"Classic" と "Default"の2つがプリインストールされてますが、 テーマ新しく追加する場合は、ダウンロードして解凍したテーマのフォルダをWordpressのwp-content/themes/にアップロードするだけ。 デザイン(表示)に並ぶテーマのスクリーンショットをクリックすれば即座に変更されます。 テーマ変更で再構築が必要ない、というのがWordpressの良いところ。 Wordpressは1.x系、2.0.x系、2.1.x系、2.2以降と2.5では内部仕様が違ってるので、テーマやプラグインはバージョンにあったものを選ばないとエラーが出たりするので注意。 特に2.5は最新とあって対応してるテーマやプラグインもまだ少ないようです。 公式のリスト» WordPress 2.5 Theme Compatibility List WordPress 2.5 Plugin Compatibility List
  • Wordpressはコアファイル・プラグイン等全てPHPなので、PHPとmySQLに通じていればかなり色々なことができます。 テーマを構成するテンプレートファイルは、XHTMLとPHPのテンプレートタグで作成されてます。 XHTMLとUTF-8で記述するのがベターですが、HTMLでも文字コードさえ合ってれば問題はないです。 文字コードはWordpress2.5ではUTF-8のみになりました。 テキストエディタはBOM無しのUTF-8で保存できるものを選ぶ必要があります。(メモ帳はダメ!絶対)
  • テンプレートに記述するWordpress独自のPHPコードはテンプレートタグの他、ループやファンクションなどかなり色々使えます。 PHPの関数や変数なんかも使えま
  • ...6 more annotations...
  • テンプレートファイル群の中に特別重要なものが2つあります。style.cssとfunctions.phpです。 style.cssにはただのphpファイルの集まりに過ぎないフォルダを、Wordpressにテーマと認識させる重要なコメントが入ります。 functions.phpはテーマで使う関数や初期設定、ウィジェットなどのソースコードが入ります。(無くても動きます) style.cssを開くと、冒頭にコメントが入ってます。 このコメントがないとテーマと認識されません。
  • 基本テンプレート一覧 style.css(必須) テーマのメインとなるスタイルシートファイル。上で書いたコメントが必要。@importで他のCSSを読み込む事が出来ます index.php メインテンプレート。カテゴリやページ、シングルページにそれぞれテンプレートファイルがある場合はそちらが優先して使用されます。最低これとcomments.phpがあれば動く。 comments.php コメントエリア表示用テンプレート。コメントフォームとコメントのリスト表示を担当します。Defaultのテンプレートを流用するのがベター。 comments-popup.php ポップアップのコメントエリア表示用テンプレート。Defaultのテンプレートを流用するのがベター。 headにcomments_popup_script();、ループ内にcomments_popup_link();があると表示される。 テーマ内にテンプレートが見つからない場合は、Deafaultのテンプレートが使用される。 home.php ホームページ用のテンプレート。固定ページに設定しない場合にこのテンプレートファイルがあると、トップだけこのテンプレートが使われます。 single.php 投稿記事用テンプレート。時事系列に沿わないページには適用されない。 page.php ページ用テンプレート。ページは1ページずつ独自のテンプレートを設定することも出来ますが、それが設定されてない場合に使用される。 paged.php archive.phpやsearch.phpで2ページ目以降がある場合に使われる。category.php・date.php・author.phpがある場合はそちらが優先されるので使用されない。 category.php カテゴリー用テンプレート。カテゴリー一覧を表示する際に使用される。 author.php 投稿者用テンプレート。投稿者情報を表示する際に使用される。 date.php 日時クエリで表示する際に使用されるテンプレート。アーカイブと似てる archive.php アーカイブ表示用テンプレート。表示優先順位はcategory.php、author.php、date.phpより下。 search.php 検索結果用テンプレート。無い場合はindex.phpが使われる。 404.php 404 Not Found用のテンプレート。無い場合はindex.php。 image.php 画像表示用テンプレート。[gallary]の画像ファイル単体表示(v2.5~) attachment.php 画像表示用テンプレート。「ページにリンク」を選択した時の画像表示用 tag.php タグ用テンプレート。タグのアーカイブ表示
  • パーツテンプレート 呼び出しタグが用意されているパーツテンプレートは次の通り。 header.php(get_header();) ヘッダ出力用のテンプレート。 footer.php(get_footer();) フッター出力用のテンプレート。 sidebar.php(get_sidebar();) サイドバー出力用のテンプレート 関数がなくてもincludeなどで取得して表示することが出来ます。
  • Page Templates ページには、各ページごとにそれぞれ独自のテンプレートを使うことが出来ます。 作成方法は、任意の名前.phpでファイルを作成して、冒頭に次のコメントを入れるだけ。
  • Category Templates カテゴリーを表示するテンプレートはいくつかあります。優先順位は次の通り。 category-6.php category.php archive.php index.php category-6.phpのように英数をつけたテンプレートを作ると、英数と同じIDのカテゴリーを表示するときだけ使用されます。
  • Author Templates 投稿者ページを表示するには、まず次のリンクをループ内に記述します。
Toshiro Shimura

WordPressでTinyMCE のCSSをカスタマイズする - WP_Disable - WP_HatenaGroup - 0 views

  • TinyMCE では、 iframe で擬似的に内容を生成してプレビュー出来る仕組みになっていますが、 WordPres ではエディタの内容が serif 系フォントなので、日本語の場合少し読みにくいです。というわけで、 Tiny MCE のスタイルをカスタマイズする方法を書きます。カスタマイズの方法は二つあり、一つは、 WordPress の TinyMCE 用 CSS ファイルを変更する方法。もう一つは、プラグインを作成する方法です。
Toshiro Shimura

WP plugin "TinyMCE Advanced" | Rif.3rd - 0 views

  • Wordpress への投稿手段を、無駄に色々試していますが、WP が2.5になって、ビジュアルエディタのプラグインはちょっと怖かったので、様子を見てました。 でも、こんなにスゴいのがあったんですね。 なにがスゴいって、プラグインフォルダに入れて、有効化するだけ!という手軽さと、管理画面で、使いたいボタンをドラッグアンドドロップで増減できるとう便利さ!と、スタイルのボタンに自分のCSSのクラスが反映されちゃってるし。 スゲー! Plugin URL: TinyMCE Advanced » LaptopTips Version: TinyMCE Advanced version 3.0.1 (requires WordPress 2.5) TinyMCE 3.x Language Package Download で、Japanese をダウンロードして、TinyMCE 3.0.8と一緒に /wp-includes/js/tinymce へ入れたら、ボタンの種類も増えました。 もう少し色々試したら、また記事にしてみます ;-)
1 - 6 of 6
Showing 20 items per page