シュフィケーション

元IT戦士による主夫ブログ

【Stingerplus】誰でも出来る!コメント欄のタイトル、テキスト文面をカスタマイズ!

2017/03/30

wordpress

code

こんにちは。ゆすこです(@shufication)です。
コメント欄にあるタイトルやテキスト。少し大きい気がしませんか?
記事内の調整を行ってる時に、やや気になったので修正しました。
備忘録も兼ねて、今回はその修正方法をご紹介します。

Sponsored Link

修正する前の確認事項

修正したファイルは子テーマ「Stingerplus child」に追加すると安心です。
親テーマ内のファイルを上書きして作業している場合、親テーマをアップデートすると修正箇所が全てディフォルトになってしまうんですよ。
なので、子テーマで修正することをお勧めします。

子テーマで書く場合は必ず以下を確認してください。
初期状態では functions.php と style.css しかないので追加必須です。

◆header.php

◆st-font.php

◆analyticstracking.php

以上のファイルを親テーマから子テーマへコピペすれば完了。
この一連の作業で任意のファイルを子テーマで使用することができます。
修正したファイルをFTPで子テーマフォルダに追加するのを忘れずに!^^

では、いきましょう!!

今回修正するクラス/要素たち

このテーマで使われているクラス/要素は以下になります。

調べるとこれらを使用していることがわかりました。
なので、style.css内のこれらを丸っきり書き替えます。
当ブログのように、テキスト文面自体を修正する方法は最後にご紹介しますね。

上書きするソースはこちら!

ではでは話は戻ります。
以下を子テーマ、もしくは親のstyle.cssに以下を書き込みます。

ログイン時と非ログイン時は見落としがちかもしれませんね。
タイトルはh3を使用しています。
そのため、ボタンはh3に合わせてbackground-color,
colorの色を合わせています。
後はfloatで右寄せにしていますね。

必要に応じて抜き差しして頂ければと思います。
好みのh3見出しを実装すれば見え方もグッと変わると思います。

iphone5,5s,SEでも見やすく!

先ほどのソースでは端末毎に分岐していません。
スマホ/タブレット/PCの全てで同じ見え方にしています。

これでも十分なのですが、iphone5系の端末だと画面が小さいですよね。
なので、当ブログでは、以下のように分岐させています。

必要に応じてサイズ毎に振り分けるといいかもしれませんね。
解像度の高い端末が今後開発されていくと思うので、
使い分けを覚えておくといいかもしれません。

テキスト文面の修正

次にテキスト修正方法をご紹介します。
comments.phpを開いてください。
(../wp-content/themes/stingerplus内にあります)

13行目から16行目を見てください。
こういうソースがあると思います。

この部分を、

このように丸々上書きすると修正完了です。
変更部分はお好みのテキストに変えてみてください。

どうでしょう?必要な要素のみ修正してみました。
何かのお役に立てると嬉しいです^ ^

Sponsored Link

この記事を書いた人ってどんな人?

元IT会社員の管理人ゆすこです。

マイペースにみんなで週に2~4記事更新中!

管理人ゆすこのプロフィールはこちらより

良かったらシェアをお願いします!mm

関連記事はこちら

shufi_161029-i
【Stingerplus】コピペでOK!記事下にSNSシェアボタンを置く方法。

こんにちは。ゆすこ(@shufication)です。 記事上にsnsシェアボタン ...

shufi_161001-i
【Stingerplus】コピペで出来る!CSSでリストデザインのカスタマイズ!

こんにちは。ゆすこです(@shufication)です。 項目が多いとき、数字で ...

shufi_160929-i
【初心者】wordpressでクラス、要素を一瞬で検索する方法!Stingerplusでも役立つ!

こんにちは。ゆすこです(@shufication)です。 就職当初は分からないこ ...

shufi_160924-i
【Stingerplus】すぐに出来る!画面トップのハンバーガーメニューボタンを消す方法!

こんにちは。ゆすこです(@shufication)です。 スマホのレイアウトでこ ...

150918-i
【Stingerplus】コピペでOK!グローバルメニュー幅、ボタン幅を均等にする方法!

こんにちは。ゆすこです(@shufication)です。 グローバルメニューを使 ...

-wordpress
-,