続 Enhanced Tooltip Glossary という名の用語集プラグイン(Ver 2.0.7)

WordPress › EnhancedTooltipGlossary « WordPress Plugins

以前よくわからず逃げていた「Enhanced Tooltip Glossary」という名の用語集プラグインがいつの間にやら更新されており、また機能が増えているようなので改めてまとめておこうと思います。

インストールまでの流れは省略して設定からいきます。
以前はサイドメニューのコメントの下にあったのですが移動して名前も変わっています。

glo2-1

カーソルを当てて出てくる選択肢から「settings」へ進みます。
セッティング項目が以前の12項目から16項目へと増えています。

1. Main Glossary Page ID
2. Glossary Permalink
3. Show tooltip when the user hovers over the term?
4. Only show terms on single pages (not Homepage)?
5. Highlight terms on pages (not just posts)?
6. Style main glossary page differently?
7. Show main glossary page as tiles
8. Highlight first term occurance only?
9. Limit tooltip length?
10. Clean tooltip text?
11. Remove term link to the glossary page.?
12. Use term excerpt for hover?
13. Avoid parsing protected tags?
14. Terms case-sensitive?
15. Open glossary descriptions in a new windows/tab?
16. Show HTML “title” attribute for glossary links

1つずつ見て行きましょう。

1.Main Glossary Page ID

こちらは前バージョンの1.「Main Glossary Page」同様、Glossary(用語集)を表示する固定ページのIDを入力する部分です。詳しくは前回の記事をご参考下さい。

2.Glossary Permalink

こちらは前バージョンの6.「Glossary Permalink」と同じです。
前回記事をご参考下さい。

3.Show tooltip when the user hovers over the term?

前バージョンの4.「Use tooltip?」と同じです。記事中に使われている用語が用語集に登録されている場合、マウスが上に乗ると登録した内容の書かれた吹き出しが出るかどうかを選択できます。

4.Only show terms on single pages (not Homepage)?

前バージョンの2です。「登録された用語の強調」をシングルページ(1つの記事)のみで行うかどうか? ということです。チェックを外せばホームページ(トップページ)では登録された用語があっても強調されません。

5.Highlight terms on pages (not just posts)?

前バージョン3。「登録された用語の強調」をシングルページだけではなく全てのページで有効にしたい場合にはチェックを入れます。

6.Style main glossary page differently?

チェックを入れると’glossaryLink’というclass名でCSSに追記することによりスタイルを変更することが可能なようです。

7.Show main glossary page as tiles

初期状態では用語集ページには登録した用語が縦にずらっと並んでいますが、これをタイルのように並べて表示したい場合はここにチェックを入れます。

8.Highlight first term occurance only?

前バージョンの7。1つの記事に同じ用語が何度も使用されている場合、一番はじめの用語のみを強調する場合にチェックを入れます。

9.Limit tooltip length?

ツールチップ(吹き出し)の横の長さを制限します。最小値は30です。これ今ひとつ理解できていません。
30よりも大きな数値を入れると吹き出しが出なくなってしまうのです。

10.Clean tooltip text?

前バージョン9。ツールチップ(吹き出し)の中身に改行や空白、特殊文字を使用せず表示したい場合にチェックを入れます。

11.Remove term link to the glossary page.?

前バージョン10。用語集を作成した固定ページからリンクを消したい場合にチェックを入れます。

12.Use term excerpt for hover?

前バージョン11.用語登録の際に抜粋の内容も記入している場合、抜粋の中身が優先的に表示されるようにするにはチェックを入れます。

13.Avoid parsing protected tags?

前バージョン12。H1、H2、H3、PRE、Aが使用された要素の中の用語を強調しない時はチェック。
記事のタイトルなどを強調しないための設定です。

14.Terms case-sensitive?

用語集の用語に大文字と小文字の区別を付けたい場合はこちらをチェック。

15.Open glossary descriptions in a new windows/tab?

強調された用語をクリックした際、用語の内容が書かれたページを新しいウィンドウ(またはタブ)で開くようにしたい時はチェックを入れます。

16.Show HTML “title” attribute for glossary links

用語集の名前にHTMLのtitle属性を使いたい場合にチェックを入れる。
ということだと思うのですがよくわかりません。英語力皆無です。

うーむ、前回同様はっきりしない記事になってしまいました。

増えている機能で特に目立つのは用語集固定ページの「ABC索引」でしょうか。
もちろん英語にしか対応していません。

ツールチップのカスタマイズ

せっかくなので吹き出しもいじってみます。

glo2-2

画像ではマウスカーソルは消えていますが、マウスカーソルが乗るとグレーの吹き出しが出るようになっています。リンクされていることがわかるように青色になり下線もついていますね。ちなみにこのリンクの色は「enhanced-tooltipglossary」は関係なくブログのテーマなどで決めた色がそのまま反映されています。

変更は「wp」→「wp-content」→「plugins」→「enhanced-tooltipglossary」→「tooltip.css」から行います。直接CSSファイルを変更するので元のファイルをコピーして保存しておいて下さい。

tooltip.cssの中身はこうなっています。

#tt {position:absolute; display:block;z-index:100;}
#tttop {display:block; height:5px; margin-left:5px;}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:fff;}
#ttbot {display:block; height:5px; margin-left:5px;}
.cmetg_poweredby {clear:both;float:none;font-size:8px;line-height:1.5;display: inline-block;padding: 3px;margin-top:20px;color:#bbb;text-decoration:none;font-weight:bold}
.cmetg_poweredby:before {content:'Powered by ';}
.cmetg_poweredbylink:link{color:#bbb;text-decoration:none;}
.cmetg_poweredbylink:visited{color:#bbb;text-decoration:none;}
.cmetg_poweredbylink:hover{color:#bbb;text-decoration:none;}
span.glossaryLink, a.glossaryLink {
    text-decoration:none !important;
    border-bottom: dotted 1px !important;
}
a.glossaryLink:hover {
    border-bottom: solid 1px !important;
    text-decoration:none !important;
}

1~4行目を変更していきます。
5~8行目はいわゆるプラグイン作者表示の部分です。

実際は3行目の「#ttcont」の中身をいじればほぼ終了です。2,4行目はそれぞれ吹き出しの上端と下端ですが変更する部分はまずありません、角に丸みをつける場合でも#ttcontに記述すればOKです。

10行目以下は用語集に登録された用語が強調された時の装飾です。オンマウス用もあります。
初期はドットの下線が引いてあり、オンマウスで直線に変わるようになっています。
色を変更したい場合はここに加えていきます。

まず、英語を標準として作られているからなのかどうかは謎ですが吹き出しの右側の余白が少し大きいのが気になります。「#ttcont」内のpaddingを調節しましょう。
初期値は「padding:2px 12px 3px 7px;」となっていますが4つの数字は順に、上・右・下・左の吹き出しの端から文字までの距離を表しています。右側に12ピクセル分の余白を取っているのが目立つので、左側と同じように7pxにしてみます。

margin-left:5px;」の部分は、マウスを乗せたところから5ピクセル左に余白を取って吹き出しが出るよという意味です。このあたりは数値をいろいろ変更してお気に入りを探してみて下さい。このブログではここは初期値のままにしました。

background:#666; color:fff;」は背景の色と文字の色です。シンプルに白背景、黒文字にしてみましょう。「background:#fff; color:#000;」にそれぞれ変更します。

文字サイズを小さくしてみましょう。「#ttcont」内にfont-size:80%;と書き加えて文字の大きさを80%にしてみます。

吹き出しをドットの枠で囲んでみます。「#ttcont」内にborder: 2px dotted #ccc;と書き加えます。
「2ピクセル」の「破線」を「#ccc」色で表示という意味です。

角に丸みをつけます。吹き出しっぽく左上、右上、右下の3つを丸くしてみましょう。
角に丸みをつけるCSSは各ブラウザに対応させるために5個記述をしなければなりません。
基本は「border-radius: 0px 0px 0px 0px;」順番は左上、右上、右下、左下で、数字の大きさが丸みの大きさになります。左下の角だけを0,残りを10にした下の5個の記述を加えます。

-moz-border-radius: 10px 10px 10px 0px;
-webkit-border-radius: 10px 10px 10px 0px;
-ms-border-radius: 10px 10px 10px 0px;
-o-border-radius: 10px 10px 10px 0px;
border-radius: 10px 10px 10px 0px;

これで一応完成です。フォントの変更や文字間の調節などいくらでもいけそうですね。
最終的なCSSはこうなりました。3~8行目が手を加えた部分です。

#tt {position:absolute; display:block;z-index:100;}
#tttop {display:block; height:5px; margin-left:5px;}
#ttcont {display:block; padding:2px 7px 3px 7px; margin-left:5px; background:#fff; color:000;font-size:80%;border: 2px dotted #ccc;
-moz-border-radius: 10px 10px 10px 0px;
-webkit-border-radius: 10px 10px 10px 0px;
-ms-border-radius: 10px 10px 10px 0px;
-o-border-radius: 10px 10px 10px 0px;
border-radius: 10px 10px 10px 0px;}
#ttbot {display:block; height:5px; margin-left:5px;}
.cmetg_poweredby {clear:both;float:none;font-size:8px;line-height:1.5;display: inline-block;padding: 3px;margin-top:20px;color:#bbb;text-decoration:none;font-weight:bold}
.cmetg_poweredby:before {content:'Powered by ';}
.cmetg_poweredbylink:link{color:#bbb;text-decoration:none;}
.cmetg_poweredbylink:visited{color:#bbb;text-decoration:none;}
.cmetg_poweredbylink:hover{color:#bbb;text-decoration:none;}
span.glossaryLink, a.glossaryLink {
    text-decoration:none !important;
    border-bottom: dotted 1px !important;
}
a.glossaryLink:hover {
    border-bottom: solid 1px !important;
    text-decoration:none !important;
}

このようになりました。

また変更するかもしれないので画像も残しておきます。

glo2-3

グレコローマンスタイル

以上です。

コメント

 DISQUSコメントシステムとは?
DISQUSコメントシステムFacebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTubeTweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。

New Post



Random


CLOSE