次ページタイトルの上にアイキャッチ画像を表示するページタイトルにアイコンを付加するページタイトルのスタイルを変更するカスタマイズする場合の注意点Terapadとは?ページタイトルの上にアイキャッチ画像を表示する上記画像は、標準のまま表示した状態のキャプチャー画像です。ページタイトルの上に何らかの画像を表示したいこともあります。ここでは、アイキャッチ画像を表示する方法を紹介します。上記のような感じのイメージです。これをカスタマイズするのは、functions.phpとstyle.cssで編集します。'my_lightning_pageTitHtml');functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。ExUnit」‐「CSSカスタマイズ」メニューなどに入力します。100%;}画像の高さを200pxと指定していますがここはサイトに合わせて変更してください。画像を画面幅いっぱいに表示しているので、オリジナルのアイキャッチ画像サイズによっては引き伸ばされて見える場合があります。横幅は、1900pxあるとキレイに表示されるようになってます。全ページ同じ画像を表示する場合アイキャッチ画像ではなく全ページ同じ画像を表示する場合は、上記のfunctions.phpに入力したコードを次のように変更します。固定ページ表示や投稿記事などLightningの場合は、何も表示されないのでヘッダー画像の代りになりますね。'my_lightning_pageTitHtml');変更した部分は、4行目の画像指定の部分です。こちらフルパスで入力しておくとすべて同じ画像で表示されます。ページタイトルにアイコンを付加するページタイトルの前にアイコンを表示する方法を紹介します。固定ページでは、2通りあります。ExUnit」‐「CSSカスタマイズ」メニューに追加してください。FontAwesome;}この方法では、投稿記事の先頭にも同じフォントアイコンが+(プラス)されます。条件に合わせて変更できるとカッコいいかもしれませんが、PHPなどで指定するとなると初心者の方には、敷居が高いかもしれません。ページタイトルのスタイルを変更するページタイトルの色は「外観」-「カスタマイズ」メニューの「キーカラー」で変更できますが、サイト全体の色が変わってしまいます。その場合、CSSをカスタマイズすれば、ページタイトルの色だけを変更したり背景に画像を敷いたりすることができます。24px;}初期設定のままの場合は、ブルーですが紺色に変更してみました。no-repeat;}なお、この方法で背景画像を設定した場合はページ保存してもその画像だけは保存されません。スタイルシートで指定した画像は、保存しても含まれないようになっています。これを取るには、相当スキルないと厳しいかもですね。カスタマイズする場合の注意点PHPファイル編集時の文字コード問題functions.phpをはじめphpファイルをカスタマイズする場合によくあるミスは、文字コードが違うという場合です。WordPressの文字コードは、ご存知の方も多いですが、UTF-8です。FFFTPなどでダウンロードした場合などちゃんと設定してないとShift-JISに変更されている場合があるのです。この編集にメモ帳を使ってはいけません。Windowsの方は、Terapadでの編集を推奨します。理由は、先述の文字コードの問題でメモ帳では、Shift-JISで編集します。Terapadでは文字コードをUTF-8で編集できるからという理由ですね。テーマ編集からPHPファイルの編集すると危険?functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。サーバーによっては、変更に失敗することもあります。テーマファイルは、FTPでパソコンにダウンロードして編集したものをアップロードすることをオススメします。Terapadとは?TeraPad(テラパッド)は、Windowsで動作するSDIタイプのテキストエディターである。その名称は作者の寺尾進に由来する。Termとは一切の関係は無い。本ソフトウェアは、日本語圏では長年に亘って親しまれており、テキストエディターという有名な古参が多いカテゴリにありながらも専門に扱われた書籍も存在する。WiKiペディアTerapadは、機能拡張できるプラグインなども用意されていたりしてWindowsユーザーには、非常に便利なソフトになってます。くまはちLABでも愛用させていただいております。WEBのことならくまはちLABにお任せください。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。