キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

      2014/10/28

○○する方法しかネタがないキャリコ( @calicocatxyz )です。

っということは、それだけカスタムを楽しめる STINGER5 だってことです。さぁ、今日も元気にカスタマイズ!それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

今日は h3 タグにアイコンを付けて、h4 タグに背景を指定ということで、さっそく行くにゃ。

Ads by Google

h3 タグにアイコンを付ける

画像を用意する

まずはアイコンにしたい画像を用意するにゃ。キャリコではこの見出しで使ってるのがそうにゃ。

※2014年9月22日現在キャリコではアイコン型ウェブフォントを使用しています。

CSS で h3 に指定する

画像をアップロードしたら CSS に記述するにゃ。

アイコンをリピートさせないために background には no-repeat を指定、アイコンとテキストの垂直方向と水平方向を合わせるために background-position を left center に指定、アイコンとの余白を取るために text-indent は 40px に調整したにゃ。

これで終了、簡単簡単♪にゃんて思ってたら、あることに気付いたにゃ…

フッターの記事タイトルに h3 タグが指定されてて、ここにもアイコンが付いてしまったにゃ…

フッターの h3 を含めない指定をする

h3 の指定領域を狭めるためにソースを見たら、ブログ記事は section 内に配置してあることがわかったにゃ。それがわかればコードに付け足すだけにゃ。

1行目の色を変えた部分に section と付け足すだけで、section 内の h3 にだけ指定することが出来るにゃ。この指定によってフッターの h3 にはアイコンが付かなくて、これにて終了にゃ~、と思ったら…

またまた問題発生にゃ。。

今度はトップページの記事タイトルが折り返したときにアイコンと重なってるにゃ…

h3 タグが折り返したときの処理をする

h3 タグが折り返して2行になっても3行になってもいいように、CSS の記述を変えて対応するにゃ。

4行目の text-indent を padding-left に変更したにゃ。

これでいくら折り返してもテキストがアイコンにかぶらなくなったにゃ。でも、なーんか見た目が悪い気がするから、トップページの h3 タグにはアイコンを付けないことにしたにゃ。

記事内の h3 だけにアイコンを付ける

ソースを見てフッターとトップページを省ける場所を探したら、ぱんくずリストの上に post というクラスがあったにゃ。ここに指定すれば記事内だけの h3 にアイコンを付けることが出来るにゃ。

1行目の section を .post に変更すれば万事解決にゃ。

h4 タグに背景を指定する

STINGER5 は 20140902 のマイナーアップデートで h4 と h5 にデザインが付いたらしいけどキャリコではアップデートしてないからわからないにゃ。

背景画像を用意する

まずは背景にしたい画像を用意するにゃ。キャリコではカテゴリや人気記事のタイトルで使ってるのがそうにゃ。

CSS で h4 に指定する

画像をアップロードしたら CSS に記述するにゃ。h3 の失敗を踏まえてサイドバーにだけ存在する h4 に指定することにしたにゃ。

背景画像をリピートさせるために background には repeat を指定、テキストの周りに余白を入れたいから padding で 上下 5px 左右 10px を指定、margin-bottom で下に 10px の余白を取ったにゃ。

まとめ

普段はフッターなんて見ないしタイトルは短いものばっかりだったから、h3 タグの表示がおかしなことに気付くまでに時間がかかったにゃ…

今ではウェブフォントというのもあるから、少しでも表示スピードを上げたり容量を軽くしたい人は使うといいにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

STINGER5 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

1
ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …