Stacks でカッコいい凹型テキストボックスを作る方法【RW4.3】

追記:使うStackを間違えてました(笑)。でもやり方は一緒なのでご勘弁を…。

久々のTipsです。

Stacksプラグインと、Round CornersStack Back(閉鎖してしまった freshme からダウンロード)を使って凹型のカッコいいテキストボックスを作る方法がフォーラムで紹介されていましたのでその作り方を詳しく説明します。これはかなり使えるテクニックだと思うのでぜひマスターしたいですね。

Realmac Software | "Recessed" looking text boxes in Stacks...


*
この形が基本になります。テキストを削除すると「Click here…」と表示が出ますがプレビューでは非表示になります。


例1

基本となるオーソドックスなタイプです。下がサンプルになります。ボックス下部のハイライトがわかるように背景に薄いグレー(マーキュリー)を設定しています。

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

まず、「
Round Corners」に「Text」Stackを配置して、「Round Corners」のインスペクターを開きます。

*

インスペクタを開いたら次のようにセッティングします。カラーの設定はカラーパレットから行います。

*

設定した部分がどこになるのかわかり易くした図が以下になります。

*それぞれ実際の太さとは異なります。
これを見るとわかりますが、影の部分のグラデーションを作る作業がほとんどです。


次に、「Round Corners」のインスペクタの一番下にある「Advanced」というボタンをクリックして以下のようにセッティングします。

*


最後にボックスの一番下側のハイライトを設定します。「Round Corners」の下に配置した「Text」Stackのインスペクタと「Advanced」を以下のようにセッティングします。

**


以上で完成です。後は「Round Corners」の中に配置した「Text」Stackを好きなように編集すればOK。サンプルでは以下のようにセッティングしています。

*


後はサンプルとセッティング例だけを書いておきます。

例2


あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

**Text Stackのインスペクタ
左が「Round Corners」、右が「Text」のインスペクタ。


例3


あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
ボックス下のハイライトになる「Text」Stackは削除します。

**
「Round Corners」のインスペクタとAdvanced。

**
「Text」StackのインスペクタとAdvanced。


例4


あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

*
「Round Corners」のインスペクタ。Advancedは例1と同じ。

**
「Text」StackのインスペクタとAdvance。

複数の組み合わせ


あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
下に配置したボックスの「Round Corners」のAdvancedでmargin-topにスペースを取ってやればOK。

以上です。Pluskitを使ってブログに挿入してみましたが、相性が悪いのかレイアウトが崩れる物がありました。単独のページで使う方が良さそうです。一応IE6でも表示出来ているようでした。

blog comments powered by Disqus