2021/05/06 (更新日: 2023/03/21)

【Manablog Copy】カスタマイズ方法まとめ【最新2023版 / 初心者OK】

BLOG CODE WordPress

PR ※当サイトではアフィリエイト広告を利用しています

こんにちは、かんです(»@minimal_kan)
WordPressをメインにWEB制作をしています。»プロフィール

いよいよ、Manablog Copyのアップデートが行われましたね！多くの方が、楽しみにしていたのではないでしょうか。さらに、このアップデートによって、Manablog Copyの販売も再開となりました。

WordPressテーマ「Manablog Copy」の詳細はこちら

本記事では、初心者の方にも分かりやすく、Manablog Copyのカスタマイズ方法を紹介していきます。
Manablgo Copyを購入する

Manablog Copyの仕様

Manablog Copyは必要最低限の機能実装となっており、その分SEOに特化したテーマとなっています。他のテーマは、ブログを書く時に必要のない機能が多かったりしますよね。
他のテーマと比べて、使用できる装飾もシンプルな機能のみしかありません。その方がコンセプトや世界観が統一できるので、そこが大きな魅力でもあります。

Manablog Copyに向いている人

manablogと同じデザインを使いたい
必要最低限の機能で十分
ブログに集中したい

僕はmanablogのデザインが好みなのと、マナブさんと同じテーマを使えるというだけで、とても嬉しいしモチベーションアップに繋がっています。

今回のアプデによるイメージ動画

マナブさん本人の解説動画はこちら

Manablog Copyのマニュアルを作りました😌
※動画にて解説しています

・初期設定：https://t.co/Oii0Wmm277
・プラグイン設定：https://t.co/ywshbj0K8A
・記事投稿の方法：https://t.co/048rAq7C2c

こちら閲覧したら、Manablog Copyの使い方はバッチリ理解できるはず。ぜひ参考にどうぞ

— マナブ@バンコク (@manabubannai) May 18, 2021

見ておくべき参考サイト

最低限の設定や、過去の参考サイトもありますので一度見ておくことをおすすめします。

更新情報：2022年10月11日

この記事を書いている僕ですが、３０代未経験からWeb業界へ転職して約１年ほど。「Twitter」で転職について発信をしていたり、転職コミュニティ「CodeChange」を運営したり、「未経験からの転職完全ロードマップ【プレゼント配布有】」を執筆してます。※なお、8000字まで無料で読めます。

Manablog Copyのカスタマイズ方法まとめ【最新版】

大きく実装された内容は以下の２つです。

Mblogテーマカラー
ウィジェットカスタマイズ

この2つが実装されたおかげで、初心者の方でも簡単にカスタマイズが可能となりましたね。それでは、カスタマイズの設定をしていきましょう。
すでにブログを開設していたり、他テーマからManablog Copyへのテーマ変更、またカスタマイズをする時は必ずバックアップを取ることをおすすめします。

mblogテーマカラー

このテーマカラーでサイト全体のイメージを変えることができます。

WordPressメニューの「外観→カスタマイズ」に進みます。そして「mblogテーマ」を選択します。

デフォルトで選べるカラーバリエーションは4種類

デフォルト(黒)
White
Green
Blue

今までのManablog CopyはCSSを触る必要があったため、エンジニア向けとなっていました。今回のアップデートで、エンジニアじゃなくても簡単に変更することが出来るようになりましたね。

お好みで調整したい方はカスタムを選択

さらに、カラーピッカーで調整ができる仕様となっています。

お好きなカラーにカスタマイズが出来ますが、デザインの知識がないと少し難しいかもしれません。

カスタマイズできる箇所は以下の通りです。

ナビゲーション背景
ナビゲーションリンク
ナビゲーションリンクホバー
ドロップダウンメニューホバーリンクカラー
サイトネーム
記事見出し　H2
記事見出し　H3
記事見出し　H4
記事リスト　背景
記事リスト　ボーダー
記事ポイントチェックマーク
hrカラー
フッタークレジット

ウィジェット

WordPressメニューの「外観→カスタマイズ」に進みます。そして「ウィジェット」を選択します。

ウィジェットのカスタマイズができる箇所は下記の通りです。

サイドバー
フッター　左
フッター　中
フッター　右

そして、追加されたウィジェット機能は以下の通り。

Twitterウィジェット
アーカイブ
著者情報（サイドバー）
著者情報（フッター）
スペーサー
タグクラウド
Portfolio
人気記事
検索

「ウィジェットを追加」を選択→追加したいウィジェットを選択したら表示されます。

Twitterウィジェット

自分のTwitterタイムラインを掲載することができます。

タイトル
Twitter ID（＠無し）
表示する長さを指定（半角数字）

アーカイブ

アーカイブを表示することができます。

著者情報（サイドバー）

ここはでプロフィール設定ができます。
画像と自己紹介を入力していきます。

WordPressにアップした画像をここで選択します。
※正方形推奨。縦横の幅が違うと、丸く切り取られない場合があります。

設定する項目は以下の3つ。

画像を選択
タイトル
説明文

Twitterのリンクやプロフィール、アイコンを入れる方法

「Manablog サイドバー著者情報」を選択→「説明文（HTML使用可能）」にソースコードを記述。

XXXXにTwitter ID、タイトル、URLを記述。


<div align="right">
<i style="color: #2b7bb9;" class="fa fa-twitter" aria-hidden="true"></i>
<a href="https://twitter.com/XXXXXXXX"> Twitter <i class="fa fa-angle-right"></i></a>
<br>
<a href="https://XXXXXXXX" class="pull-right">プロフィール詳細 <i class="fa fa-angle-right"></i></a>
<br>
<a href="https://XXXXXXXX" class="pull-right">お問い合わせ <i class="fa fa-angle-right"></i></a>
</div>

当サイトで記述している内容は以下の通り。コピペしてURLを変更すれば使用できます。


<div align="right">
<i style="color: #2b7bb9;" class="fa fa-twitter" aria-hidden="true"></i>
<a href="https://twitter.com/minimal_kan"> Twitter <i class="fa fa-angle-right"></i></a>
<br>
<a href="https://kanlog.org/profile/" class="pull-right">プロフィール詳細 <i class="fa fa-angle-right"></i></a>
<br>
<a href="https://kanlog.org/contact/" class="pull-right">お問い合わせ <i class="fa fa-angle-right"></i></a>
</div>