「WP slabText」は、オープンソースのブログ/CMSソフトウェア「WordPress」用のプラグインです。
このプラグインは、ブログやニュース系サイトによく見られる複数行に渡る長い記事の見出しを、画像に変換することなく、より美しく、インパクトのあるものに再描画します。Brian McAllister氏のjQueryプラグイン「slabText」の効果を使用します（英文の様々なサンプルはリンク先でご覧になれます）。
サンプル
ECサイトにおけるタイムセール的な見出しの例
具体的な動作
長い複数行に渡るタイトルを両端揃えに整え（それにともないfont-sizeを自動調節することで）、同時に強調したい単語が際立つように描画します。
日本語（マルチバイト）環境にも対応
slabTextは、基本的な動作として単語を区切るスペースをプラグインが判断して自動で丁度よく調整してくれますが、日本語は単語をスペースで区切ることはしないため、そのままでは日本語環境で使えません。
しかしslabText自体が持つオプションとして、決められたclass名を持つspanタグで見出しを分割することで、行の折り返しポイントを自由に設定することができます。これを利用することで、日本語などマルチバイト言語のサイトにおいてもslabTextの効果を得る事ができます。
WP slabText では、これらslabTextの基本機能をWordPressサイトでも簡単に使えるようにしました。
具体的には、記事タイトルの任意の位置に ||（パイプ2本）を入力することで、行の折り返しポイントを決めることができ、これによりslabTextの効果をコントロールできます。
レスポンシブWebデザインに対応（slabTextの機能）
レスポンシブWebデザインに対応したテーマでは、画面サイズに合ったフォントサイズに調節されます。また、指定フォントが変わってもそのフォントに合わせて最適に描画されます。
Google Web Fontsに対応（欧文フォントのみ）
現状、欧文フォントに限られますが、見出しに使うフォントを Google Web Fonts の中から選択することもできます。
記事単位にOn/Off可能
効果を適用したい記事のみにslabTextをOn/Offできますので、例えばECサイトのキャンペーン記事や、ポータルサイトのPickup記事にのみ適用するなども可能です。同時に、フロントページ／アーカイブページなどサイト内のおおまかなセクション毎にもOn/Offできます。
使い方はアイディア次第！
ブロガーの皆さんは、ヘッダー画像（だけ）に頼らなくても、文字タイトルのみでもそれなりのインパクトを出すことができます。
ECサイトでは、キャンペーンやタイムセールなど、注目を集めたい記事に。CMSでは、とかく記事表示は一律の表示パターンにより単調になりがちですが、複雑なCSSの記述をせずにタイトルにアクセントを付ける事が出来ます。
ポータルサイトや jQuery Masonry 的デザインのサイトでは、トップページなどに適用すると新聞のようなレイアウトが実現できてなかなか面白いかもしれません。
まさにアイディア次第！
ぜひ、面白い使い方を思いついたら教えてください。このサイトで紹介させていただきます。
用途の一例
- ブログの記事タイトルに（ヘッダー画像を使わずとも）インパクトを出す。
- ECサイトで、キャンペーンやセール品を強調表示。
- ポータルサイトのトップページで、Topicsのみに適用して閲覧者の目を引く。
必要条件
- 各テンプレートのループ部分、各記事を表示する親要素に、post_class関数が設置されている必要があります。
「TwentyEleven」の場合の一例：
content.php の11行目 <article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>> - 「Head Cleaner」を併用される場合は、同プラグイン設定画面の「有効なフィルタ」から「wpstxt-call」を「対象外」にすることをお勧めします。
- Google Web Fonts を使用するには、Google DevelopersサイトからAPI Keyを取得する必要があります。
使用方法
- こちらからダウンロード後、サイトのプラグインフォルダにアップロード。
- プラグイン > インストール済みのプラグイン にて「WP slabText」を有効化。
- 設定 > slabText にて、「slabTextを有効化」と「デフォルトのCSSファイルを読み込む」にチェック。
- 「適用するページ」において、slabTextを使用するページにチェック。
- 適用したい記事の編集画面を開き、「slabTextを使う」と「タイトルの分割にパイプ(||)を使用」にチェック。
- タイトル欄において、複数行に分割する位置に||を入力し、記事を更新。
以上で、slabTextが記事タイトルに適用されます。4でチェックを入れたページを開いて効果を確認してください。さらに、続くフォントの指定をすることでよりユニークな効果を出すことができます。
一般的なフォントを使う場合
- 設定 > slabTextにて、「フォント」欄に”meiryo” “sans-serif”などのフォント名（Font family）を入力してください。
Google Web Fonts を使う場合（欧文フォントのみ）
- 「Google Web Fonts を使う」にチェック
- 「APIキーを取得」リンクから、API キーを取得してください。
- 「API キー」欄に取得したキーを入力して、更新ボタンをクリック
- 「よく使われるフォント」に30種類のフォントが表示されます。使用したいフォントを、フォントリストを参考に選んでください。
- リスト以外のフォントを指定したい場合は、ドロップダウンメニューから「その他…」を選択し、現れた入力欄にフォント名を入力してください。
今後の予定
タイトル回りの装飾機能（行ごとにfont-color設定、font-shadow、etc.）を追加してゆく予定です（ご要望お待ちしています：ページ下部のメールフォームをお使いください）。
ライセンス
GPLv2 or later
作者
Daijiro Miyazawa (FirstElement)
（同梱のjQueryプラグイン「slabText」は Brian McAllister氏作）
更新履歴
- 2012/10/5 version 0.9.2
- 固定ページにプラグインのオプション画面が表示されない不具合を修正。固定ページでも使えるようになりました。
- 2012/8/27 version 0.9.1
- OGPを参照するソーシャルメディアでタイトルが正しく表示されるように修正。
- 2012/8/25 version 0.9 (Initial release)
ダウンロード
This is a plugin for WordPress that allowing for rendering a (long) multi-row headlines more beautiful and more impressive without any conversion from text to image. It uses the effect of a great jQuery plugin slabText that was created by Brian McAllister.
You can split a long title at any point as you like with II(double pipe) into multi-row, so multibyte language sites can also receive the benefit.
Even more, can specify the font to use in a title from Google Web Fonts.
Sample
( The sentence is quoted from WordPress.org )
FONT VARIATION WITH GOOGLE WEB FONTS.
Require
The template you use must have call “post_class” function at outer box of the post title in the loop.
If you are using “Head Cleaner“, I recommend to excludes “wpstxt-call” from the list of “Active Filters”.
You need to get the API Key from Google Developers site to use Google Web Fonts list.
Installation
- Upload the “wp-slabText” plugin to your “/wp-content/plugins/” directory.
- Activate the plugin through the “Plugins” menu in WordPress.
- Go to the “Settings > slabText” screen, and “Activate” and “Load default CSS file”.
- Specify which pages the plugin apples the effect (frontpage,archive page,etc.).
- Go to the Post-editor screen, and check “Activate”.
- If you want to control the split point in the title, also check “Use ||(double-pipe) to split the title”
- Put “||” to the split point you like in the title box.
- Go “Public” or “Update” and check the post on the front page.
- Beautiful title block is appear!
License
GPLv2 or later
Changelog
- 0.9.1 - August 27, 2012
- Fixed that the effects will be applied only in the loop, so the social media can get clean post title.
- 0.9 – August 25, 2012
- Initial release.
Contact and Credit
Written by Daijiro Miyazawa at FirstElement , e-mail dxd5001 at gmail dot com.
“WP slabText” includes a copy of the slabText written by Brian McAllister.
