画像＋文字列を含むliタグをブロック化して、全体をリンクにする方法

　liタグ内を下記のように記述する。

/app/views/samples/index.html.erb

<li>
  <%= link_to root_path do %>
    <%= image_tag("/wp-content/uploads/sites/4/2014/08/icon.png") %>
    <p>文字列テスト</p>
  <% end %>
</li>

　画像（imgタグ）と文字列（pタグなど）をlink_to(aタグ)で囲むだけ。

出力例

<li>
  <a href="/">
    <img src="/wp-content/uploads/sites/4/2014/08/icon.png">
    <p>文字列テスト</p>
  </a>
</li>

補足CSS:style.css

li {
  width: 210px;
  float: left;
  margin: 4px;
  border: 1px solid #ccc;
  list-style: none;
}

img {
  width:100%;
}

結果例

文字列テスト

TakayukiKoyama.com