HOME
 / カテゴリ「WordPress(応用)」を表示:37件
2017年10月30日

TinyMCEに自作のモーダルウィンドウを実装する

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

2017年10月30日

TinyMCEにコラップス機能を実装する

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。しかしこの機能はHTMLでコラップスを指定した場合に使える機能で、ビジュアルエディタで編集可能なコラップスにする為には自作jqueryでダイナミックにこの機能を与える必要がある。この方法を解説しています。

2018年02月06日

TinyMCEの基本スペックとカスタマイズ

TinyMCEのデフォルトインデントは「padding-left」を使っている為、p要素と画像しかインデントできません。これを「margin-left」に変更する事により総ての要素にインデントが使えるようになります。この辺のTinyMCEのカスタマイズ方法を解説しています。

2017年10月30日

ビジュアルエディタとHTTP表示を一致させる方法

ビジュアルエディタの表示と、HTTP表示を一致させる為には両方のCSSを合わせる必要があります。しかし、ここで注意しなければならない点は下記になります。①ビジュアルエディタのCSS「editor.style.css」は、コンテンツエリアだけのCSSである。②一方、HTTP表示のCSS「style.css」は、コンテンツエリア以外のヘッダーやページにも使うCSSである。よって両方のCSSを一致させるとは「editor.style.css」の定義を「style.cssのコンテンツ領域」に取り込む事を意味しています。

2017年10月30日

TinyMCEのeditor-style.cssの制限と回避方法

TinyMCEの仕様は親テーマのeditor-style.css➡子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

2017年11月05日

Bootstrapの導入方法と設定

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

2017年10月30日

子テーマの設定方法

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。