リンクをテキストへ設定したFEATURES

 
画像とテキスト（小見出し、本文）という組み合わせを横に並べたレイアウト。画像へはリンク設定をしないで、本文下に「READ MORE」というリンクテキストを配置しています。
 
このようなレイアウトは左右で文字数がことなるとき、左右で「READ MORE」の位置が合わなくなります。「READ MORE」の位置を揃えるためにfeatures_008のcssにクラス設定を入れています。
 
 

features_008a

項目が一つのとき、左によってしまうのを回避するためにブロックの幅を調整して２分割と同じくらいの寸法で中央になるようにしています。
 

features_008b

数字を画像に半分重ねるようにCSSで設定したパターン。３つの特徴のような項目を並べる時に番号を付与する時に使えるアイデア。画像に重ねた文字は写真の濃淡によっては見にくくなるため、文字の周囲に白い線を設定しています。CSSでtext-shadowに設定しているので色の変更が可能です。
数字の文字を画像に重ねるための設定の影響だと思いますが、このブロックは「READ MORE」の位置が揃いません。そのため、パソコンのレイアウトで文字数が少ないほうに改行を入れて調整しています。
 

features_008c

写真部分に「特徴１」の文字を入れたパターン。写真を入れ替える時に、文字部分もSiGNで修正してください。
 
 

注意）

BiNDのブロックエディタの特性だと思いますが、「READ MORE」を下揃えにするためのクラス設定を入れてある時、その上に３つの改行が必要です。
 

画像サイズは800px  450px のシェイプに読み込んで表示させています。
features_008cは文字を含む画像になるためpngにしています。pngはデータサイズが大きくなってしまうので寸法を600pxの枠に変更しています。