【Stingerplus】誰でも出来る!コメント欄のタイトル、テキスト文面をカスタマイズ!
2017/03/30
wordpressこんにちは。ゆすこです(@shufication)です。
コメント欄にあるタイトルやテキスト。少し大きい気がしませんか?
記事内の調整を行ってる時に、やや気になったので修正しました。
備忘録も兼ねて、今回はその修正方法をご紹介します。
修正する前の確認事項
修正したファイルは子テーマ「Stingerplus child」に追加すると安心です。
親テーマ内のファイルを上書きして作業している場合、親テーマをアップデートすると修正箇所が全てディフォルトになってしまうんですよ。
なので、子テーマで修正することをお勧めします。
子テーマで書く場合は必ず以下を確認してください。
初期状態では functions.php と style.css しかないので追加必須です。
◆header.php
◆st-font.php
◆analyticstracking.php
以上のファイルを親テーマから子テーマへコピペすれば完了。
この一連の作業で任意のファイルを子テーマで使用することができます。
修正したファイルをFTPで子テーマフォルダに追加するのを忘れずに!^^
では、いきましょう!!
今回修正するクラス/要素たち
このテーマで使われているクラス/要素は以下になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* タイトル(当ブログでは「コメントしてみる」にしています)*/ #comments h3 /* ログイン時のテキスト */ /* 「hogeとしてログイン中。ログアウトしますか?」 */ #comments p a /* 非ログイン時のテキスト */ /* 「メールアドレスが公開されることはありません。 * が付いている欄は必須項目です」 */ .comment-notes /* submitボタン(当ブログでは「コメントを送信」にしています) */ #comments input[type="submit"] |
調べるとこれらを使用していることがわかりました。
なので、style.css内のこれらを丸っきり書き替えます。
当ブログのように、テキスト文面自体を修正する方法は最後にご紹介しますね。
上書きするソースはこちら!
ではでは話は戻ります。
以下を子テーマ、もしくは親のstyle.cssに以下を書き込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#comments h3{ /* タイトル */ font-size:16px; } #comments p a{ /* ログイン時の注釈テキスト */ font-size:13px; } .comment-notes{ /* 非ログイン時の注釈テキスト */ font-size:13px; } #comments input[type="submit"] { /* submitボタン */ background-color: #0b4b90; color:#fff; font-weight:bold; font-size:14px; width:150px; float:right; } |
ログイン時と非ログイン時は見落としがちかもしれませんね。
タイトルはh3を使用しています。
そのため、ボタンはh3に合わせてbackground-color,
colorの色を合わせています。
後はfloatで右寄せにしていますね。
必要に応じて抜き差しして頂ければと思います。
好みのh3見出しを実装すれば見え方もグッと変わると思います。
iphone5,5s,SEでも見やすく!
先ほどのソースでは端末毎に分岐していません。
スマホ/タブレット/PCの全てで同じ見え方にしています。
これでも十分なのですが、iphone5系の端末だと画面が小さいですよね。
なので、当ブログでは、以下のように分岐させています。
1 2 3 4 5 6 7 8 |
@media only screen and (max-width:320px){ /* iphone5幅 */ #comments h3{ font-size:15px; } #comments p a{ font-size:12px; } } |
必要に応じてサイズ毎に振り分けるといいかもしれませんね。
解像度の高い端末が今後開発されていくと思うので、
使い分けを覚えておくといいかもしれません。
テキスト文面の修正
次にテキスト修正方法をご紹介します。
comments.phpを開いてください。
(../wp-content/themes/stingerplus内にあります)
13行目から16行目を見てください。
こういうソースがあると思います。
1 2 3 4 |
$args = array( 'title_reply' => 'Message', 'label_submit' => __( 'Submit Comment' , 'affinger' ) ); |
この部分を、
1 2 3 4 |
$args = array( 'title_reply' => 'コメントしてみる(承認制)', 'label_submit' => __( 'コメントを送信' , 'affinger' ) ); |
このように丸々上書きすると修正完了です。
変更部分はお好みのテキストに変えてみてください。
どうでしょう?必要な要素のみ修正してみました。
何かのお役に立てると嬉しいです^ ^
Sponsored Link
関連記事はこちら
新着記事
-
【Stingerplus】コピペでOK!記事下にSNSシェアボタンを置く方法。
こんにちは。ゆすこ(@shufication)です。 記事上にsnsシェアボタン ...
-
【Stingerplus】コピペで出来る!CSSでリストデザインのカスタマイズ!
こんにちは。ゆすこです(@shufication)です。 項目が多いとき、数字で ...
-
【初心者】wordpressでクラス、要素を一瞬で検索する方法!Stingerplusでも役立つ!
こんにちは。ゆすこです(@shufication)です。 就職当初は分からないこ ...
-
【Stingerplus】すぐに出来る!画面トップのハンバーガーメニューボタンを消す方法!
こんにちは。ゆすこです(@shufication)です。 スマホのレイアウトでこ ...
-
【Stingerplus】コピペでOK!グローバルメニュー幅、ボタン幅を均等にする方法!
こんにちは。ゆすこです(@shufication)です。 グローバルメニューを使 ...