![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-13.png)
マナブログのデザインに憧れるけどManablog Copyをつかいこなす自信がない。とはいえ。マナブさんが好きすぎて気持ちが抑えられない。
上記の悩みに答えます。
manablogはマナブさん(@manabubannai)が運営するブログ。
manablogきっかけでWordPressブログやアフィリエイトを始めた人は多いです。僕もそうでした。
2019年8月に1千万円くらい稼いだという最強のブログ。
そりゃ真似したいに決まってますよ。笑
「Manablog Copy」というmanablogを再現するWordPressテーマもあるのですが、僕はつかいこなす自信がありません。
なぜかというと、HTMLが必須だから。。。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-7.png)
manablogみたいなブログにしたいよー。
本サイト(ブログボーイ)はSWELLというWordPressテーマをつかっています。
なぜかというと、圧倒的につかいやすいから。
つかいやすさに惹かれて、僕はSWELLを買っちゃったわけですが。
manablogへのあこがれは消えず。。。
結論。SWELLでもmanablogデザインは再現可能です!
実際にやってみたので、SWELLのトップページをmanablogデザインに近づける手順を解説します。
前置きはこれくらいにして早速いってみましょ…!
想像の3倍つかいやすいSWELL。ブログ初心者におすすめNo.1のWordPressテーマです。史上最高の操作性で洗練されたデザインを実現。SWELLを手にしたあなたはWEBデザイナーといっても過言ではありません。幸せになれます。>>SWELL公式サイトはこちら
![](https://blog-boy.org/wp-content/uploads/2021/07/SWELLのメリット・デメリット-300x164.png)
※タップすると新しいタブで開きます
manablogデザインSWELLトップページの完成イメージ
![manablogデザインSWELLトップページの完成イメージ](https://blog-boy.org/wp-content/uploads/2021/08/manabogデザイン完成イメージ.png)
manablog風のトップページはシンプルですがSWELLでできないこともあります。
manablogとの決定的な違いは下記5。
- ピックアップメニューの下に記事タイトルを表示できない
- ピックアップメニューに「READ MORE」を表示できない
- 記事リストの上部にカテゴリーを表示できない
- ブログタイトル真横にサブタイトルは表示できない
- スマホのブログタイトルだけを黒背景にできない
とはいえ。manablogの最大の特徴は抜粋文の表示だと僕は思っています。
なぜかというと、中毒性が高いから。
トップページをmanablog風にしたい理由はマネタイズをマネたいからです。
SWELLは抜粋文の表示が可能です。
ファン化を促進するトップページはSWELLでも再現可能なのでトライしてみましょ。
SWELLトップページをmanablogデザインにカスタマイズ
![SWELLをmanablogデザインにしちゃう](https://blog-boy.org/wp-content/uploads/2021/08/マナブログPC.png)
manablogデザインの特徴は大きく分けると3つ。
- シンプル
- トップに3つの特集ページ
- 抜粋表示された最新記事
SWELLデフォルトはシンプルデザインなのでそこまで苦労はしないです。
とはいえ。カスタマイズには時間がかかるので余裕をもってがんばりましょ。
完全再現はCSSとHTMLをつかうのでギブアップします。笑
あくまで「manablog風」にする参考としてご覧ください。
タイトルとキャッチコピーを設定
![タイトルとキャッチコピー](https://blog-boy.org/wp-content/uploads/2021/08/ブログタイトル.png)
まずはタイトル、キャッチコピー、ファビコンを設定します。
![WordPressの管理画面から「外観」→「テーマ」に進みます。](https://blog-boy.org/wp-content/uploads/2021/08/外観→カスタマイズ.png)
WordPressの管理画面から「外観」→「テーマ」
に進みます。
![](https://blog-boy.org/wp-content/uploads/2021/08/WordPress設定.png)
テーマのカスタマイズ画面からWordPress設定
に進みます。
![サイト基本情報](https://blog-boy.org/wp-content/uploads/2021/08/サイト基本情報.png)
サイト基本情報
に進み、タイトル、キャッチコピー、ファビコンを設定します。
![タイトル、キャッチコピー、ファビコンを設定します。](https://blog-boy.org/wp-content/uploads/2021/08/サイトタイトル.png)
サイトタイトルはもちろん英字で。
キャッチフレーズは「Written by Manabu Bannai」にならいましょ。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-17.png)
僕は「Written by salu_san」というキャッチフレーズにしました。
こういった細かいところを真似していくと近いデザインに仕上がります。
ファビコンを設定して設定完了です。
SWELLのファビコンは「縦512px以上 × 横512px以上」が推奨です。Canvaでもつかってつくりましょ。
これで下地はの完成です…!
ヘッダー設定
![ヘッダー設定](https://blog-boy.org/wp-content/uploads/2021/08/ヘッダー.png)
下地ができたらヘッダー
を設定して見た目をmanablogに近づけていきます。
![レイアウト・デザイン設定](https://blog-boy.org/wp-content/uploads/2021/08/ヘッダーレイアウト.png)
ヘッダーナビを下に
を選択します。
![ヘッダーレイアウトロゴ位置](https://blog-boy.org/wp-content/uploads/2021/08/ヘッダーレイアウトは中央メニュー左.png)
ヘッダーレイアウトはロゴ位置:中央/メニュー:左
を選択しましょ。
パソコンでは反映されないかもですが、スマホでは反映されます。
![キャッチフレーズ設定](https://blog-boy.org/wp-content/uploads/2021/08/キャッチフレーズ設定.png)
ヘッダーロゴ近く
に表示を選択します。
![ヘッダーメニュー(グローバルナビ)設定](https://blog-boy.org/wp-content/uploads/2021/08/ヘッダーメニューグローバルナビ設定.png)
マウスホバーエフェクトは背景色グレー
を選択。
ヘッダメニューの背景色は色を指定するにチェックをいれて色を選択しましょ。
manablogのヘッダーメニュー背景色は黒です。
![検索ボタンの表示位置](https://blog-boy.org/wp-content/uploads/2021/08/検索ボタンは表示しない.png)
検索ボタンは表示しない
を選択。
manablogの検索窓はサイドバーにあるのでウィジェットで追加しましょ。後ほど解説します。
ここまで設定したときのトップページは下記のような見た目になっているはず。
![ここまで設定したときのトップページは下記のような見た目になっているはず。](https://blog-boy.org/wp-content/uploads/2021/08/トップ画面の途中経過.png)
キャッチコピーの位置が微妙ですが。。
なんとなくmanablogに近づいている感はありますよね。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-17.png)
ヘッダー部分はもうちょっとで完成ですよ。がんばりましょ…!
カテゴリーを整理しておく
![カテゴリー設定](https://blog-boy.org/wp-content/uploads/2021/08/カテゴリー設定.png)
トップバナーにカテゴリーを表示するまえにカテゴリーを整理しておきましょ。
カテゴリー制作&整理はトップページのカスタマイズ関係なく必須です。
メニューをつくる
![外観→メニュー](https://blog-boy.org/wp-content/uploads/2021/08/外観→メニュー.png)
wordpressの管理画面から外観→メニュー
を選択しましょ。
![メニュー構造を設定](https://blog-boy.org/wp-content/uploads/2021/08/メニュー構造を設定.png)
メニュー構造
は非常に便利な機能。
いろんなメニューをカスタマイズして収益記事への動線を確保しましょ。
今回はmanablogデザインにしたいのでグローバルメニューとピックアップメニューを設定していきます。
グローバルメニューをカスタマイズ
グローバルメニューカテゴリーを表示させるカスタマイズを実行します。
手順はつぎのとおり。
![グローバルメニューの設定](https://blog-boy.org/wp-content/uploads/2021/08/グローバルメニューの設定.png)
メニュー名はグローバルメニューにしておきましょ。
メニュー位置はグローバルメニューにチェックです。
メニューを作成
で下地は完成します。
![カスタムメニューでHOMEを作成](https://blog-boy.org/wp-content/uploads/2021/08/カスタムメニューでHOMEを作成.png)
メニュー項目を追加でカスタムリンク
を選択。
トップページのURLを入力しリンク文字(表示)はHOMEに設定。
メニューに追加
します。
![グローバルメニューのメニューの追加](https://blog-boy.org/wp-content/uploads/2021/08/グローバルメニューのメニューの追加.png)
メニュー項目を追加でカテゴリー
を選択。
追加したいカテゴリーにチェックを入れてメニューに追加
します。
![グローバルメニュー位置](https://blog-boy.org/wp-content/uploads/2021/08/メニュー位置.png)
メニュー位置はグローバルメニュー
とスマホ開閉メニュー内
を選択します。
メニューを保存
すればグローバルメニューの完成です。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-17.png)
メニュー制作はどのワードプレステーマも似たようなもんです。
メニューにアイコンを設置する
SWELLのグローバルメニューにアイコンを設置するなら「Font Awesome」のアイコンをつかうしかないのですが。
「Font Awesome」の読み込みはページの表示速度が遅くなる懸念があるので個人的にはつかいたくないとです。。
とはいえ。いま時点でも「かなり」manablogには近づいています。
![グローバルメニュー設置後のトップページ](https://blog-boy.org/wp-content/uploads/2021/08/グローバルメニュー設置後のトップページ.png)
「Font Awesome」 をつかう場合はSWELL設定
で設定しましょ。
詳しくは公式サイトをご確認ください。
>>SWELLで「Font Awesome」のアイコンを使う方法
ピックアップメニューを設置する
manablogといえばピックアップバナーです。
SEO対策の完全マップはお世話になった人も多いかと。僕もです。
SWELLは wordpressの管理画面から外観→メニュー
で設定ができます。
![新たしいメニューを制作](https://blog-boy.org/wp-content/uploads/2021/08/新たしいメニューを制作.png)
新しいメニューを制作します。
![ピックアップバナーを制作します。](https://blog-boy.org/wp-content/uploads/2021/08/ピックアップバナーを制作.png)
メニューを作成したら追加したいページを選択して追加していきます。
![ピックアップしたいページを追加](https://blog-boy.org/wp-content/uploads/2021/08/ピックアップしたいページを追加.png)
追加したいページを選択したらメニュー位置をピックアップバナー
に設定し保存すれば完了です。
細かい設定はテーマのカスタマイザーで行います。
![ピックアップのメニュー位置](https://blog-boy.org/wp-content/uploads/2021/08/ピックアップのメニュー位置.png)
トップページ設定
トップページ設定でさらにmanablogに近づけます。
![外観→カスタマイ](https://blog-boy.org/wp-content/uploads/2021/08/外観→カスタマイズ.png)
WordPress管理画面の外観→カスタマイズ
にすすみます。
![トップページ設定](https://blog-boy.org/wp-content/uploads/2021/08/トップページ設定.png)
トップページ
を選択して設定していきます。
![トップページをカスタマイズ中](https://blog-boy.org/wp-content/uploads/2021/08/トップページをカスタマイズ中.png)
メインビジュアル
に進みます。
![メインビジュアルは表示しない](https://blog-boy.org/wp-content/uploads/2021/08/メインビジュアルは表示しない.png)
メインビジュアルの表示内容は表示しない
にチェックを入れましょ。
![記事スライダー](https://blog-boy.org/wp-content/uploads/2021/08/記事スライダーは設置しない.png)
記事スライダーは設置しない
です。
![ピックアップバナーのカスタマイズ](https://blog-boy.org/wp-content/uploads/2021/08/ピックアップバナーのカスタマイズ.png)
ピックアップバナーのバナーレイアウトは固定で3列にしましょ。
バナータイトルのデザインはお好みで選んでください。
![ピックアップバナーその他トップページ下層ページにも表示する](https://blog-boy.org/wp-content/uploads/2021/08/ピックアップバナーその他トップページ下層ページにも表示する-1.png)
トップページ以外の下層ページにピックアップバナーを表示させるのはやめておきましょ
ここまで設定するとmanablog感が増します。
![manablog感があるトップページ](https://blog-boy.org/wp-content/uploads/2021/08/manablog感があるトップページ-1024x539.png)
ここから更にmanablogに寄せていきます。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-18.png)
ここまでくれば折返しよ。休憩しましょ。
記事一覧リストの設定
manablogといえば1カラムの抜粋表示です。
抜粋表示できるWordPressテーマは希少なのでSWELLには感謝しかありません。
![記事一覧リストの設定](https://blog-boy.org/wp-content/uploads/2021/08/記事一覧リスト.png)
SWELLカスタマイザーの記事一覧リスト
に進みます。
![リストレイアウトをブログ型にします。](https://blog-boy.org/wp-content/uploads/2021/08/記事一覧リストレイアウト.png)
リストレイアウトをブログ型にします。
これで抜粋表示が可能になります。
最大カラム数は1に設定しましょ。
![](https://blog-boy.org/wp-content/uploads/2021/08/記事一覧リスト投稿表示.png)
「READ MORE」はそのままでOK。
かなりmanablog感がでます。
公開日、更新日、抜粋文の文字数はお好みで。
デフォルトではMobileが非表示になっていますが設定しておきましょ。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-17.png)
僕は公開日は表示せず更新日だけを表示しています。
![サムネイル画像の比率設定](https://blog-boy.org/wp-content/uploads/2021/08/サムネイル画像の比率設定.png)
サムネイル画像は黄金比率
に設定します。
![カテゴリーの表示設定](https://blog-boy.org/wp-content/uploads/2021/08/記事一覧リストカテゴリーの表示位置.png)
manablogは記事の上にカテゴリーなどの情報が表示されますが、SWELLは選択不可。
カテゴリーの表示はmanablogを再現できません。。。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-13.png)
100%再現するのは無理でした。。。
ウィジェットを設定する
さぁ、最後の仕上げです…!
ウィジェットエリアを埋めていきましょ。
![外観→ウィジェットに進みます。](https://blog-boy.org/wp-content/uploads/2021/08/ウィジェット.png)
外観→ウィジェット
に進みます。
使用する部分は4箇所です。
![ウィジェトエリア選択](https://blog-boy.org/wp-content/uploads/2021/08/ウィジェットエイリア選択.png)
共通サイドバーとフッター(PC)の1~3を埋めていきます。
フッターに関してはお好みでOKですが。
manablog好きならフッター(PC)3
にTwitterのタイムラインを埋め込むべし。
詳しく解説します。
共通サイドバー
![ウィジェットエイリア共通サイドバー](https://blog-boy.org/wp-content/uploads/2021/08/ウィジェットエイリア共通サイドバー.png)
ウィジェットエリア共通サイドバーには「SWELLプロフィール」「検索」「SWELL人気記事」「アーカイブ」を入れましょ。
プロフィールをどこまでマナブさんに寄せるかはあなた次第です。笑
フッターPC
![ウィジェットエイリアフッター](https://blog-boy.org/wp-content/uploads/2021/08/ウィジェットエイリアフッター.png)
フッター(PC)1~3は必ず埋めましょ。
なぜかというと、manablogがそうだから。
本サイト(ブログボーイ)はフッター(PC)1に固定ページを フッター(PC)2にユーザーに読んで欲しい記事を入れています。
![](https://blog-boy.org/wp-content/uploads/2021/06/アイコン-7.png)
フッター(PC)3はTwitterのタイムラインを埋め込みましょ。
こちらのサイトにTwitterプロフィールのURLを入力してHTMLをコピペすれば完了です。
![Twitter埋め込み](https://blog-boy.org/wp-content/uploads/2021/08/TWITTER埋め込み.png)
検索窓にTwitterのURLを入力します。
![Twitter埋め込み表示](https://blog-boy.org/wp-content/uploads/2021/08/Twitter埋め込み表示.png)
上記画像の左側を選択します。
![Twitter埋め込みコードをコピー](https://blog-boy.org/wp-content/uploads/2021/08/Twitter埋め込みコードをコピー.png)
Twitter埋め込みコードをコピーして。
![Twitter埋め込みコードをペースト](https://blog-boy.org/wp-content/uploads/2021/08/Twitter埋め込みコードをペースト.png)
Twitter埋め込みコードをペーストすれば設置完了。
TwitterのHTMLをコピペするときはテキスト
で作業しましょ。
Twitterのタイムラインを設置する注意点
Twitterのタイムラインをフッターに設置するとサイトの表示速度は遅くなります。
どこまでmanablogに寄せたいかによりますが。
表示速度を優先したい場合はTwitterを埋め込むのはおすすめできません。
以上でmanablogデザインの完成です。
お疲れさまでした…!
SWELLなら憧れのmanablogを目指せる
![SWELLなら憧れのmanablogを目指せる](https://blog-boy.org/wp-content/uploads/2021/05/7-5.jpg)
SWELLなら憧れのmanablogを目指せます。
カスタマイズは確かに大変かもですが、がんばりましょ…!
トップページは一度設定すれば放置でOK。
自分のお気に入りのデザインに記事を書くのは最高ですよ。
ぜひ、SWELLでmanablogデザインを実現してくださいね。
今回は以上です。
想像の3倍つかいやすいSWELL。ブログ初心者におすすめNo.1のWordPressテーマです。史上最高の操作性で洗練されたデザインを実現。SWELLを手にしたあなたはWEBデザイナーといっても過言ではありません。幸せになれます。>>SWELL公式サイトはこちら