ManablogCopyイメージ画像

ツール・テーマ

Manablog Copyを導入・設置してすぐにブログアフィリエイトをスタートするやり方

秋田です。

マナブ氏のマナブログのWPテーマ・Manablog Copyが購入できるようになっています。
マナブログファンにはたまりませんね。

ただし・・・素晴らしいWPテーマである反面、他の「至れり尽くせり的」なテーマ・テンプレートと比較すると・・・ブログアフィリエイト初心者にはスタートする際のカスタマイズが(正直)少し難しい面もあります。

まあ、もともとはプログラミングの知識やhtml・cssの知識がある程度は備わっている人が対象となっているようなテーマですから。

今回の記事はアフィリエイト初心者が

・Manablog Copyを導入してすぐにスタートするための【簡単3ステップ】
・(余裕があればの)お薦めカスタマイズ
・アイキャッチ画像のサイズは?

について説明します。

いずれにしても「シンプルイズベスト」的なWPテーマなので初心者・入門者レベルからスタートしても少しずつhmtlやcssなどを勉強しながら成長していくことで大きな果実を手にすることができるようになるかと思います。
 

【姉妹サイト】CM

550円で出来るオリジナル体質改善ツール


 

毎月1万円入ってきたら・・・

毎月堅実に「ほったらかし」で1万円稼いでみる

※PC好きな人なら毎年1台新機種が買える!


 

スポンサードリンク



 

Manablog Copyを導入してすぐにスタートするための【簡単3ステップ】

ManablogCopy簡単インストールイメージ画像
テーマ自体の購入はクレジットカードのみです。
銀行振込にて購入したい、という方は別の方法(プリペイド・チャージ式のクレジットカード利用)を検討されることをお薦めします。

WP管理画面の「外観」からテーマのインストールと有効化が終わっているものとして進めます。

 

ブログ概要の設定【簡単1ステップ】

ManablogCopyインストールイメージ画像
WPのダッシュボードから・・・
「mblog管理」でブログのタイトルやキャッチコピーなどを入力(設定)します。
後から変更することも可能ですから、初心者の方はそこまで大げさにとらえて悩んだり迷ったりするまでの必要はありません。

設定を済ませてブログを(記事投稿を)スタートさせる、ということが大事です。

ここで
■ タイトル等の設定
■ プロフィール画像・コメント(自己紹介)の設定
■ FacebookやTwitter等のIDの設定
などを済ませます。

不明なものやID等の取得が今からだ、という時には空欄で構いません。
 

フッター・Copyright欄のリンクの変更【簡単2ステップ】

(普通は)サイトやブログの最下部に Copyright(c)という記述があるものです。
ManblogCopyのデフォルトではマナブ氏のサイトにリンクが貼られています。

それを自分のサイト・ブログのアドレスと表記に変えておきます。
「外観」⇒「テーマエディター」からfooter.phpを開きます。

ManablogCopyインストール時のカスタマイズイメージ画像

秋田秀一
【注意・初心者の方へ】
phpファイルを直接カスタマイズ(加筆・修正)することになりますから本当ならバックアップを用意しておくことをお薦めします。(画面が真っ白になったらどうやって戻せるのか、と焦ります)
慣れた方は直接的に加筆修正しても大丈夫だとは思いますが。 

矢印イメージ画像

このfooter.phpのCopyright部分を書き換えます。

ManablogCopyカスタマイズイメージ画像

自分のサイト・ブログのアドレスとサイト・ブログ名に変更します。
 

フッターメニューやサイドバーの非表示の命令文を外す【簡単3ステップ】

ManablogCopyカスタマイズのイメージ画像
Manablog Copyのphpファイルに中には「非表示になっている」部分があります。
その・・・表示しないよ、という命令文を削除します。
もちろんそのままでも構いませんが・・・

ManablogCopyカスタマイズイメージ画像

で「はさまれた」部分は・・・実は・・・「コメント」になるのです。
単なる記述・コメントということになります。(そのための印です)
■ 「はさまれた」部分の命令文が無視される形です。
■ ですから<!-- と -->を削除すれば間の命令文が表示されることになります!

矢印イメージ画像

ManablogCopyカスタマイズイメージ画像

これで表示されるようになります。
もちろん青線で囲った部分は自分用のブログに合わせてアドレスや表示の言葉を変えてください。

秋田秀一
あと一つ・・・
サイドバーのところも<!-- と -->を削除しておきます。

矢印イメージ画像

Manablogカスタマイズイメージ画像

これで【簡単3ステップ】のセッティングは完了です。
あとは・・・記事作成スタートです。

【ここまでのまとめ】
・セッティングに時間をかけるのは・・・避けた方がいいです!(キリがありませんから)
・必要最低限の3つをカスタマイズしたら記事作成スタートがお薦め!
・残りは勉強しながら少しずつスキルアップすることで大丈夫です。

 

(余裕があればの)お薦めカスタマイズ

ManablogCopyカスタマイズイメージ画像
他にも、特にデザイン的な面も含めてカスタマイズを考えだすと・・・キリがありません。
少しずつ記事投稿をしながら(勉強しながら)カスタマイズすれば大丈夫です。

先ほどのまとめにも記述しましたが・・・まずは記事をドンドン作成・投稿していくことが大切です。

さて、もし余裕があればのお薦めカスタマイズについて取り上げてみます。

■ ラインマーカー(黄色とピンク)の設定
■ (グローバル)メニューの作成
■ ページトップに戻るボタンの設定
■ 見映えのいいリンクカードの設定

 

ラインマーカー(黄色とピンク)の設定

黄色ピンクのマーカーを用意します。
当ブログは(そもそもManablogCopyを使用していませんので)微妙に色合いが違うかと思います。(ご了承ください)

下のコードをコピペします。

.line-yellow{
background: linear-gradient(transparent 50%, #fff499 50%);
}
.line-pink{
background: linear-gradient(transparent 50%, #f7c2e1 50%);
}

これは賢威8の設定での色合いを私が気に入って愛用していることから他のサイト・ブログにも同じセッティングをさせていただいているものです。

矢印イメージ画像

これを「外観」⇒「テーマエディター」からスタイルシート (style.css)を選択して最終行の後にコピペするだけでOK!です。

ManablogCopyカスタマイズイメージ画像

これだけでも記事内に黄色とピンクラインマーカーを引くことは可能です。
実際の記事入力の時に・・・

<span class="line-yellow">黄色</span>と<span class="line-pink">ピンク</span>と記入すればラインマーカーが引けます。

矢印イメージ画像

ですが・・・もっと簡単にするために・・・AddQuicktagに登録しておくと便利です。

黄色・ピンクラインマーカーカスタマイズイメージ画像

上記のように登録しておくとワンタッチで呼び出せます。
※登録した時は確実に「変更を保存」をクリックしておいてください。
 

(グローバル)メニューの作成

もし、ManablogCopyをインストールした時点ですでに固定ページが何ページか用意されていたら・・・(デフォルトでの設定は)その固定ページがグローバルメニューに表示されます。

ということは・・・そのまま必要な分だけ固定ページを用意すればいいのですが・・・
ただし・・・ズラっと「縦(しかも左端)」に列挙される感じになりますからほんと不自然な形です。

ManablogCopyグローバルメニューカスタマイズイメージ画像

また、別なページを(投稿ページなども活用して)メニューを用意したくなる場合もあります。
自由に設定したいものです。

その時のやり方をご案内します。
「外観」⇒「メニュー」から自由にカスタマイズできます。

「GlobalMenu」を選択して左側のコンテンツから右側に持ってくるだけです。(ドロップダウンするだけ)

ManablogCopyグローバルメニューカスタマイズイメージ画像

「善は急げ」、というより「案ずるより産むが易し」という気持ちでやってみることがいちばんです。
試行錯誤でマスターすれば・・・他の人にも教えることができますし、後から続く人たちへのアドバイスにもなります。

ひょっとしたら・・・それがノウハウとしてお金になる可能性もあるのですから。
ぜひ、この点は頭のどこかに残しておいてください。(将来役に立つ時がくるかも知れませんから)
 

ページトップに戻るボタンの設定

ズバリ・・・次のサイト(ManablogCopyまとめ)を参照されてください。
実は・・・私も使わせてもらっています。

 


 

秋田秀一
ただし・・・
footer.phpにコピペするコードはそのままだと表示されないかと思います。
fas fa・・・となっています。⇒ fa fa・・・だと思うのですが。

それで・・・私がやったヤツ(図柄を矢印にしました)をご参考までに紹介すると・・・下記のとおりです。

<p id="page-top"><a href="#"><i class="fa fa-arrow-up"></i><br>TOP</a></p>

これをfooter.phpに挿入してください。
あと、案内されているとおりに「追加CSS」までカスタマイズできれは・・・下図のような感じになります。

矢印イメージ画像

ManablogCopyカスタマイズイメージ画像

イメージはこんな感じです。
色は自分で好きな色に変えてください。(追加CSSをカスタマイズします)

ちなみに私は・・・薄いブルー・・・#b5def8
濃いブルー・・・#7ec0eeにしました。(画像とは少し違って見えるかも知れません)

 

ここでご案内したリンクカードを用意するやり方は・・・次のとおりです。
 

リンクカードを見映えよくするカスタマイズ

秋田秀一
【リンクカードの見映えを良くする方法】
ブログカード形式でリンク先を表示するやり方として私が採用しているのはこちらです。
※賢威8の場合でのやり方ですが・・・他のWPテーマ・テンプレートでも大丈夫です。

⇒ リンクカードの見映えを良くするやり方(賢威8)

こちらのサイトからコピペさせてもらってください。
⇒ http://bamka.info/new-share-html

同サイトからのコピペ文は

/*-----New Share HTML----*/

.link-box {
border:1px solid #e1e1e1;
padding:10px;
display:flex;
margin:30px;
}

.link-box:hover {
background-color:#f3f3f3;
-webkit-transition:background-color .35s;
transition:background-color .35s;
}

.img-box {
width:25%;
float:left;
}

.img-box div {
min-height:170px;
background-size:cover;
background-position:center center;
}

.text-box {
width:75%;
float:left;
padding-left:20px;
line-height:1.7;
margin:0;
}

.text-box .title {
font-size:18px;
font-weight:600;
color:#428bca;
padding:0;
margin:0;
}

.text-box .description {
font-size:15px;
color:#333;
padding:0;
margin:0;
}

@media only screen and (max-width:479px) {

.img-box div {
min-height:80px;
}

.text-box {
margin-left:10px;
line-height:1.5;
}

.text-box .title {
font-size:13px;
margin:0;
}

.text-box .description {
font-size:11px;
margin-top:5px;
}
}

/*-----ここまで:New Share HTML----*/

【出典:あなたのスイッチを押すブログ】

矢印イメージ画像

これを「外観」⇒「カスタマイズ」⇒「追加CSS」にコピペするだけで完了、OKです。

矢印イメージ画像

あとは・・・こちらのサイトでアドレスを入力して出力されたhtmlコードをブログ記事にコピペするだけで見映えのいいリンクカードが表示されます。

⇒ ShareHtmlを、もっと綺麗にしたメーカー

あとは(これで)・・・記事入力にまい進できます!
 

アイキャッチ画像のサイズは?

ManablogCopyアイキャッチ画像のサイズイメージ画像
私は複数のWPテーマ・テンプレートを使い分けています。
賢威、ManablogCopy、AFFINGER5(WING)、SANGO・・・

それぞれにデザイン等が違います。(当然ですね)

秋田秀一
実は・・・ベストなアイキャッチ画像も大きさがそれぞれ違っています。(私の感覚です)
できるだけサイズを共通的に使えるように統一しているのですが・・・記事の中でWPテーマ側で勝手に拡大されることもあることから若干使い分けている、というのが実情です。

ただ黄金比を意識したサイズにしていることだけは間違いありません。

⇒ 黄金比

ズバリ、ManablogCopyのアイキャッチ画像のサイズは? と聞かれたら・・・
1200px 750px です。(比率1.6:1の黄金比を意識しています)

下画像のようなアイキャッチ画像は目を引くと思います。(人は・・・焼肉が好きな方が多いですから)

アイキャッチ画像のサイズイメージ画像

 

まとめ

ManablogCopyセッティングまとめイメージ画像

新しいWPテーマ・テンプレートを設定しようか、となると・・・インストールとセッティングに時間がかかるものです。
まして(余計な? 後からでも可能な?)カスタマイズにコリだすと・・・キリがありません。

せっかくブログアフィリエイトをやろう! バンバンと記事を投稿してやるゾ! と決心しているのに・・・スタートダッシュで時間をかけ過ぎると・・・やる気・エネルギー・情熱においては逆効果となることもありえます。

スタートダッシュのためには、ひいては成功するためには・・・

【まとめ】
・ManablogCopyはシンプルで使いやすいWPテーマですけど、初心者がセッティングするには戸惑うこともアリ!
・できるだけ簡単にセッティングを終了させてスタートすることが重要です。
・必要最小限の【簡単3ステップ】で完了したら記事作成・投稿に踏み出すことをお薦めします!

 

ここまで本当にありがとうございました。

 

スポンサードリンク



 

-ツール・テーマ
-

Copyright© 副業専門学校 , 2020 All Rights Reserved.