CotEditor2.1.6△プログラミング向けシンプルテキストエディタ ***③☆☆☆ (2015/07/17)
OS X10.8以降はこのバージョンになります。

SnowLeopard からYosemite に変更した時、
前回と同じ設定にするのに時間がかかってしまいました。

もしよかったら、
自分の設定を参考にしてください。


CotEditorの環境設定
[メニューバー][CotEditor][環境設定...]
①◎一般

②◎ウインドウ


③◎表示

①◎フォント: ヒラギノ丸ゴ ProN W4 14 ▽フォントサイズを14px***③☆☆☆
②◎行の高さ:0.88倍 ▽***③☆☆☆
③◎基本
 カラーのテーマのClassicを[歯車マーク▽][複製]新規にテーマを作成してください。
 新規テーマの値を変更します。△上の画像 ↑では [Classic] のままですが...

  文字    424242 16進数カラー値
  カーソル  000000
  不可視文字 7F7F7F
▷2列目
  背景    FFFFFF
  現在の行  D7F3B8
  選択範囲  A4CDFF //システムカラーを使う
④◎シンタックス
  キーワード 0C1A7E
  コマンド  0C1A7E
  タイプ   0D8DA8
  属性    760F50
  変数    434343
▷2列目
  値     0C1A7E
  数値    0000FF
  文字列   891314
  文字    0000FF
  コメント  236E25
④◎編集

▽ブックマークファイルは以下のウェブブラウザに対応しています
 ⒶFirefox
 ⒷGoogle chrome
 ⒸSafari5.1.7(Windows)
 ⓇSafari8.0.5(Mac OS X 最新版)
 Ⓔ△Internet Explorer でも読み込めるようです[追加]
①◎ブックマークのインポートする
 簡単な操作で複数のリンクを同時にブックマークに保存できます***③☆☆☆
Windows7の場合------------
Firefox
 右上のメニュー「履歴」[すべての履歴を表示]
 [インポートとバックアップ ▽][HTMLからインポート(I)...]
Google chrome
 右上のメニュー(Chromeの設定)[ブックマーク][ブックマークマネージャ(B)]
 [管理▽][HTMLファイルからブックマークをインポート...]
Internet Explorer11
 右上の[]お気に入りに追加の右側の[][インポートとエクスポート...]
  [ファイルからインポートする(I)][お気に入り][①◎参照][②◎どこにインポートしますか]
   ①◎ダウンロードフォルダにある「フォントのブックマーク.html」を指定します
   ②◎インポートする「場所」を指定できます
Safari5.1.7(Windows7)
 [メニューバー][ファイル][ブックマークをインポート...]
MacOSX の場合------------
Firefox
 [メニューバー][ブックマーク][すべてのブックマークを表示]
 [左から4番目の▽][HTML から読み込む...]
Google chrome
 [メニューバー][ブックマーク][ブックマークマネージャ]
 [管理▽][HTML ファイルからブックマークをインポート...]
Safari8.0.5(MacOSX)
 [メニューバー][ファイル][読み込む▷][ブックマークの HTMLファイル...]

②◎フォントのインストール
Safari8.0.5(Mac OSだけ解説します)
 [ホーム][ライブラリ][Fonts]ここにフォルダとともにドラッグしてください ↓
△フォントは直接ダブルクリックしてインストールしないでください。

▽空フォルダを目次に使っているところがポイントです***③☆☆☆


フォントのブックマーク.html[右クリック][ダウンロード...]
フォントの空フォルダ.zip

Macで作成しましたので
Windowsでは文字化けするかもしれません。


フォントの使い方[追加]
ウインドウズ
①◎Font Changer1.01***③☆☆☆_

 Windowsのシステムフォントを任意のものに変更できますアプリ全体に適用されます
IOSアプリ
②◎Phont △追加したフォントはさまざまなアプリで使用可能になります***③☆☆☆


有料でダウンロードできるフォント
 ⒶOpenType CS80-DL ヒラギノ丸ゴ W4 StdN V8.00(MacOSX に標準搭載)
 ⒷOpenType CS80-DL ヒラギノ丸ゴ W3 StdN V8.00
  MacOSX には搭載されていない
  「ヒラギノ丸ゴ W4」より少し線の細い特別なフォントです ***③☆☆☆
 Ⓡヒラギノ丸ゴシック体の書体見本[詳細見本へ]
ヒラギノフォントのメリット
①◎「Font Changer1.01」アプリで
  システムフォントを「ヒラギノ丸ゴStdN」に変更すると
   適用前に比べて格段にキレイに表示されます。
②◎特にSafari5.1.7アプリのブックマークの編集画面では顔がほころびます
  ブックマークの各タイトルに
  「△***③◎☆☆☆ ⒶⓏ」などの特殊文字も利用できるようになります
③◎「WEBブラウザ」「システムフォント」「WORD」アプリなど幅広く利用できます。
  また、
  上記の「Phont 」アプリで Iphoneにインストールすることで
   いろいろなIOSアプリで使用できるようになります。

案の定
エンゲル係数

かい
句風
工夫
工夫(id=kufuu_je)
句風
工夫(id=koufu_j_1)
交付(id=koufu_j_2)
テスト
テスト-ケース(-ハイフンあり)
テストケース
test
test case
交付
テストケース           エンゲル係数

このプログラムは、
ヒラギノ丸ゴ ProN とSafari8.0.3(WebKit)に最適化されています***③☆☆☆

Windowsでは
①◎下記のフォントをインストールして表示して見てください。
  和田研中丸ゴシック2004絵文字P(2015/06/18)4.3.7.0

ライブドアブログでマウスオーバーポップアップを表示できるかテストしてみるの続きです
とりあえず出来てしまった。

簡単に解説したいと思います。

操作方法
 ①◎単語にマウスを合わせるとポップアップが表示されます。
 ②◎表示後単語をクリック表示/非表示を切り替えます。
        (非表示の状態は継続します)
 ③◎表示後単語またはポップアップ以外をクリック[閉じる]
 Ⓡポップアップの右下↘でサイズを自由に変更できます。
 Ⓡウインドウのサイズを変更時にポップアップ位置が自動で調整されます。

プログラムの概要
 ①◎まず単独で表示可能なHTML書類を作成します。
  http://snowjobs.blog.jp/content/2015_08_04/DICT/DICT_test.html
 ②◎テキスト入力欄の単語
  <span class="dictPanel">案の定</span><br>
  <span class="dictPanel">エンゲル係数</span><br>
  <span class="dictPanel" data-word="kufuu_je">工夫(id=kufuu_je)</span><br>
 ③◎span.dictPanelのdata-word属性の値またはテキスト内容⇄
  DICT_test.htmlのDIV.wordのid属性の値と一致する内容(DIV.word)をポップアップに表示します。

 Ⓡ一致する項目がない場合はまだやっていません。****

入力欄の内容(先頭部分のみ)----△jqueryとjquery-UI は読み込み済みです
 <script type="text/javascript" src="http://snowjobs.blog.jp/content/2015_08_04/popup_test.min.js"></script>
 <DIV id="DICT_file_URL" class="display_none" style="display:none;"
   data-dict_URL="http://snowjobs.blog.jp/content/2015_08_04/DICT/DICT_test.html"></DIV>
 <style type="text/css" >
  P.normal_16 {
   color:#636363; line-height: normal; font-size: 16px;
   font-family:"HiraMaruProN-W4","Hiragino Maru Gothic StdN"; }
 </style>
 <P class="normal_16">
  <span class="dictPanel">案の定</span><br>.....

ポイント***③☆☆☆
 ①◎DICT_test.htmlのCSSスタイルを<DIV>で囲っています。
   jQueryで内容を取り込めるようになります。

 ②◎DICT_test.htmlの画像は「絶対パス」で指定して、
   CSSスタイルもHTML内に書いてください。(単体とポップアップ表示用の2種類)

 ③◎ポップアップのリサイズの↘ボックスのCSSスタイルを忘れずに...
  .dict_popup .ui-resizable-se {
    position: absolute;
    z-index: 998;
    right: 0; bottom: 0;
    width: 16px; height: 16px;
    cursor: se-resize; }
問題点
 ①◎この方法はDICT_test.htmlの画像を含めたすべてを読み込みます。
  表示する時だけ画像を読み込むようにするのがベストです。PHP...?

 ②◎ポップアップ表示中は単語のspan.dictPanel に余白を追加するため、
   他の要素が少し移動してしまいます。上に要素を追加する...?


↑このページのトップヘ