ブログデザイン

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

どうもこんにちは、りゅう(@ryuta_blog)」です!

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

随時更新していきます!

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

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

【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: ●●●●●●;
}

フッター「copyright」部の背景色

style.css
.credit {
background: ●●●●●● !important;
}

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

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

nav-menu.php
アイコンコードの取得方法

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

 

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

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

header.php

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

header.php
<?php if ( is_mobile() ) : ?>
 <a href="<?php echo home_url(); ?>" class="sitename"><span class="sitename main"><img src='ここにスマホ用のロゴ画像のURL' alt="ロゴ" class="logo-sp" /></span></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>

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

もし毎回目次を設定する場合、AddQuicktagに登録しておくと便利かもです!

 

記事下に「お仕事の依頼場所」を追加する方法

① related.phpの74行目と106行目を削除します。

② 79行目を下記のとおりに書き換えます。

<a style="background-image:url(ここに画像URL);" href="表示させたい記事のURL"  itemprop="url" class="thumbnail-img"></a>

 

③ 82〜84行目を下記のとおりに書き換えます。

<a href="表示させたい記事のURL">
    タイトル
</a>

 

④ 86行目〜88行目を下記のとおりに書き換えます。

<p>
    <a href="表示させたい記事のURL">自由テキスト</a>
</p>

 

プロフィールにSNSリンクを追加する

プロフィールに下記を挿入します。(プロフィールの設定方法はこちら

<div align="center"><i class="fa fa-instagram" aria-hidden="true"></i> <a href="インスタのURL"> Instagram</a>・<i class="fa fa-twitter" aria-hidden="true"></i><a href="ツイッターのURL"> Twitter</a>・<i class="fa fa-facebook-square" aria-hidden="true"></i><a href="フェイスブックのURL"> Facebook</a></div>

 

ロゴを中央寄せにする

header.phpの下記のように、<img>タグを囲みます。

囲むコード
<div class="img_block"></div>

 

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

.img_block img{
     display: block;
     margin:auto;
}

 

その他カスタマイズも順次更新予定です。

【Manablog Copy】 よくある質問まとめ【一問一答】ついに「Manablog Copy」がリリースされましたね!本ページでは、期間限定キャンペーンの「無料チャットサポート」にて質問の多かったものを「よくある質問」としてまとめました。...
【Manablog Copy】タグの使い方まとめ【初心者向け】どうもこんにちは、りゅう(@ryuta_blog)」です! 本ページでは”Manablog Copyを導入したけれど、記事...
あなたもブログ始めてみませんか?

副業でブログを始めてみたい…
そもそもブログで稼げる仕組みって?
皆はどのサービスを使ってる?

そんな疑問・悩みはこれ一つで全て解決!

\無料で公開中/

>>ブログの始め方完全マニュアル