読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

WordPressのページタイトルの1文字目を装飾する

Web Web-WordPress

f:id:yamato-ugaki:20160801185220j:plain


こんにちは。
ユーザー視点からのUIを気にかけられる web制作の宇垣です。


近所の自動販売機にアプリ連携機能が導入され、購入ごとにスタンプを押してくれるのでついつい必要以上に買ってしまいます。



さて、弊社はWordPressを用いてのサイト制作がメインですがWordPressではテンプレートという基準となるレイアウトデザイン(ページの背景・上の方・下の方)を制作して、他のページは中身部分を独自に書き換えていくような制作方法です。
便利なタグも多く、と入力すると書くページタイトルを、全ページ共通のデザインにすることも可能です。

ただしかしネックなのが、このタグを持ちいると下記のような文字に個別にCSS装飾が加えられない点です。


f:id:yamato-ugaki:20160801185626j:plain


紙面のデザインなどでよく見かけるこのスタイルを反映しようと思うと、各ページの固定ページ内に書いていくか、タイトル欄の中に書いていくか、はたまた画像にするか。
画像にするのもページが増えると手間です。

f:id:yamato-ugaki:20160801185951p:plain
(これだとカッコ悪い)
(かといって、エディタ内に書くとレイアウトに変更があったときに苦労する…)
などいろいろ考えながらコーディングをしておりますが

これを一発で解決してくれる擬似クラスがありましたのでWordPress便利帳にてご紹介させていただきました。
サンプルソースなどもこちらから。



wp-notebook.com

ページトップ