manablog風のカスタマイズをしたいけど有料のテーマは買えない
このような疑問を解決していきます。
この記事を書いた人
無料のワードプレステーマ「cocoon」でも、manablog風のカスタマイズをすることは可能なので、自分の理想のサイトになるようにカスタマイズしましょう。
リストを青色の囲み枠に変更
manablogの最大の魅力が、下記のようなリストの青枠ではないでしょうか？
このリストの青枠に関しても、cocoonで再現することが可能。
1 2 3 4 5 6 7 8 9 10 11 12 13 | .entry-contentul{ box-shadow:0px0px3pxsilver; border:dashed1px#4865b2; padding:0.5em1em0.5em2.3em; position:relative; background:#f8f9ff; } .entry-contentulli{ line-height:1.5; padding:0.5em0; list-style-type:none!important; } |
上記のコードを「style.css」のところに記載すれば大丈夫です。
実際に、これをビジュアルエディターの「番号なしリスト」を使うだけで自動的に以下のようになります。
- 文章1
- 文章2
- 文章3
また、この際に「.entry-content」の部分を外すと投稿のみではなく、他のところもリストも一緒に変更されてしまうので注意しましょう。
メニューのところも、リストを使っているのでテーマが崩れることもあります。
灰色の囲み枠を設置する
manablogで登場する下記のような灰色の枠も再現することが可能です。
まずは、以下のコードを「style.css」のところに記載します。
1 2 3 4 5 6 7 8 9 10 | .box5{ padding:1%2%; margin:2%2%; background:#fafafa; border:1pxsolid#f0f0f0; } .box5p{ margin:0; padding:0; } |
ただ、投稿の中で灰色の枠を設置するためには、記事作成の中でHTMLを使う必要があります。
投稿をする時には、以下のように投稿します。
1 2 3 | <divclass="box5"> 灰色の枠の中に入れたい言葉 </div> |
CSSだけでは、灰色の枠を設置することができないので覚えておきましょう。
また、毎回HTMLコードを挿入するのはめんどくさいという人は、「AddQuicktag」を使って簡単に使うことができるようにしておきましょう。
「AddQuicktag」の使い方を簡単に説明すると、「AddQuicktag」のプラグインをダウンロードして下記のように登録をするだけです。
名前に関しては、自分で決めることができるので自分の好きなようにつけます。
また、チェックボタンの部分は全てチェックを入れないと使うことができないので、必ず全てチェックを入れるようにしましょう。
チェックボタンの追加
manablogで登場する下記のようなチェックも再現することが可能です。
チェックボタンに関しては、「https://fontawesome.com/icons?d=gallery&q=check」で自分の好きなチェックマークを選ぶだけで使うことができます。
また、そのほかのアイコンも無料で使うことができるので、サイトをカスタマイズさせるにはおすすめのサイトです。
当サイトで使っている「」というアイコンに関しては、以下のソースコードをそのままコピーするだけ。
1 | <iclass="fa fa-check"aria-hidden="true"></i> |
これも下記のように、「AddQuicktag」に登録することで簡単に呼びだすことができます。
番外編
よりmanablog風のサイトにするためのポイントをここでは紹介します。
余白は十分にとる
当サイトでも意識していることですが、manablogでは余白を十分にとっています。
余白を十分にとることでスマホなどでも読みやすくなるので、ユーザーのことを考えると余白を多めにとってみるのもいいでしょう。
また、余白をとるために行を1行開ける際には、「 」を使います。
イラストを利用
manablogでは、アニメーションのような画像を使用しています。
しかし、manablogで使われている画像は有料のものです。
そこで、おすすめしたいのが「https://stories.freepik.com/」
「https://stories.freepik.com/」は、無料で使うことができるだけではなく色も自由に変更することが可能です。
そのため、有料サイトよりも自由度が高いのが特徴。
当サイトでも、「https://stories.freepik.com/」の画像だけを使用しています。
まとめ
cocoonでも、manablog風のサイトを作ることは可能です。
また、HTMLやCSSの勉強にもなるので興味のある人は自分でカスタマイズをしてみるのもいいでしょう。
コメント