logwのスマートフォンサイトですが、現在このようになっています。

WordPressでSMTP認証するの記事の箇所を写しているキャプチャーになります。トップページでは80文字まで表示してそれ以降は続きを読むというカスタマイズを設定しています。

ソース箇所

functions.phpには以下のようにコードが記載れています。

// 「続きを読む」をカスタマイズするためのコード
function my_excerpt_more($post) {
	return  '...<a href="'. get_permalink($post->ID) . '">' . ' この記事の続きを読む' . '</a>';
}

このようになっています。
出力されたHTMLはこのようになっています。

<p>コンタクトフォームを使っているとphpmailの関数から送信されます。この場合メールが迷惑メールフォルダに入ってしまったりするなどがあります。そこでプラグインの…<a href="https://www.logw.jp/wpmemo/7244.html"> この記事の続きを読む</a></p>

pタグで出力されています。これだとスマートフォンでアクセスしたときにタップしづらいのもあるため、ちょっと修正していきたいと思います。

どのように修正するか？

理想としては、pタグの中にアンカーリンクで続きを読むがあるのではなく、divなどでブロックをわけたいと思います。functions.phpの修正をします。

function my_excerpt_more($post) {
    return  '<div class="continuation"><a href="'. get_permalink($post->ID) . '">' . ' この記事の続きを読む' . '</a></div>';
}

このようにします。divタグにしてクラスを追加しています。これで表示されたソースは以下のようになります。

<p>コンタクトフォームを使っているとphpmailの関数から送信されます。この場合メールが迷惑メールフォルダに入ってしまったりするなどがあります。そこでプラグインの…<a href="https://www.logw.jp/wpmemo/7244.html"> この記事の続きを読む</a></p>
<div class="continuation"><a href="https://www.logw.jp/wpmemo/7244.html"> この記事の続きを読む</a></div>

pタグの外にでてdivとして別になりました。後はCSSで修正してくだけです。

	.continuation{
		border-style:solid;
		border-width:@cntents_block_border_width;
		background-color:#dfdfdf;
		border-color:#cccccc;
		text-align:@text_center;
		padding:1em 0;
		margin-bottom:1em;
	}

		a{
			display:@block;
			font-weight:bold;
		}

このようにしました。