どうもこんにちは、りゅう（@ryuta_blog）」です！
本ページでは、Manablog Copyのカスタマイズ方法をまとめました。
随時更新していきます！
テーマ導入の際には基本設定が必要です。お済みでない方は、下記記事の「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の下記の部分にそれぞれ貼り付けます。
「FontAwesome」を開いたら、アイコンが沢山あるので、好きなものをクリックすればコードが取得できます。
ヘッダーアイコンの入れ方
まずは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;
}
その他カスタマイズも順次更新予定です。
副業でブログを始めてみたい…
そもそもブログで稼げる仕組みって？
皆はどのサービスを使ってる？
そんな疑問・悩みはこれ一つで全て解決！
＼無料で公開中／
