ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

20160801185626

20168/1

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

WordPressの見出しに工夫を加える

WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイアウトにすることに長けていると思います。
通常のHTMLとはちがい、header.phpを用意して共通のヘッダー・フッター。固定ページはpage.phpを参照して似たレイアウトを簡単に複製できるという利点があります。

そのため、bloginfo()などを代表とした、インクルードタグやタイトルタグ、などの独自のタグも多く、それらは各ページのテンプレート化に大変便利です。

紙面デザインなどで見かける、1文字目に工夫を加えるデザイン

first-letter

このように、1文字目だけ強調したようなデザインも多くあると思います。

しかし各ページの見出し部分は<? the_title() ?>で表現しているためHTMLタグが書き加えられない。タイトルの中にタグを書くのもかっこ悪い。

f2d89724a851c8b7ff2dff9cd41b68cb

かといって、各ページの見出しを全て画像にするのもページが多いサイトの場合、不便・手間だと思います。
その場合に1文字目だけにきくCSSがありました。

擬似クラス:first-letter

見出しタグに特定のクラス名をつけて、CSSで「:first-letter」を指定します。すると内包するものがWordPressのタグでも、1文字目だけにCSSを効かすことも可能です。


.page_ttl {
 font-size:20px;
}
.page_ttl:first-letter {
 font-size:50px;
 color:#ff6699;
 display:inline-block;
 margin-right:10px;
}

この擬似クラスを用いることで全ページ共通した見出しデザインが可能となります。
気になった方はお試しください。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

a

201710/24

プラグインを使わない絞り込み機能【未選択時はすべて表示したい】

Wordpressの検索機能について チェックボックスに1つもチェックをいれなかったら 絞り込まずに全部表示。 「絞り込みの入…

av

Welcartのカテゴリー管理・新規登録ページをカスタマイズする

ECサイトをWordpressで運用するときに使われる『Welcart』というプラグイン。 私はこのプラグインが使いにくくて仕方がないです…

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

ページ上部へ戻る