Stinger8-customize2

 

ここではStinger8向けの「引用部分」のカスタマイズをご紹介します。

「“」を消したい』、「デフォルトでは味気ない」と感じている方の参考になれば幸いです。

 

また私はカスタマイズ初心者の為、知識不足もありますがご了承下さい。

 

カスタマイズ前にご注意

 

カスタマイズ前に注意点があります。

 

  • cssの変更を行いますが、必ず子テーマで作業して下さい。
  • 作業前に、万が一の為「バックアップ」を取って下さい。
  • 今まで記事に使った「引用」の見た目も今回のカスタマイズで変更されます。
  • これから引用する際も、今まで通り「引用ボタン(<blockquote>)」を使用して頂ければ大丈夫です。

 

こちらを守って編集してください。

バックアップはメモ帳などに編集前のコードをコピーするだけでもOKです。

 

参考:子テーマの説明・作り方はこちらから(creiveさんサイト)

 

 

引用の「“」を消す方法

 

【カスタマイズ前に】

以下の方法は、「Stinger8導入後、”style.css にある blockquote {}”を全くいじっていない状態」から「」を消す内容です。

少しでも変更点があれば「“」以外の見た目も変わる可能性があります。

 

①「WordPressの管理画面」の左側にある「外観」→「テーマの編集」をクリック

 

②「Stinger8」の子テーマ(「STINGER8 Child」など)の「style.css」を開き、「{}」が無いエリアで以下のコードを張り付けて下さい。

 

 

③貼り付け終わったら、画面左下の「ファイルを更新」をクリック。

 

④更新が完了したらサイトへ戻って確認してみて下さい。

左上にあった「“(白色)」が無くなっていれば完了です。

お疲れ様でした!

 

【補足】

他サイトさんでは
だけ付け加えれば「“」は消せる、と書いてあったのですが、試してみるとStinger8では反映されませんでした。

初期表示以外でも「“」を消せる方法が分かれば追記したいと思います。

 

 

 

引用部分をデコレーションしたい場合

 

シンプルだけじゃなく、もっと自分好みにしたい!という方はこちらをお読みください。

 

【カスタマイズの前に】

実は他サイトさんの引用カスタマイズをそのまま使おうとしたところ、引用表示に反映されなかったので、私なりに修正しました。

元のカスタマイズコードは他サイトさんを参考にして、この本文でコードの設置・修正のやり方を説明しています。

 

①まずはデコレーションしたい引用サンプルが必要です。

サンプルは検索でもできますが、宜しければ私が参考にしたこちらのサイトをご覧ください。

CSSで作る!魅力的な引用デザインのサンプル30(blockquote)

(サルカワさんHP)

 

②「引用デコレーション」が決まったら、「blockquote{}」を含めサンプルコードを全てコピーして下さい。

※「blockquote{}」だけ使われたコードもあれば、「blockquote{}」以外で囲まれたコードを含む場合もあります。

 

「blockquote{}」のみ使われたコード例

「blockquote{}」以外を含むコード例

 

③ここからWordPressでの編集作業に移ります。

WordPressの管理画面」の左側にある「外観」→「テーマの編集」をクリック

 

④「Stinger8」の子テーマ(「STINGER8 Child」など)の「style.css」を開き、「{}」が無いエリアで、先ほどコピーしたコードを張り付けて下さい。

 

⑤今張り付けたコードの先頭に、「.post」を付け加えます。

※「.post」と「blockquote」の間に半角スペースを入れてください

blockquote {  ⇒  .post blockquote {

 

先ほどの例ではこうなります。

「blockquote{}」のみ使われたコード例

 

「blockquote{}」以外も含むコード例

 

⑤変更が完了したら、画面左下の「ファイルを更新」をクリック。

更新が完了したらサイトへ戻って確認してみて下さい。

 

引用部分のデコレーションが変更されていれば完了です。

お疲れ様でした!

 

【補足】

どうやら「.post」が含まれないとStinger8の場合は反映されないようです。

親テーマのstyle.cssを確認したところ「blockquote {}」の部分が「.post blockquote {}」で呼び出されていたので変更したところうまくいきました。

 

以上、引用カスタマイズでした。

参考になれば幸いです。

 

本日もご覧頂きありがとうございました。