<< ポルシェに4ドアが登場
FirefoxとIEのアドオンpopIn >>
  1. HOME
  2.  > -
  3.  > スポンサーサイト

スポンサーサイト

  • 2016.11.05 Saturday
  • -
  • Permalink
    • -
    • -
    • by スポンサードリンク

一定期間更新がないため広告を表示しています

  1. HOME
  2.  > Blog カスタマイズ
  3.  > 「続きを読む」をボタン風にカスタマイズ

「続きを読む」をボタン風にカスタマイズ

  • 2009.05.02 Saturday
  • 01:45
  • Blog カスタマイズ
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

JUGEMテンプレートで標準のままですと
続きを読む >>
となるはづです。テンプレートのXHTMLをみても

<div class="entry">{entry_description}</div>
<a name="sequel"></a>
<div class="entry">{entry_sequel}</div>
<br class="clear" />

となっていまして、変更不可能なのか?とおもいきや...

続きを読むをボタン風にした画像

この様にボタン風にアレンジすることが出来ました。マウスオーバー画像を使ってカスタマイズすると、もっと見た目が派手になりますね。今回は、CSSだけで画像は、使わないことにしました。

探してみたら変更が出来るようでしたので早速チャレンジしてみます。

を参考にさせてもらいました。

これで、続きを読むの文字を変更したり画像を使ったリンクにする方法はわかりました。
このブログでは、矢印部分を続きを読むの前半にもっていき、CSSでボタン風にカスタマイズしてみました。

XHTML

<div class="entry">{entry_description}</div>
	<div class="entry">
	<!-- BEGIN entry_sequel_link -->
	<a href="./?eid={entry_sequel_id}#sequel" class="more">&gt;&gt;&nbsp;続きを読む...</a>
	<!-- END entry_sequel_link -->
	<!-- BEGIN entry_sequel_items -->
	{entry_sequel_text}
	<!-- END entry_sequel_items -->
</div>

CSS

/* more */
.entry a.more, .entry a.more:link, .entry a.more:visited {
	padding: 2px 5px 0 5px;
	border: 2px solid;
	border-color: #fbfbfb #959595 #959595 #fbfbfb;
	background: #efefef;
	color: #000;
	text-decoration: none;
}
.entry a.more:hover, .entry a.more:active {
	background: #d1d1d1;
	border-color: #959595 #fbfbfb #fbfbfb #959595;
}

リンクにクラスを追加し、ボーダーと背景色を変更させ、マウスが重なったときに凹んだように見えるボタン風にしてみました。
ボタン風のCSSを簡単に作れるサービスがありましたので、紹介します。
CSSリンクボタン、タイトル、見出し(無料HTMLテンプレート素材)
ボーダーサイズや、背景色を簡単に変更できて便利です。

  1. HOME
  2.  > -
  3.  > スポンサーサイト

スポンサーサイト

  • 2016.11.05 Saturday
  • -
  • Permalink
    • -
    • -
    • by スポンサードリンク
コメント
コメントする

   
この記事のトラックバックURL
トラックバック
Access Ranking
ブログパーツ
Search this site.
Calendar
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< June 2019 >>
Categories
Selected entries
Recent comment
Recent trackback
Profile
Recent
Recent
現場のプロから学ぶXHTML+CSS
現場のプロから学ぶXHTML+CSS (JUGEMレビュー »)
益子 貴寛,堀内 敬子,小林 信次,千貫 りこ,伊藤 学,山田 あかね,西畑 一馬
Links
Software
カラメル
Sponsored Links
Mobile
qrcode
Others
Powered
  • みんなのブログポータル JUGEM

pageup