Plugin

CKEditorで画像サイズの指定を変更。

2015.01.12 / Notes

CKEditorの編集画面で画像を挿入すると、デフォルトでは画像のサイズをStyle属性にて指定されます。

通常の使用では特に影響はありませんが、レスポンシブデザインの場合、画面サイズに合わせて画像が縮小表示するように、CSSで次のように記述することがあります。

ですがStyle属性でサイズを指定してある場合そちらの方が優先されますので、CSSの設定では期待通りに画像を表示することができません。

 

CKEditorで編集の際にStyle属性ではなく、従来のwidth、height属性で画像サイズを指定するには、CKEditorの「Enhanced Image」というプラグインをインストールすることで実現することができます。
このプラグインを有効にするためには、次の依存するプラグインも併せてインストールする必要があります。

「Dialog」「Clipboard」については標準で入っていますので、残りの2つを「ckeditor/plugins」ディレクトリに入れます。
その上で設定ファイル「ckeditor/config.js」内に次の一行を追加します。

DrupalでCKEditorを利用している場合、環境設定のCKEditorの設定にある「高度なオプション」に上記を記述することもできます。

jQueryのプラグイン「jScrollPane」でカスタムスクロールバーを簡単に設置。

2013.10.26 / Notes

デザインをカスタマイズできる、jQueryのプラグイン「jScrollPane」でスクロールバーを簡単に設置する際のメモです。
サンプルはこちら

 

設置にはjQuery本体と、jScrollPaneプラグインにマウスホイール用のプラグインをあらかじめ読み込みます。

スタイルシートは最小限のみを記述しています。

 

jScrollPane

CSS3のTransitionでダイナミックなページ遷移。

2012.04.22 / Labs

CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。

 

実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。

 

CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。
サンプルはこちら

 

仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。
HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。

CSSでは各コンテンツのサイズを座標を指定しています。

JavaScriptは外部ファイルに記述しています。
コードの大部分は、各要素の座標を管理するためのものです。

習作用のためシンプルな構成ですが、これだけのコードでもCSS3を使ったダイナミックなコンテンツが可能になります。現在はIEがCSS3のアニメーションに対応していないのが残念ですが、今後は思い切ったデザインのサイトも増えていくように思います。

Joomla!の記事内でPHPを出力。

2010.02.22 / Notes

Joomla!標準では記事の投稿フォーム内でPHPを実行することはできませんが、「Jumi」というプラグインで、PHPの出力を行うことができます。
使い方は、予め用意したPHPファイルをサーバにアップしておき、記事内からJumiの専用コードで、PHPファイル名と引数を記述して実行します。
WordPressのショートコードに似た使い方です。

上記の例ではJoomla!を設置しているルートディレクトリに「scripts」というディレクトリを作り、その中にPHPファイル「test.php」を置いてあります。二つ目以降の四角カッコが引数になります。
PHPファイルには次のように記述しておきます。

「$jumi[n]」で順番に引数を受け取っていきます。上記のを実行した記事では「10」と出力されます。

 

またJumiにはモジュール版のあり、任意のブロックにPHPコードを出力することができます。

カスタムHTMLモジュールのPHP版のような使い方ができます。
Jumiプラグインページ

EspressoでSugar、Themeのインストール。

2010.02.15 / Notes

Macのコーディング用テキストエディタEspressoには、扱える言語を追加する「Sugar」と、テキスト表示のカラーリングを変更する「Theme」のプラグイン機能があります。
いずれもEspressoの特設サイト「Coffee House」からダウンロードできます。

 

「Sugar」のインストールにはファイルをダウンロードした後、圧縮ファイルを解凍します。解凍したファイル名が「derekr-php.sugar-803a828」といった感じになっているので、末尾の「-803a828」を取り除いて、拡張子が「.sugar」になるようにします。
そのファイルを
~/Library/Application Support/Espresso/Sugars/
に格納します。(Sugarsフォルダがない場合は作成します)
プラグイン
「Theme」の場合も同じくダウンロードしたCSSファイルを、Themesフォルダに格納します。
テーマ
たまには気分を変えてみるのもいいかもしれません。
Mac Rabbit
Coffee House