WordPress 引用デザイン manablog風 CSS

WordPress

WordPressの引用デザインをmanablog風にする方法

2020年4月16日

初心者ブロガー
WordPressの引用デザインをマナブさんの manablog(マナブログ )の様な囲み枠が作りたいな。
こんな方への記事になります。

 

manablogのマナブさんの記事はミニマルなデザインで洗練されており、非常に読みやすいですね。

 

manablogの実際の記事の写真を添付させて頂きたいところですが、著作権の関係上は添付は控えさせて頂きます。

 

今回はWordPressの引用デザインをmanablog(マナブログ )風にする方法を解説していきます。

 

では早速、カスタマイズの方法について見ていきましょう。

WordPressの引用デザインをmanablog風にする方法

WordPress 引用デザイン manablog マナブログ  カスタマイズ

 

僕が使用しているテーマはAffinger5です。その場合だとカスタマイズしていないノーマルの状態では以下の様な画像のイメージになります。

 

WordPress 引用デザイン manablog マナブログ  カスタマイズ

カスタマイズ前のデザイン

少しクオテーションマークの位置や、文字の色合い、引用文の位置が非常に気になっていました。

 

そこで、実際のmanablogの引用デザインはこの様な感じです。(カスタマイズ後)

特に「SEO」の需要は、かなり大きいです。
Web系エンジニアを目指すなら、学んでおいて損しません。
学ぶには、自分でブログを書き、それでアクセスを集める練習をしたらOKです。

» 安定して稼ぐフリーランスの特徴【月収50万円で安定して稼いでいく】

やはりクオテーションマーク(")の位置であったり、引用の箇所の位置や配色、斜めの字体や配色、全てが絶妙です。

 

この様なデザインにするべく、カスタマイズしていきましょう。

引用デザインをmanablog風にする手順【スタイルシートのstyle.cssにコードを追加するだけでok】

WordPress 引用デザイン manablog マナブログ  カスタマイズ

方法は簡単で、以下のコードをコピペしてスタイルシートに貼り付けるだけです。

 

WING-AFFINGER5 Child の style.css50行目〜76行目までに以下の様にコードを貼り付けてください。(WING-AFFINGER5 Child)を使用していない方であっても、参考になるかと思います。

 

まずはWING-AFFINGER5 Child の style.css のイメージです。

WordPress 引用デザイン manablog マナブログ  カスタマイズ

50行〜76行目に以下のコードを貼り付ける

 

実際に貼り付けるコードは以下になります。

これを貼り付けるだけで完成です。

 

また、現在(2020年8月30日時点)ではテーマとして、Affinger5 JET を使用しています。

 

Affinger5 JETの場合にはstyle.css の330行目〜356行目に上記コードを以下の様に貼り付けます。

WordPress 引用デザイン manablog風 Affinger5 WING JET

Affinger5を使用していない方でも、上記を元にスタイルシートを変更すればmanablog風の引用デザインが出来るかと思います。

 

今回は以上となります。是非利用してみてください。

 

関連記事 【CSS】manablog(マナブログ )風の囲み枠の作り方【手順あり】


-WordPress
-, ,

Copyright© Tommy blog  , 2024 All Rights Reserved.