マナブログコピー。 マナブログコピー(WordPressテーマ)のカスタマイズ記事まとめ

【ブログ運営】マナブログに学ぶ記事構成(テンプレート付)→初成約出ました!

マナブログコピー

この記事の目次• 【マナブログ】ワードプレス「Minimal」の基本カスタマイズ マナブログ風に使うための最低限のカスタマイズは以下です。 ナビゲーションのカスタム方法 グローバルナビゲーションの設定については、 『Manablog Copy まとめ』の記事で詳しく解説しています。 サイドバーに人気記事を出す方法 サイドバーに人気記事を出したり、他カスタムを学ぶことができます。 人気記事をサイドバーに出す• 高速化したい• トップに戻るボタンをつけたい 参考 画像が横幅いっぱいになるのを修正する方法 デフォルトでは 画像が横幅いっぱいになるので修正します。 修正方法は 『Manablog Copy まとめ』で詳しく解説しています。 ブログ名を画像にする方法(追記:2019年12月8日) ブログ名を画像にする方法は、 『Manablog Copy まとめ』の方で詳しく解説していますので手順はこちらをご覧ください。 スマホについても下記のように、 別の画像を使うことも可能です。 リンクカード設置方法 先日アップデートのあった『』のエントリーより、制作者のマナブさんのリンクカードそのものを実装する方法が掲載されてましたので、抜粋して紹介します。 マナブさん自作の『 ShareHtmlを、もっと綺麗にしたメーカー』を使えば簡単です。 公式 URLを入力してエンターキーを押すだけで マナブログそっくりのリンクカードが作れます。 実装方法は、以下です。 WordPressの 管理画面> 外観> テーマエディター> functions. phpにアクセスします。 functions. phpの一番下に下記のコードを丸ごと追記します。 また、そのままコードを張ると 広告が横に飛び出るので、4行目に記述している以下の記述で 飛び出さないように整えています。 お問い合わせページの設置 お問い合わせページの設定方法は、 『Manablog Copy まとめ』で詳しい解説をしています。 設置したお問合せページはです。 ADquickプラグインの実装方法 Minimal購入時に推奨されているADquickプラグインについて、私の設定をご紹介しています。 single div. single div. single div. クラッシブロックという機能もありますので、従来のクラシックエディターも使えますし、そこから ADquickも呼び出しも可能です。 トップページのリード文章の挿入方法 トップのリード挿入については、SANGO Gutenbergなら 抜粋に入力するだけで反映されます。 SANGOグーテンベルグならタイムラインが使えます タイムライン機能の詳しい解説は、こちらの記事をご覧ください。 ツイッター投稿用のOGP設定方法 ツイッターで 投稿するときにサムネイル画像を出す方法です。 下記の記事を参考に設定しました。 参考 Gutenbergを使っていると画像が横幅いっぱいになってしまう問題を解決 Gutenbergを使って画像挿入すると「wp-block-image」というクラスタグが入ってしまい元々設定されていいたimgへのCSSが効かなくなります。 下記の CSSを追記して、横幅いっぱいにならないように調整しました。 方法は、 管理画面> 外観> テーマエディター> meta. phpを選んで下記の部分を変更します。 グーテンベルグで自由にテキスト装飾できるプラグイン『add-richtext-toolbar-button』の追加 Minimalでのテキスト装飾は、adquickを中心にやっていましたが、グーテンベルグ使っていると、 都度クラッシクエディターに切り替えて文字装飾しないといけないので不便です。 特に、最近週主流の 蛍光ペンなどは、グーテンベルグ上でサクッと表示するために、プラグイン 『add-richtext-toolbar-button』を入れ 作業効率がかなりアップできました。 公式 プラグインをインストールしたら、後はプラグイン設定をするだけで、こんな感じでグーテンベルグのエディター上から 装飾のメニューが出せます。 具体的に設定した内容は、以下です。 蛍光ペン各種 蛍光ペンは、基本的にプラグインにデフォルトで設定されていますので、カラーコードやペンの縦幅(私は50%で設定)を変更するだけです。 蛍光ペン(黄色)(カラーコード FFFFBC) 蛍光ペン(青色)(カラーコード CCE5FF) 蛍光ペン(赤色)(カラーコード FFDFEF) ボックス関係 ボックスはmanablogに習って、最小のバリエーションで運用しています。 プラグイン内に新規追加して、以下のスタイルを入力します。 グレー色の枠 display: block; position: relative; line-height: 1. 4; background: ffffff; border: 0px solid acf; padding: 1em 1em 1em 1. 0em; font-size: 1. 4em; [after] opacity: 0. 6; [after] border-right: 0px dashed; [after] border-right-color: 76b3f7; [before] font-weight: 900; [before] font-size: 0. 2em; [before] margin-right:. 2em; [before] margin-right:. 2em; [before] color: ED5B65; アンダーライン border: solid 1px 777777; border-radius: 2px; box-shadow: 2px 2px 2px DEDEDE; padding-top: 1px; padding-bottom: 1px; background-color: F9F9F9; color: 605857; font-size:. 8em; padding-left: 6px; padding-right: 6px; 実際に使ってみると、このプラグインはかなり便利です。 文字の色、文字の大きさ、背景色などツールパレッド内でコントロールできます。 xsrv. php on line 43 実際に出たエラーメッセージ こちらについては、ググっても事例が出なかったので 制作者のマナブさんに直接問い合わせをさせて頂きました。 (わずか1日でお返事を頂きました。 ありがとうございます) 修正箇所は、 管理画面> 外観> テーマエディター> 検索結果(search. php)を修正します。 search. phpのコードの中の 43行目あたりのコードを入れ替えるだけです。 】サラリーマン会社員デザイナーにおすすめな副業3選【老後必要資金は2,000万】 READ MORE グラフィックデザイナーからwebデザイナーへの転職方法【基本独学でOK】 READ MORE ちなみに、 と のタグ間に該当ソースがありますが、こちらのタグはワードプレスの TOPページにだけ表示したいHTMLを書きたいときのタグです。 HTMLが追加できたら、次に カスタマイザー> 追加CSSを選択して、 CSSを追加します。 追加する CSSは下記です。 container. container. container. container. wrap. thumbnail. container. 参考 画像最適化プラグイン EWWW Image Optimizerの実装 画像の最適化を自動で実施してくれるプラグイン『 EWWW Image Optimizer』を実装しました。 こちらのプラグインは、新規で追加する画像だけでなく、 以前アップした画像や使っている画像もボタン一発で最適化してくれる神プラグインです。 参考 コードブロック記載用プラグイン Highlighting Code Block実装 コードをキレイに記載するためのプラグイン『 Highlighting Code Block』を実装しました。 こんな感じでコードを記載できます。 border: solid 1px 777777; border-radius: 2px; box-shadow: 2px 2px 2px DEDEDE; padding-top: 1px; padding-bottom: 1px; background-color: F9F9F9; color: 605857; font-size:. 8em; padding-left: 6px; padding-right: 6px; 公式 プラグインの設定は、 管理画面> 設定> CODE BLOCKです。 設定画面では、フォントサイズや背景色など簡単な設定が可能です。 スマホ画面が横にズレるのを修正 記事によっては スマホのプレビュー画面が横にズレる(横にスクロールする余白ができてしまう)ことがあります。 基本的には、部分ごとにCSSを見直していけば修正できる問題かと思いますが、(めんどくさい人は)下記のCSSを追加するだけで、 手っ取り早く直すことができます。 php on line 38 検索結果画面と同様に私では手に負えないので、 制作者のマナブさんに直接問い合わせをしました。 具体的には、 管理画面> 外観> テーマエディター> tag. phpのファイルを修正します。 修正箇所は、 38行目あたりのディスクリプションの記述を変更します。 改善されました 参考 目次を追加する方法:プラグイン『Table of Contents Plus』の活用 このような目次が出来上がります。 記事の各項目へのジャンプをスムーズにするために、 見出し(H2、H3)を設定した際に 自動的に目次が表示されるようにカスタマイズします。 プラグインは、 『Table of Contents Plus』を活用します。 プラグインについては、こちらの記事を参考にさせて頂きました。 参考 プラグインをインストールした後、設定を以下のようにしました。 4箇所調整 上級者設定の項目では、 H2、H3で設定した見出しだけ表示されるようにします。 CSSの設定は以下です。 上部メニューより『カスタマイザー』を選択 『追加CSS』を選択します 追加するCSSコードは以下です。 5em; color: 3379B7; margin-left:0em; margin-right:-0. 5em; color: 3379B7; margin-left:0em; margin-right:-0. 管理画面> 外観> テーマエディター> Single post(single. php)を選択して、 30行目あたりにソースを追加。 数はお好みで増やしましょう 人気記事ここに記事タイトル 人気記事ここに記事タイトル こちらの記事でも詳しく解説しています。 ページ最下部シェアボタンの追加 本家マナブログのようにページ最下部の SNSのシェアボタンを追加。 参考Minimal購入者に無料配布された『』の元ソース参照 管理画面> 外観> テーマエディター> sns. phpを選択してソースを書き換えます。 書き換えは、下記のソースに 丸ごと書き換えます。 single ul li,. よく使う人は、 再利用ブロックに登録をオススメします。 こちらの記事でも詳しく解説しています。 グーテンベルグの表組み(テーブル)を使う方法 Minimalでグーテンベルグを使った際に、 表組み(テーブル)を使う方法を『マナブログコピーまとめ』で紹介しました。 Minimalでの使い方は基本的に同じですが、当ブログはSANGOグーテンベルグを使っていますので下記のCSSコードを追加しています。 wp-block-table. wp-block-table. Manablog Copy 中 Manablog Copyはマナブログそっくりなブログを作るために準備されたワードプレステーマです。 Minimalよりもカスタムのハードルが下がっています。 SANGO 中 SANGOはショートコード豊富なワードプレステーマです。 デザインが優れたワードプレステーマです。 ページTOPに戻るボタンの実装(追記:2019年12月19日) ページTOPに戻るボタンを実装しました。 記事が増えてくると、 どうしても過去記事に たどり着きにくい。 …大分自力付いてきたなぁ😇 — ごま吉 アフィリ歴15周年 Lv1gomakichi 管理画面> 外観> テーマエディター> nav-menu. phpを開きます。 最終行付近の の前に下記のコードを追加します。 副業ブログのノウハウ 01 02 03 04 05 06 07 08 09 10 11 12 13 14 人気記事 人気記事•

次の

胡散臭い?マナブログのマナブさんが圧倒的に成功している理由

マナブログコピー

【マナブログコピーのカスタマイズ】機能編 では早速みていきましょう。 (リンク先は削除しました) あると便利なボタンの1つ。 下の画像参照。 記事が長かったり、スマホで記事を読んでいると、一番上に戻りたくなる時がありますよね。 その時にこのボタンがあるとユーザーはストレスなくサイトを見ることができます。 二箇所にコードを貼るだけで完了です。 php に以下のHTMLコードをコピペ 画像で場所を確認してください。 See the Pen by マストモ medipra中の人。 ブログ、プログラミング、たまに、薬剤師 on. 保存して、確認してみましょう。 Googleアドセンスの実装 記事をいくつか書いたらマネタイズのためにグーグルアドセンスに申請してみましょう。 無事に合格できたら、アドセンスが表示されるようにコードを貼り付けるのをお忘れなく!! 【マナブログコピーのカスタマイズ】ブログ記事・文字装飾編 【神プラグイン】AddQuickTagをインストール まずは、ブログ記事を便利に書くためのプラグインを追加しましょう。 マーカー(アンダーライン)を引く方法 例えば こんな感じの マーカーですね。 これを引けるようになりましょう。 好みの色合いを設定しましょう。 色の見本はこちらが参考になります。

次の

manablog(マナブログ)風にカスタマイズする方法【アフィンガー5なら簡単です】

マナブログコピー

【マナブログminimal】ブログ上部にカテゴリーを設定する方法 それでは早速説明していきます!ブログ上部にカテゴリーが無いとSEO的に良くないので必ず設定しましょう。 ここでは仮に「料理」という系統でカテゴリーを作る前提で話を進めます。 自分でどういうカテゴリなのか理解できる文字が良いです。 SEOに関係します。 具体的、かつ端的に半角で文字を打ち込みましょう。 今回は料理なので「cooking」としました。 今後記事を書く際、記事に対してカテゴリを当てますが、その記事のURLにここで設定した文字列がつくので、しっかり正しい文字を選びましょう。 スペルミスなど決して無いよう注意して下さい。 1つの親カテゴリーから、いくつかの子カテゴリーがあり、更に孫カテゴリーへと枝分かれが可能です。 子以下のカテゴリーはどうしても必要なものじゃないので、親カテゴリーだけでもOKです。 正しい枝分かれをさせることで記事のSEOが最適化されます。 今回作ろうとしている料理というテゴリーは、なにかのカテゴリーの下に子として作るわけでは無いので、「なし」を選択します。 自分用に説明文を書いておけばOKです。 ここまで入力できたら赤矢印の指す「新規カテゴリーを追加」をクリックしましょう。 先ほど説明したように、カテゴリーは「親—子—孫」と枝分かれで作れるので、その例として先ほど作った「料理」というカテゴリーの下に「子カテゴリー」を作る手順を説明します。 カテゴリーの親子関係は、関連があっても、同じ文字列や同じ意味合いのものを含まないほうが良いので、「イタリア 料理」ではなく「イタリアン」と設定することにします。 ここは結構重要なポイントです。 先ほど作った「料理」というカテゴリーを親にして、このカテゴリーを子として作成したいので、ここで「料理」を選びます。 「新規カテゴリーを追加」ボタンを押し、カテゴリー作成完了です。 赤矢印の示す「表示」という部分をクリックすると、作ったカテゴリーのページを見ることができます。 このカテゴリーページに、料理というカテゴリーをあてた記事がまとめられていくことになります。 php」 の順にクリックし、下の画面を開いて下さい。 こちらは、マナブログの学さんによる テーマminimalの根幹とも言える、 CSSと呼ばれる部分の画像です。 英語まみれでドン引きした方も多いかと思いますが、 細かく説明するのでご心配なく。 マナブログの学さんは、 こういった部分を自分でイジることにより、ブロガー側も知識を深められるようにminimalを作っているようです。 今どこを見ているのかわからなくならないよう、この行数を基準に説明しますので、自分の画面と見比べながら説明を見て下さいね。 行12~19 この12行~19行にある文字列で、 カテゴリーメニューのうちの1つをあらわしています。 カテゴリーをクリックすることで、その下に子カテゴリーの選択肢が出るタイプの設定です。 なので、この「firstnav」を消して「料理」と打ち込みます。 この「ALL」という文字を消して「イタリアン」に変更しましょう そして、最後にこの「イタリアン」の文字をクリックした時に、どのURLに飛ばすかを設定します。 これは簡単で、「 ALL」という文字の手前に「#」があるのはわかりますね?この「#」を消してをコピペします。 これで、設定は完了なので、一番下の青色ボタン「ファイルを更新」をクリックしてください。 以上でマナブログの学さん作成のテーマminimalで、上部に基本的なカテゴリーページを作る方法は説明完了です! ちなみに・・・ 行20~26 この部分は、いま設定した【行12~19】とまったく同じものなので、必要に応じて内容を変えるか、もしくは消してしまっても構いません。 使い方は同じで、「#」の所をカテゴリーのURLに替え、「Nav menu 1」の所を表示させる名前に変えます。 行29も行28と同じなので、必要に応じて使って下さい。 【マナブログminimal】ブログ上部のカテゴリーに画像を挿入する方法 次は、いま設定したカテゴリーの頭に画像を表示させる方法です。 文字だけよりも、それに適した画像があるほうが見栄えが良いですね! 本家のマナブログでもカテゴリーナビには画像が挿入されているので、あなたのMinimalでも、成功者の真似をして画像を入れてみましょう! テーマヘッダー(header. php)の変更 まずはCSSをイジる為、任意の画面を開いてもらいます。 php)の順です。 何もこのCSSをイジってなければ42行目が下記のようになっているはずです。 設定したい画像を探す 使用する画像はという無料サイトから探しましょう! このサイトは英語ばかりで少々困惑しますが、使い方は簡単です。 まずは、サイト内にチラホラ出ている画像から、好きなものを探します。 好きな画像が見つかったら、クリックして下さい。 下のような画面が出てくるので、赤矢印のボタンをクリックします。 phpの変更 先ほど開いたnav-menu. phpを再度開いて下さい。 php」 の順にクリックし、下の画面を開いて下さい。 この中から、先ほど設定したカテゴリーの部分を探して下さい。 1つ例に出すと、下記のような文字列があると思います。 カテゴリーの名前 この、カテゴリーの名前の直前に先ほどコピーした画像の文字列を加えると、画像が表示されます。 要はこういうことです。 カテゴリーの名前 この黄色線の部分が、先ほどの画像の文字列です。 これで画像つきのカテゴリーに変わったはずです! ブログ上部のカテゴリーの設定方法、説明終了 いかがでしたか?自分でこれを調べてやるとなると、なかなか難しいものがありますね。 ましてや全く知識が無いところからスタートして、この設定をしなければならないとなると、それはもう大変なことです。

次の