【マナブログminimal】ブログタイトルを画像に変更する方法 | MUKKUN QUEST
MUKKUN QUEST     

 

【マナブログminimal】ブログタイトルを画像に変更する方法

minimal

こんにちは!初心者ブロガーの味方むっくんです!
マナブログの学さんが開発したWordPressテーマ【minimal】を使っています。

このWodPressテーマは各部の設定方法が少々難しいので
初心者向けに細かく説明をしています。

今回説明するのは

ブログタイトルを画像に変更する方法です

 

この赤矢印の部分ですね。
タイトルはブログの顔です!ここはシンプルに文字列としても設定できますし、当ブログのように好きな画像に設定することも可能です。
また、PC版とモバイル版で表示を変えることも可能なので、タイトルのつけかたで迷っている方は、この記事で解決しますよ!

それではさっそく、マナブログの学さんによるテーマMinimalの説明を開始します!

 

スポンサードサーチ

【マナブログminimal】ブログタイトルを画像に変更する方法

マナブログの学さんが作成したテーマMinimalは、名前の通りシンプルな構成が売りです。僕が言うのもなんですが、あまりガチャガチャしたタイトルよりは、シンプルなもののほうが映えるかもしれません。

それでは、今回も実際の画像を使用して、細かく説明していきます。
迷子は作りませんのでご安心ください。

手順➀:タイトルに設定したい画像を取り込む

まずは、Minimalのタイトルに実際に設定したい画像を用意してください。

余計なお世話かもしれませんが、著作権に違反した画像は使用しないでください。あなたのブログの価値が「0」になります。

まずはワードプレスにログインし、↓の画像の通り、「メディア」→「新規追加」をクリックしてください。


すると↓このような画面に変わりますので、そのまま画面上にデスクトップの画像をドロップしてください。


すると、画像が取り込まれ、取り込んだ画像が一覧で表示されます。1つ画像を選んでクリックすると、↓下の画像のような画面が出てきます。この赤枠のURLは、後ほど使いますのでコピーしておいて下さい。

手順②:テーマヘッダー(header.php)をイジる

それでは、敬遠しがちなCSSをイジっていきましょう!
マナブログの学さんが作成したテーマMinimalは、こうやって自分でCSSをイジることで自己成長できることもメリットの1つです。めげずについてきてください。

まずは↓の画像の通りに、CSSの入力画面を開いて下さい。
赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「テーマヘッダー」の順にクリックして下さい。


左端の行数を指定して説明していきますので、自分の開いた画面と見比べて操作してみてください♪

57行~65行を変える

現状↓このようになっているCSSを

<div class=”col-xs-12 col-sm-12 title”>
<?php if (is_front_page()) { ?>
<h1 class=”title”>
<?php } ?>
<a href=”<?php echo home_url(); ?>”><?php bloginfo( ‘name’ ); ?></a>
<?php if (is_front_page()) { ?>
</h1>
<?php } ?>
</div>

そのまま↓この内容に変えます

<div class=”col-xs-12 col-sm-12 title”>
<?php if (is_front_page()) { ?>
<h1 class=”title”>
<?php } ?>
<?php if ( is_mobile() ) : ?>
<a href=”<?php echo home_url(); ?>”><img src=’ここにロゴ画像のURL‘ alt=”ロゴ” class=”logo sp” /></a>
<?php else: ?>
<a href=”<?php echo home_url(); ?>”><img src=’ここにロゴ画像のURL‘ alt=”ロゴ” class=”logo” /></a>
<?php endif; ?>
<?php if (is_front_page()) { ?>
</h1>
<?php } ?>
</div>

コピーして、そのまま張り付けてOKです!

赤文字「ここにロゴ画像のURL」部分を変える

今コピぺして頂いた文章の中に赤い文字色で「ここにロゴ画像のURL」という文字がありますね。これを消して、先ほど取り込んだ画像のURLを入力します。

以上で、マナブログの学さん作成のテーマMinimalで、タイトルを好きな画像に変更する方法の説明は完了です!

【マナブログminimal】ブログタイトルを別の文字に変更する方法

マナブログの学さんが作成したテーマMinimalは、ミニマリスト向けのシンプルisベストなテーマです。なので、実際文字だけでバシっとキメたほうが、カッコ良く決まります。本家のマナブログも文字だけですよね!

自分の好きな文字のブログタイトルにする方法を説明します。

手順➀:早速テーマヘッダー(header.php)を変更します

先ほども説明しましたが、マナブログの学さんが作成したテーマMinimalは、自分でCSSをイジることでCSSを覚えていけるというメリットがあります。CSSをいじるなんてできない!と思う方も多いですが、一緒についてきてくださいね♪

まずは先ほど同様、↓の画像のように進んで下さい。
赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「テーマヘッダー」の順でたどり着けます。

 

57行~65行を変える

現状↓このようになっているCSSを

<div class=”col-xs-12 col-sm-12 title”>
<?php if (is_front_page()) { ?>
<h1 class=”title”>
<?php } ?>
<a href=”<?php echo home_url(); ?>”><?php bloginfo( ‘name’ ); ?></a>
<?php if (is_front_page()) { ?>
</h1>
<?php } ?>
</div>

そのまま↓この内容に変えます

<div class=”col-xs-12 col-sm-12 title”>
<?php if (is_front_page()) { ?>
<h1 class=”title”>
<?php } ?>
<?php if ( is_mobile() ) : ?>
<a href=”<?php echo home_url(); ?>”>ここにブログタイトルを入力</a>
<?php else: ?>
<a href=”<?php echo home_url(); ?>”>ここにブログタイトルを入力</a>
<?php endif; ?>
<?php if (is_front_page()) { ?>
</h1>
<?php } ?>
</div>

間違いがあるといけないので、これをそのまんまコピーして貼り付けるのが得策です。

赤文字「ここにブログタイトルを入力」部分を変える

あとは簡単!赤い文字「ここにブログタイトルを入力」という文字を消して、自分の好きなブログタイトルに変えてください。

以上で、マナブログの学さん作成のテーマMinimalで、タイトルを好きな文字に変更する方法の説明は完了です!

 

説明はいかがだったでしょうか?タイトルが決まると、なんだか嬉しくなります。マナブログっぽかったのが、急に自分のものになったようで嬉しくなりますね♪

今後もテーマMinimalの設定方法を解説していくので、また見に来てくださいね!それではまた明日!