かんろぐ Written by kan

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

BLOG CODE SEO WordPress

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

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

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

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


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

Manablog Copyの仕様

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

Manablog Copyに向いている人

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

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

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

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

見ておくべき参考サイト

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

更新情報:2021年10月30日

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

【Manablog Copy】カスタマイズ方法まとめ【最新2021版 / 初心者OK】
大きく実装された内容は以下の2つです。

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

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

mblogテーマカラー

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

WordPressメニューの「外観→カスタマイズ」に進みます。そして「mblogテーマ」を選択します。
マナブログコピーの説明

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

  • デフォルト(黒)
  • White
  • Green
  • Blue

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

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

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

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

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

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

マナブログコピーの説明
マナブログコピーの説明
マナブログコピーの説明

ウィジェット

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

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

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

マナブログコピーの説明
そして、追加されたウィジェット機能は以下の通り。

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

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

マナブログコピーの説明
マナブログコピーの説明

Twitterウィジェット

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

マナブログコピーの説明

  1. タイトル
  2. Twitter ID(@無し)
  3. 表示する長さを指定(半角数字)

マナブログコピーの説明

アーカイブ

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

著者情報(サイドバー)

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

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

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

  1. 画像を選択
  2. タイトル
  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>

著者情報(フッター)

フッタープロフィールを設定します。画像を追加することはできません。

マナブログコピーの説明
設定する項目は2つのみです。

  1. タイトル
  2. 説明文

マナブログコピーの説明

スペーサー

セクションの間にスペースを作ることができます。

マナブログコピーの説明
マナブログコピーの説明
「◯◯px」と入力すると反映されます。○=半角数字で入力。

タグクラウド

タグクラウドとは、webページごとの主要ワードをカテゴリー、タグとして登録した上で内部リンク集としてコンテンツ化したものです。タグクラウドは、ブログのサイドカラムのコンテンツとしてよく利用されるので、サイドバーを推奨します。

マナブログコピーの説明
設定する項目は2つのみです。

  1. タイトル
  2. タクソノミー設定

タクソノミーから設定する項目は3つ。

  • カテゴリー
  • タグ
  • リンクカテゴリー

マナブログコピーの説明

Portfolio

ポートフォリオがあれば、こちらに載せることができます。マナブさんのPortfolioはこのようになっていますね。

マナブログコピーの説明
WordPressメニューの「外観→メニュー」を選択。新規作成の場合は以下の手順です。

  1. 「新しいメニューを作成」を作成をクリック
  2. メニュー名を決める
  3. 「固定ページを自動追加」にチェック
  4. メニューを保存する

マナブログコピーの説明
上記の、メニューの作成が終わったら「外観→メニュー」を選択。「メニューを選択→メニューを追加→保存する」で完了です。

  1. 作成したメニューを選択
  2. 載せたい項目「メニューを追加」をクリックorメニュー構造に好きな位置にドラッグ
  3. メニューを保存

マナブログコピーの説明
最後は「カスタマイズ」から、「ポートフォリオ」を選択し、追加します。

マナブログコピーの説明
上記で設定完了です。

人気記事

ここでは、人気記事の設定ができます。

マナブログコピーの説明

検索

Manablog Copy専用の検索フォームです。

マナブログコピーの説明

Manablog Copyの初期設定方法のまとめ【随時更新します】

準備中です・・・m(_ _)m

WordPressテーマ「Manablog Copy」の購入はこちら

購入はこちらからどうぞ。
Manablgo Copyを購入する

購入時に気を付けるポイント

購入時に気をつけるべきポイントもあります。

  • 完全初心者にはやや難しい
  • 独自カスタマイズはできない
  • 有料テーマ»6980円
  • アップデート時などは大変

上記の通りですね。今回のアップデートで、カスタマイズしやすくなったとはいえ、最低限の実装などは自分で設定する必要はあります。

また、アップデート時はバックアップを取る必要があったり、CSSでカスタマイズしてる場合は再度設定をする可能性があります。
また、有料テーマとなっているので料金が発生します。とはいえ、他のテーマに比べてもお値段「¥6,980円(税込)」と、他のテーマに比べてもかなり安いと思います。

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート