読書とプログラミングを中心とした覚書ブログ

読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。

「続きを読む」ボタンのデザインをカスタマイズ

 公開日     更新日  2014/11/22

     

mixer-168466-2

WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。
巷ではSTINGERが有名らしいので、大して迷わず採用しました。
今日からSTINGERをベースに少しずつデザインを作っていこうかなと思っています。

Information

  • この記事はSTINGER v3用のカスタマイズです。STINGER v5では続きを読むボタンが無くなっており、この記事は適用されません。こちらの記事でv5での違いをまとめましたので、良かったらこちらもご覧ください。
  • 最初の公開時から記事の内容を変更してます。詳細は末尾の変更暦に記載してます。

 

早速ですが 、本日はエントリー一覧ページに並ぶ各エントリーの最後にある「続きを読む」ボタンのデザインをカスタマイズします。

やりたいこと

CSS BUTTONS WITH PSEUDO-ELEMENTS
このサイトで紹介されているCSSボタンを参考に…と言うか丸パクリします。

変更方法

WordPress管理画面 > 外観 > テーマ編集画面
を開いて「スタイルシート(style.css)」へ次のように変更します。

これを保存してあげて、サイトを更新すればボタンの形状が立体的なものになっているかと思います。

最後に

もともとボタンデザインといえば、いつもならBootstrapのお手軽感が好きで
今回もBootstrapで行こうとしてましたが、どうもSTINGERテンプレートとの相性が悪いようで
Bootstrapを組み込もうとすると体裁が崩れてしまいました。

そのため、自力でCSSを使ったボタンデザインに切り替えることになったというのが背景にありました。
不慣れということもあり、やり方の模索に手間を取ってしまいましたが、結果として
困ったときはまずインターネット検索という基本動作に従って、無事便利なCSSデザインを見つけることが出来ました。

変更暦

  • 2014/6/21 初版
  • 2014/9/20 phpファイルへの変更は廃止、「関連記事」のスタイルが正しくなかったので修正。
  • 2014/9/29 STINGER v5では「続きを読む」ボタンがなくなったため、本記事は廃止とします。

2014/9/20変更点の補足

phpファイルの次の修正は廃止してSTINGERオリジナルのタグ表記に戻しました。

対象ファイル

  • archive.php
  • home.php
  • index.php
  • page-itiran.php
  • search.php
  • single.php

※「続きを見る」または「記事を読む」をキーワードにファイル内テキストの検索

レスポンシブ広告

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

  関連記事

パンくずリストの最後の”>”を削除するカスタマイズ

STINGERテンプレートだと、パンくずリスト(ブレッドクラム / トピックパス …

CSSファイル数を減らしてページ表示時間を最適化

STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …

広告フロートの動きがおかしい問題の回避方法

WordPressテーマSTINGERの サイドバーにある「スクロール広告用」は …

記事の幅を広げるカスタマイズ(V5用)

以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …

記事の幅を広げるカスタマイズ(V3用)

STINGERをインストールした状態だと、記事の幅が550pxになっています。 …

パンくずリストをもっとカッコよくする

  STINGERテンプレートは、WordPressサイトのテーマとし …

スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V5用)

 はじめに STINGER V3からV5にバージョンアップしたのが2014/9/ …

記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる

WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラ …

記事一覧に表示する各記事の概要を「続きを読む」タグまでにする

Information この記事はSTINGER v3用のカスタマイズ方法です。 …

記事一覧に表示する各記事の抜粋を綺麗に整形表示する

STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧 …

「続きを読む」ボタンのデザインをカスタマイズ