ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPressテーマ)】ブログ名(ヘッダー)を画像にする方法【スマホのブログ名は別の画像に変更】

その他の追加設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、ブログ名を画像にする方法を紹介します。合わせてスマホのブログ名は別の画像にしたい場合の変更方法も紹介します。

注意念のため必ずコードや元記事ののBackupを取っておいてください。※トラブル等あった場合は責任を負えませんので必ず自己責任でよろしくお願いします。

当ブログについて

マナブログさんに参考マニュアルとして掲載して頂きました😆
本家認定のマニュアルです。

【Manablog Copy】ブログ名(ヘッダー)を画像にする方法、スマホのブログ名は別の画像に変更

ブログ名(ヘッダー)を画像にする方法は以下です。

ちなみに、既に実装済みのブログは以下ですので合わせてご参考ください。

ブログ名画像の準備

まずは、画像を準備します。
私のブログでは下記のサイズで準備しました。
下記の画像サイズそのままで素材を準備すればリサイズの必要は無いと思います。

PC用の画像(横1000px*縦100px)


マナブログコピーのPCプレビューのロゴ部分(ブログタイトル)の背景は白(#FFF)なので、同様に白で作成。

※サイズが大きいのは、ジャストサイズだとロゴがボケてしまう場合があるので、予め大きめの画像を縮小して使うことでクリアにロゴを出します。


スマホ用の画像(横456px*縦74px)


マナブログコピーのスマホプレビューのロゴ部分(ブログタイトル)の背景は黒(#000)なので、同様に黒で作成。(そうすると画像の切れ目が見えません)

完成イメージ

PCプレビューの完成イメージ


スマホプレビューの完成イメージ


管理画面メディア新規追加で、作成したPC用のロゴスマホ用のロゴをそれぞれアップロードします。


それぞれ、画像のURLを控えておきましょう。

PHPファイルの編集

PCのロゴ画像横幅500px程度に出したい前提の修正です。

次に、管理画面外観テーマエディターheader.phpにアクセスします。

60行目〜80行目辺りにある<h1>〜</h1>タグ内のコードを書き換えます。

修正前のコード

<h1 class="title">
<?php } ?>
<a href="<?php echo home_url(); ?>" class="sitename"><span class="sitename main">ManablogCopyまとめ</span>
<span class="sitename sub">Written by gomakichi</span>
</a>
<?php if (is_front_page()) { ?>
</h1>

修正後のコード

<h1 class="title"> 
	
 <?php } ?>
 
 <?php if ( is_mobile() ) : ?>
 <a href="<?php echo home_url(); ?>"><img src='★スマホ用画像のURL★' alt="ロゴ" class="logo-sp"  style="width:100%;margin-left:5%;margin-right:5%;" /></a>
	
	<p class="copy-header">ごま基地 : 広告 ✕ デザイン ✕ ブログ</p>
	 									 
 <?php else: ?>
 <a href="<?php echo home_url(); ?>"><img src='★PC用画像のURL★'   alt="ロゴ"  style="margin-top:10px; width:500px;" /></a>
	
 <?php endif; ?>
 
 <?php if (is_front_page()) { ?>
 
 </h1>
				

★スマホ用画像のURL★★PC用画像のURL★には、それぞれ画像のURLを入れましょう。

キャッチコピーも差し替えしてください。

CSSを追加する

次にCSSを追加します。

カスタマイザー追加CSSに下記のコードを追加します。

.col-xs-2 {
    width: 0%;
}

header .blogname {
    margin-top: 0px;
    margin-bottom: 0;
}

.col-sm-12 {
    width: 100%;
}

.col-xs-8 {
    width: 80%;
	padding-left:0px;
	padding-right:0%;
}


.col-xs-2 sp-nav-btn{
position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 10%;
}

header p {
  display: block;
	font-size:15px;
	font-weight:bold;
	margin-left:5%;
	color:#D2C2B0;
	margin-top:10px;
	font-family:sans-serif;
	width:100%;
}



.menu-btn{
color:#fff;
}


画像提供:Macrovector – jp.freepik.com によって作成された banner ベクトル




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定