「つづきを読む」の表記を変更する

長い記事を短くする方法としてmoreタグを使う方法があります。

<!--more-->

moretag03

moreタグは自分で編集することができます。例えば、半角空白を挿入すると、

<!--more -->

表示されなくなります。

moretag04

例えば、「>>>」のような記号を挿入すると、

<!--more>>>-->

このような表示になります。

moretag05

「詳しい情報はこちら …」のような文章を挿入すると、

<!--more詳しい情報はこちら ...-->

このような表示になり、具体的な案内の内容を知らせることができます。

moretag06

実際にこれらのmoreタグを繰り返し使う場合には、Google日本語入力などに登録しておくと便利だと思います。

なお、moreタグを使って画像の挿入をすることはできませんでした。

readmore01

しかしながら、2011年4月13日現在、このブログで使っているテーマ「The Morning After」の場合、以下のCSSを追加すると、「つづきを読む」の部分を画像に置き換えることができます。他のテーマについてもおそらく可能とは思いますが、まだ検証はしておりません。

#latest_post a.more-link,#home_featured a.more-link,#arch_content a.more-link {
text-indent:-1000px;
overflow:hidden;
}

#latest_post .more-link,#home_featured .more-link,#arch_content .more-link {
display:block;
width:100px;
height:28px;
background-image:url('https://comemo508.files.wordpress.com/2011/04/readmore02.png');
float:right;
margin-bottom:15px;
margin-right:15px;
}

#latest_post a:hover.more-link,#home_featured a:hover.more-link,#arch_content a:hover.more-link {
background-position:0 -27px;
}

.page-navigation,.latest_post_meta {
clear:both;
}

参考: The More Tag « Support — WordPress.com

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

<span>%d</span>人のブロガーが「いいね」をつけました。