AFFINGER

マナブログ風カスタマイズをコピー&ペーストで再現【AFFINGER5】

 

manablogの装飾はシンプルでわかりやすくて好きだな。自分でもできるのかな?

 

このような疑問にこたえます。

 

本記事の内容

・【manablog風カスタマイズ】青いチェックマーク

・【manablog風カスタマイズ】目次に使用されている枠線

・manablog風カスタマイズをコピペで再現【AFFINGER5】:まとめ

 

本記事のカスタマイズは、当ブログ内でも頻繁に使用しています。

 

有料テーマに少し手を加えることで差別化をブログの独自性もあがります。コピペ可能なうえ、作業も簡単なので取り入れてみてくださいね。

 

この記事は3分で読めるのでmanablog風のカスタマイズをしたい方は参考にしてみてください。

 

※プラグインのクラシックエディターを使った方法になります。

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

【manablog風】青いチェックマーク

 

は、視認性もよくて自分でも使いたいと思いますよね。

 

このチェックマークは、テキストモードにコードを貼ることで出現してくれます。

 

貼り付けるコードはこちら

<span style="font-size: 20px;"><strong><i class="fa fa-check" style="color: #6c9fce;"></i> ここにテキスト</strong></span>

 

上記をコピーしておいてください。

 

チェックマークの使い方

青いチェックマークの使い方の解説です。

 

チェックマークの使用手順

  1. テキストモードに切り替える
  2. コピーしたコードを貼り付ける
  3. テキスト(ここにテキスト)を書き換える

 

上記の流れでOKです。

 

チェックマークのカスタマイズ

このコードでは、以下のカスタマイズが可能です。

 

  • フォントサイズ
  • アイコン
  • カラー

 

アイコンは、Font Awesomeで調達できますよ。
» Font Awesomeはこちら

 

カスタマイズできる箇所はこちら

  • font-size: 20px;(フォントサイズ)
  • fa fa-check(アイコン)
  • color: #6c9fce;(カラー)

 

変更するのは、黄色のマーカー部分です。

 

※アイコンの、マークしていない"fa"は残しておきましょう。

 

カスタマイズで、色々な使い方ができますよ!

 

カスタマイズ例

黄色マーカーの部分を変更することで、いろいろなアレンジができます。

 

こんなことや

・font-size 30px(フォントサイズ)

・fa-bolt(アイコン)

・#ffd900(カラー)

 

こんなことができます

・font-size 80%(フォントサイズ)

・fa-heart(アイコン)

・#e60033(カラー)

 

※フォントサイズは、%で表すこともできますよ。

 

以上が (チェックマーク)の解説でした。
» Font Awesomeはこちら

【manablog風】目次に使用されている枠線

 

・この枠の表示方法について解説します。

 

マナブさんのmanablogでは、本記事の内容などでよくみかけますね。

 

枠線を表示する作業手順

  1. 追加CSSにコードを追加する
  2. テキストモードからコードで囲む

 

それでは、やっていきましょう。

 

追加CSSにコードを追加する

まずは、CSSに枠の装飾情報を追加します。

 

【外観】→【カスタマイズ】→【追加CSS】の順に移動します。

 

つぎに、以下のコードを貼り付けます。

 

追加CSSに貼り付けるコード

.hasen{
background-color: #f8f9ff;
border: dashed 1px #4865b2;
padding-top: 40px;
padding-bottom: 36px;
padding-right: 10px;
padding-left: 10px;
}

 

上記のCSSコードを、追加CSSにそのままコピー&ペーストすればOKです。

 

なお、当ブログでは【border: dashed 1px #5f7f9c】に変更していますのでほんの少し色味が違います。

 

テキストモードからコードで囲む

つぎに枠で囲みたい箇所を、テキストモードからコードで囲みます。

 

使用するコード

<div class="hasen"></div>

 

テキストモードでの囲い方

<div class="hasen">
・テキストテキストテキスト
・テキストテキストテキスト
・テキストテキストテキスト
</div>

 

上記のとおりです。

 

枠線の囲み方は、以上となります。

manablog風カスタマイズをコピペで再現【AFFINGER5】:まとめ

 

manablog風のカスタマイズについての解説でした。

 

チェックマーク:まとめ

  • テキストモードに貼り付ける
  • アイコンなどカスタマイズ可能

 

チェックマークのコード

<span style="font-size: 20px;"><strong><i class="fa fa-check" style="color: #6c9fce;"></i> ここにテキスト</strong></span>

 

枠線:まとめ

  • 追加CSSにコピーしたコードを追加する
  • テキストモードで囲みたい箇所をコードで囲う

 

追加CSSに貼り付けるコード

.hasen{
background-color: #f8f9ff;
border: dashed 1px #4865b2;
padding-top: 40px;
padding-bottom: 36px;
padding-right: 10px;
padding-left: 10px;
}

 

テキストモードに貼り付けるコード

<div class="hasen">
ここにテキスト
</div>

 

コードが難しく感じかちですが、手順にそって進めば大丈夫ですよ。

 

すべてコピー&ペーストでできるので、試してみてくださいね!

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

 

今回は以上です。

 

最後まで読んでくれてありがとうございます。

-AFFINGER