「Gush2」初心者によるカスタマイズ⑨:h2 & h3 タグのデザインと色の変更、その他

 

シェアしていただけると嬉しいです。
はてブ  Pocket 

大枠はすでに完成した感のある、当ブログでの Gush2 カスタマイズ。ですが使っていくうちに「やっぱこうした方がいいかな?」という点は細々と出てくるものです。

今回もそんな微調整レベルのポイントを書いていきます。細かいですけど他ならぬ自分のための備忘録ということで。

スポンサーリンク

h2 タグのデザインを変更する

↑↑↑結論から言うとこうなってます↑↑↑

前のデザイン・色目ももちろん好きなんですけど、もうちょいメリハリをつけたいなと。

修正前のスクショ取るの忘れちゃったのですが、h2 タグ左の線をより太くして、下部の線を削除しました。Gush2 使いの方はご自身のブログと見比べてみてください。

PC での見た目を変更

このブログはすでに色目を変えていたので下記のようになっています。「1024px 記事見出し」の・・・

この border-left 部分が h2 タグ左の線です。もともとの太さは 5px ですが、これを3倍の 15px に変更します。確認してみるとこれだけでもう3倍の太さになっているはずです。

次いで下の線を消します。下の線は全デバイスで表示されますので、「全体定義」から・・・

border-bottom: 2px solid #ffb6c1; これを行ごと削除すれば終わり。

もうこれだけで今見えているようなh2タグのデザインとなりました。

スマホでの見た目も変更

ただしこのままだと、スマホで見るとh2見出しはただのグレーのボックスとなってしまいます。スマホでも PC と同じデザインにしたいので、上記全体定義部分で border-left: 15px solid #e75480; を追加します。

h2修正後

うん、いい感じ。

タブレットでの見た目も変更

さらにタブレットで見た場合のデザインも忘れずに変更しておきます。「768px 記事見出し」以下の部分。

これまで同様に、border-left15pxにするだけです。

はい、これにてh2見出しのデザイン変更は終わり。

h3 タグの下線カラー変更

h3 タグはデフォルトだと薄いグレーです。今回は今まで h2 タグの下線で使用していた薄いピンクにしていきます。

PCでの見た目を変更

まずはプレビューしやすく PC から変えていきます。h2 同様に「1024px 記事見出し」内のこの部分。

下線=borde-bottom は薄いグレー(ccc)となっていますが、これを薄いピンク(ffb6c1) へと変更しました。

スマホでの見た目を変更

次いでスマホへ。というかアクセスの70%以上がスマホですから、こっちの方が大事なんです。「全体定義」から・・・

ここもまったく一緒ですね。border-bottom の色を薄いピンク (ffb6c1) へと変更。

タブレットでの見た目を変更

最後に忘れずタブレット。「768px 記事見出し」部分。

border-bottom の色を薄いピンク (ffb6c1) へと変更。

以上!

これにて無事に h2 見出しと h3 見出しのデザイン、色目が変わりました。結果は今ご覧になっているとおり。ええ塩梅にメリ&ハリがつきました。

サイドバー右上の SNS アイコンを削除

sns botton

これは迷いましたが、SNS 誘導/登録に関してはおそらく他のヴィジェットの方が稼働しているだろう・・・ということで見た目優先で削除することにしました。

外観-サイドバーへ進み、<!–アイコン–>以下の <div class=”side-sns”> から </div> までを丸っと削除して終わりです。

記事をツイート共有ボタンに自分宛てメンションを付けるようにした

これはカスタマイズでも何でもないんですが。

たまたま TL で流れていて気付きましたが・・・ん?これ今回偶然見てないと気付かなかった?ということに気が付きまして。

んで自分で記事下のツイートボタンを押してみるとこのような状態。

tweet

OH…これは早急に修正せねば。

外観-sns.phpの一番上の部分

今は data-via=”higotanda” となっていますが、ここがブランクになっていたことが原因でした。上記のような状態に修正して改めてツイートボタンを押します。

tweet2

ばっちりでした。みんなどんどん押して(ツイートして)みて!ww

以上が Gush2 の9回目カスタマイズ(微調整)でした。

スポンサーリンク

微修正事項(随時更新)

2015/1/6

①サイト名変更しました。Choice is yours → The choice is yours – オッサンライフハックブログ – へ。

②それに伴いロゴ画像変更。文字が2段になりました。縦に長くなった分、横幅はこれまでの300pxから250pxにして圧迫感を感じさせないようにしてみました。

③サイト内検索をデフォルトに戻しました。

2015/2/4

ガラッと変更。h2 のレフトはロイヤルブルー(4169e1)へ。h3 のボトムはやや薄いブルー(7E98E8)にしました。

2015/2/5

チェックマークの png 画像変更。見出し色をブルー系に変えたので、チェックマークはレッド系でコントラストをつけました。ええ感じ。

  • チェックワンツー
  • チェックワンツー

style.css 内のコードはデフォルトでは上記のようになっています。「チェックマーク フリー」等で検索すると色々出てきますので、気に入った画像があったら保存して、

(WordPressインストールしたフォルダ)/wp-content/themes/gush2/images

へとアップ。んで “checkmark.png” 部分を新しい画像名に変更するだけです。

ちなみに私がいただいたのは下記サイト。ありがとうございます。

こちらにもたくさんありますよ。

2015/3/2

ふとサイト内検索したら、検索結果上下に広告のダミー画像(728×90ってやつ)が。全然気づかなんだ。

検索結果に広告を掲載する気もないし、これはすべて表示させないようにしました。index.php の中にあるこの2箇所を丸っと削除で終了。

まず上部。

次いで下部。

スポンサーリンク

こちらも読まれています

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。