Twenty Twelve サイトタイトルをテキストから画像に置き換え

ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。

あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルのパスを取得しておいて下さい。

プラグイン

まじめに探していないですがなさそうです。

テーマテンプレートを変更して置き換え

編集対象はheader.phpとstyle.cssの2つです。子テーマのディレクトリにコピーして下さい。(子テーマ化していることが前提です。)

デフォルトでは、<?php bloginfo( 'name' ); ?>で「サイトのタイトル」をテキストで出力しています(38行目)。まずは削除して下さい。(header.php)

// header.php
// オリジナル
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
// 変更後
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"></a></h1>

それからCSSに対して画像をbackgroundで指定します。(style.css)

/* style.css */
.site-title a{
    background: url(画像のURL) no-repeat scroll 0 0 transparent; /* 画像のURL */
    color: transparent;
    height: px;  /* 画像のheight */
    width: px;   /* 画像のwidth */
}

[追] 管理画面からできるようです...

管理画面→「外観」→「ヘッダー」へ移動
"画像を選択"で画像をアップロードし、"ヘッダーのテキスト"の「ヘッダー画像上にテキストを表示する。」のチェックをはずせば同じことが行えるようです。

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

関連記事

Twenty Fifteen テーマ用フォント "Noto" / "Inconsolata"の使用を止

TwentyFifteenでは、テーマ用のフォントとして「Noto」と「Inconsolata」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどのようなフォント

ログイン画面・機能をカスタマイズ

CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.

折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ

「最近のコメント」ウィジェットをカスタマイズ

「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除

Twenty Twelve "Open Sans"の使用を止

「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば

Twenty Ten カスタマイズ

Twenty Tenのカスタマイズについてのまとめです。 目次 コンテンツナビゲーション 非表示 「投稿日」を非表示 「作成者(投稿者)」を非表示 "コメントをどうぞ"("leave a

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点

TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

アバターサイズの変更など Twenty Twelve 1.3での変更点

Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel

テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑