【Manablog Copy】カスタマイズ方法まとめ【随時更新】

どうもこんにちは、りゅう（@ryuta_blog）」です！

本ページでは、Manablog Copyのカスタマイズ方法をまとめました。

随時更新していきます！

テーマ導入の際には基本設定が必要です。お済みでない方は、下記記事の「Manablog Copyの設定方法のまとめ」をどうぞ。

>> 【お知らせ】マナブログのWordPressテーマのコピーを販売します

【Manablog Copy】カスタマイズ方法まとめ

【Manablog Copy】カスタマイズ方法まとめ

カスタマイズをする際は必ずバックアップを取り、自己責任で御願い致します。

カラーの変更

カラーを変更することで、オリジナリティーが出ますよね。

それでは各パーツを見ていきます。

見出し2

style.cssに下記をコピペします。

style.css

.single h2 {
background: #f7f7f7;
padding: 20px 15px 18px;
color: #333;
border-left: 9px solid ●●●●●●;
line-height: 40px
}

●●●●●●の部分に、お好きなカラーコードを挿入してください。

カラーコードは調べればいくらでも出てきます！オススメのサイトを2つほど掲載しておきます。

参考：原色大辞典
参考：配色パターン見本40選

見出し3

style.css

.single h3 {
font-weight: 600;
color: #4663B4;
letter-spacing: 1.6px;
padding: 0px 15px 0px;
border-left: 9px solid ●●●●●●;
color: #333;
font-weight: 600;
margin-top: 60px
}

チェック

style.css

.single p.point i {
color: ●●●●●●;
}

プロフィール画像下のライン

style.css

hr {
    width: 20%;
    border: 1px solid ●●●●●●;
}

ナビゲーションメニュー

style.css

header .nav-bg {
background: ●●●●●●;
margin-top: 10px;
padding-top: 5px;
padding-bottom: 5px;
}

背景

style.css

main {
background: ●●●●●●;
}

ナビゲーションメニューのアイコンを変更

「FontAwesome」から好きなアイコンのコードを取得し、nav-menu.phpの下記の部分にそれぞれ貼り付けます。

nav-menu.php

アイコンコードの取得方法

「FontAwesome」を開いたら、アイコンが沢山あるので、好きなものをクリックすればコードが取得できます。

ヘッダーアイコンの入れ方

まずはheader.phpを開き、下記のコードを見つけてください。

header.php

上記の枠線部分を、下記のコードに書き換えます。

header.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='ここにPC用のロゴ画像のURL' alt="ロゴ" class="logo" /></a>
 <?php endif; ?>

PC用とスマホ用のロゴ画像をそれぞれ用意し、URLを指定部に挿入します。

さいごにstyle.cssを開き、下記コードを追加します。

style.css

/*PC版ロゴのスタイル*/
.logo{
    max-width: 300px;
}
/*スマホ版ロゴのスタイル*/
.logo-sp{
    width: 160px;
    margin-top: -26px;
    margin-bottom: -20px;
}

これで完了です！このカスタマイズは「ワードプレスのみでテーマMinimal初期設定【FTP無し】」を参考にさせて頂きましたm(_ _)m

ファビコンを変更する方法

header.phpの77行目から、下記のとおりに変更します。

変更前

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">

変更後

<link rel="shortcut icon" href="ここにファビコン画像のURL">

マーカー機能を追加する

下記のようなマーカーを追加します。

style.cssに下記のコードを追加します。

style.css

.marker {
background: linear-gradient(transparent 40%, #ffff66 0%) ;
}

AddQuicktagに下記のタグを追加します。

あとは[marker]タグで囲ってやればOKです！

目次の導入方法

プラグインで目次機能を追加することもできますが、manablogではタグ打ちにより目次を追加しています。

manablog公式のやり方

<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 目次</p>
<ul>
   <li><a href="#01">1章</a></li>
   <li><a href="#02">2章</a></li>
   <li><a href="#03" >3章</a></li>
</ul>
<h2 id="01">1章</h2>
1章です
<h2 id="02">2章</h2>
2章です
<h2 id="03">3章</h2>

試しにこちらをコピペし、動作を確認してみてください。