「続きを読む」ボタンのデザインをカスタマイズ
公開日 更新日 2014/11/22
WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。
巷ではSTINGERが有名らしいので、大して迷わず採用しました。
今日からSTINGERをベースに少しずつデザインを作っていこうかなと思っています。
Information
- この記事はSTINGER v3用のカスタマイズです。STINGER v5では続きを読むボタンが無くなっており、この記事は適用されません。こちらの記事でv5での違いをまとめましたので、良かったらこちらもご覧ください。
- 最初の公開時から記事の内容を変更してます。詳細は末尾の変更暦に記載してます。
早速ですが 、本日はエントリー一覧ページに並ぶ各エントリーの最後にある「続きを読む」ボタンのデザインをカスタマイズします。
やりたいこと
CSS BUTTONS WITH PSEUDO-ELEMENTS
このサイトで紹介されているCSSボタンを参考に…と言うか丸パクリします。
変更方法
WordPress管理画面 > 外観 > テーマ編集画面
を開いて「スタイルシート(style.css)」へ次のように変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
: //★ここから[削除] //.more-link { // font-size: 14px; // color: #5484C8; // text-decoration: underline; //} : //★ここから[削除] //.motto a { // color: #FFF; // text-decoration: none; // background-color: #f3f3f3; // width: 90px; // color: #666666; // text-align: center; // display: block; // padding-top: 2px; // padding-right: 5px; // padding-bottom: 2px; // padding-left: 5px; // font-weight: normal; //} //.motto a:hover { // color: #FFF; // text-decoration: none; // background-color: #FFAAAA; // color: #FFF; // text-align: center; // display: block; //} : //★ここから[削除] //#container #wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .basui .motto a { // font-weight: normal; // text-decoration: none; // font-size: 12px; // color: #666666; //} //#container #wrap #wrap-in #main .post .entry .entry-content .motto .more-link { // font-size: 12px; //} //#container #wrap #wrap-in #side #topnews .motto a { // font-size: 12px; //} //#container #wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .basui .motto a:hover { // color: #FFF; //} : //★ここから[削除] //.post .sumbox02 #topnews div dl dd .motto { // font-size: 12px; // color: #666; //} //#main .post .sumbox02 #topnews div dl dd .motto a { // color: #666; //} : #topnews div dl dd a { color: #1a1a1a; text-decoration: none; } //★ここから[追加] #topnews div dl dd .motto a { color: #FFF; } #topnews div dl dd .motto a:active { color:#156785; } #topnews div dl dd .motto a:hover { color:#fff; } #topnews div dl dd .motto a:hover:active { color:#156785; } : //★ここから[追加] .motto { float: right; margin-bottom: 40px; } .motto a { background-color:#3bb3e0; padding:10px; position:relative; font-size:12px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) ); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .motto a::before { color:#fff; background-color:#072239; content:""; display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0px 1px 0px #fff; -moz-box-shadow: 0px 1px 0px #fff; -o-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff; } .motto a:active { color:#156785; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background:rgb(44,160,202); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; top:7px; } .motto a:active::before { top:-2px; } .motto a:hover { color:#fff; } .motto a:hover:active { color:#156785; } |
これを保存してあげて、サイトを更新すればボタンの形状が立体的なものになっているかと思います。
最後に
もともとボタンデザインといえば、いつもならBootstrapのお手軽感が好きで
今回もBootstrapで行こうとしてましたが、どうもSTINGERテンプレートとの相性が悪いようで
Bootstrapを組み込もうとすると体裁が崩れてしまいました。
そのため、自力でCSSを使ったボタンデザインに切り替えることになったというのが背景にありました。
不慣れということもあり、やり方の模索に手間を取ってしまいましたが、結果として
困ったときはまずインターネット検索という基本動作に従って、無事便利なCSSデザインを見つけることが出来ました。
変更暦
- 2014/6/21 初版
- 2014/9/20 phpファイルへの変更は廃止、「関連記事」のスタイルが正しくなかったので修正。
- 2014/9/29 STINGER v5では「続きを読む」ボタンがなくなったため、本記事は廃止とします。
2014/9/20変更点の補足
phpファイルの次の修正は廃止してSTINGERオリジナルのタグ表記に戻しました。
1 2 3 4 |
<!-- 変更前 --> <p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p> <!-- 変更後 --> <div class="button_box"><a class="button" href="<?php the_permalink() ?>">続きを見る</a></div> |
対象ファイル
- archive.php
- home.php
- index.php
- page-itiran.php
- search.php
- single.php
※「続きを見る」または「記事を読む」をキーワードにファイル内テキストの検索
レスポンシブ広告
関連記事
-
パンくずリストの最後の”>”を削除するカスタマイズ
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のホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧 …
- PREV
- インフラデザインパターン ~安定稼動に導く127の設計方式
- NEXT
- UIデザインの教科書