WordPress個別サポート

賢威のトップページのテンプレート(index.php)やCSSをカスタマイズしてデザインを変更する例を紹介します。検証したバージョンは賢威6.2クール版です。

キャッチコピーの背景色を設定する

トップページのメイン画像の上にはキャッチコピーが表示されます。文字の色が白いので画像によってはキャッチコピーが見づらくなります。

メイン画像によってはキャッチコピーが見えづらくなる

メイン画像によってはキャッチコピーが見えづらくなる

次のCSSを子テーマのstyle.cssなどに記述すると、キャッチコピーの背景色を設定して文字の色も変更できます。

/* キャッチコピーの背景色を設定 */
#main-image .catch-copy {
    background: #fff;
    color: #000;
    padding:10px;
    opacity: 0.9;
}
子テーマを使わずにCSSをカスタマイズする方法は以下のページも参考にしてください。
子テーマをインストールせずにCSSをカスタマイズできるプラグイン

背景色を白に、文字を黒に、余白を10pxに設定しています。opacityは透過です。裏の画像が透けて見えます。

キャッチコピーの背景色を設定

キャッチコピーの背景色を設定

メイン画像の幅を画面いっぱいに広げる

トップページに表示されるメイン画像のPCでの表示幅は950pxに設定されています。

トップページのメイン画像(幅950px)

トップページのメイン画像(幅950px)

次のCSSを入力すればメイン画像の幅を画面いっぱいに広げることができます。

/* メイン画像の幅を100%に設定 */
.col2 #main-image-in {
    width: 100%;
}

/* メイン画像の余白を削除 */
#main-image-in {
    padding: 0;
}

「.col2」は2カラムデザイン用のセレクタです。必要に応じて「.col3」などに修正してください。

メイン画像の幅を画面いっぱいに

メイン画像の幅を画面いっぱいに

最新情報の抜粋を消す(CSSで対応する場合)

トップページのブログ記事の一覧(最新情報)には抜粋も表示されますが、この抜粋を削除することもできます。

index.phpを修正した方がスッキリしますが、CSSで対応したい方は次のようなコードで消すことができます。

/* 最新情報の抜粋を消す */
#main-contents dl.news dd div {
    display: none;
}

抜粋を非表示にした結果は次のようになります。

最新情報から抜粋を消す

最新情報から抜粋を消す

最新情報の抜粋を消す(テンプレートを編集する場合)

テンプレートのPHPを修正してスッキリと抜粋を消すにはindex.phpを編集します。

最新情報を表示している命令は63行目のnewposts_keniです。

newposts_keni($new_info_rows,1,1,"year",0,the_keni('new_info')); ?>

この( )に指定された3番目のパラメータが「抜粋を表示するか」です。「1」は抜粋を表示、「0」は抜粋を表示しない設定なので、「0」に変更します。

newposts_keni($new_info_rows,1,0,"year",0,the_keni('new_info'));

これで抜粋が削除されます。HTMLソースからも消えます。

index.phpを修正して抜粋を消す

index.phpを修正して抜粋を消す

「やっぱり抜粋を表示したい」と気が変わったときは上記の「0」を「1」に戻してください。それだけで元に戻ります。

「賢威の設定」‐「トップページ」メニューの「新着情報の表示」で「タイプ1」「タイプ2」いずれを選んだ場合でも、この命令で抜粋の表示/非表示を切り替えることができます。

最新情報には特定のカテゴリーのみを表示したい

賢威のトップページの記事一覧は2回表示されるので、最初の最新情報には「お知らせ」カテゴリーのみを表示したいことがあるかもしれません。

その場合も上記のindex.phpでnewposts_keniを呼び出すときのパラメータで制御できます。5番目のパラメータ(初期設定は0)にカテゴリーIDを指定すれば、そのカテゴリーの投稿のみが表示されるようになります。

newposts_keni($new_info_rows,1,0,"year",0,the_keni('new_info'));

たとえば、「お知らせ」カテゴリーのIDが12なら、次のように指定すれば最新情報にはお知らせカテゴリーのみが表示されます。

newposts_keni($new_info_rows,1,0,"year",12,the_keni('new_info')); ?></dl>

最新情報にお知らせカテゴリーのみを表示した結果は次のようになります。

最新情報にお知らせカテゴリーのみを表示する

最新情報にお知らせカテゴリーのみを表示する

「最新情報」を「お知らせ」に変更する

最新情報を特定カテゴリーのみに絞ったなら、「最新情報」のラベルも変更したいところです。「最新情報」のラベルはindex.phpの51行目で表示されています。

<h2><?php _e('Latest Info','keni') ;?></h2>

h2タグで囲まれた部分を「お知らせ」などに変更すれば自由にラベルを修正できます。

<h2>お知らせ</h2>

表示結果は次のようになります。

「最新情報」を「お知らせ」に変更

「最新情報」を「お知らせ」に変更

上記のように「やっつける」のではなく、「Latest Info」に対して「最新情報」の日本語訳を割り当てるなど翻訳リソースをきちんと管理したい場合はja.poファイルをPoeditなどで編集してmoファイルを更新することになります。ここでは説明しませんが、それほど難しくないのでPoeditをダウンロードして試行錯誤してみてください。
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート