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

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

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

随時更新していきます！

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

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

カラーの変更

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

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

見出し2

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

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

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

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

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

見出し3

.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
}

チェック

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

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

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

ナビゲーションメニュー

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

背景

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

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

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

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

「FontAwesome」から好きなアイコンのコードを取得し、nav-menu.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を開き、下記コードを追加します。

/*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に下記のコードを追加します。

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

 

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

 

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

 

目次の導入方法

プラグインで目次機能を追加することもできますが、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を導入したけれど、記事...

あなたもブログ始めてみませんか？

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

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

＼無料で公開中／

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