Narazucocoonで簡単にフルワイドにできないかな
- デフォルトでフルワイドがないからやり方が分からない
- 初心者には難しい
- swellのようなフルワイドにしたい！！
cocoonは無料で魅力的なワードプレスのテーマですが、意外と細かい設定ができなく、それなりの知識が必要となるケースが多いです。
無料でcocoonでフルワイドにする方法
この記事を読んだら固定ページを以下のようにフルワイドにすることが出来るようになります。
cocoonフルワイドにするための固定ページでの設定
cocoonでフルワイドにするにはcssを書くことになりますが、その前に少し設定が必要です。
固定ページを新規作成した後、赤枠をクリックして設定を開きます。
「固定ページ」を選択し、「ページ設定」を開き「ページタイプ」を選択します。
「デフォルト」だとフルワイドにはならないのでい「1カラム(フルワイド)」を選択します。
これでフルワイドにするための固定ページの設定は終わりです。
cocoonでフルワイドにするためのブロックの設定
フルワイドにしたいブロックを選択し、以下の手順で「高度な設定」をクリックします。
「追加CSSクラス」に任意のクラスを入力します。
今回はフルワイドにするためのクラスとして「full-width」と入力します。
full-width
これでcocoonで固定ページをフルワイドにするためのブロックの設定は終わりです。
cocoonでフルワイドにするためのcss
次はWordpressのダッシュボードで編集を行います。
「外観」→「テーマファイルエディタ」をクリックします。
テーマエディタに以下のようにcssを追記します。
以下の「full-width」は先ほどブロックの追加CSSクラスで書いたクラス名と同じにする必要があります。
以下コピーして使ってください。
/* Full画面幅*/
.full-width {
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);
padding-top: 10px;
padding-bottom: 10px;
}これで以下のようにフルワイドになっていればOKです。
背景色をつける
ついでに背景色をつけてみましょう！
わかる人は飛ばしてOKです。
背景色を変更したいブロックを選択し、以下の手順で背景をつけます。
以下のようになっていればOKです。
ブログの記事を書くのに集中する方法
Narazu色々触るのめんどくさ！！
そんな方のために以下のテーマをオススメします。
SWELLはCSSを触らなくてもフルワイドにすることが可能です。
以下SWELLでフルワイドにする手順を紹介します。
SWELLでフルワイドにする手順
固定ページを新規作成した後、「＋」をクリックします。
検索窓に「フルワイド」と入力するとフルワイドにするためのアイテムが表示されます。
「フルワイド」をクリックします。
以下のように見出しが表示されます。
そのまま入力することができます。
以下のように確認してフルワイドになっていればOKです。
もちろんいつものブロックに画像を貼るようにフルワイドの状態でも画像を貼り付けることも可能です。
フルワイドにされない場合
おそらく、サイドバーが表示されている状態にあると思うので以下のように「固定ページ」→「サイドバー」→「非表示」と設定したらOKです。
SWELLは直感的に知識も不要なのでデザインを気にせず記事を書くことに集中することができます。
SWELLについて気になる方は以下を参考にしてみてください。
テーマを変えるだけでデザイン性が上がり稼げるようになる可能性も増えます。
もちろんテーマを変えるだけで収益を上げるのは難しいです。
以下収益を上げるための必要なツールを厳選したのでぜひ取り入れてみてください
まだブログで月1万円稼いでいない方はこちらからの記事を参考にしてみて下さい。
まとめ：cocoonでフルワイドにする手順
本記事では「cocoonでフルワイドにする手順」ついて解説しました。
- デフォルトでフルワイドがないからやり方が分からない
- 初心者には難しい
- swellのようなフルワイドにしたい！！
意外と簡単に実装できたのではないでしょうか？
ブロックごとに追加CSSクラスを記入する手間はありますが、Cocoonを使ってオシャレなサイトを構築できることは、大きな自信につながるでしょう。
しかし、ブログ運営の本質はオシャレさだけではありません。
簡単に、かつスタイリッシュなデザインを手に入れたいなら、手間をかけずに済むテーマ選びが重要です。そんなときにおすすめなテーマがSWELL(スウェル)です。
SWELLなら、最初からフルワイドデザインをサポートしており、初心者でも直感的に使いこなせます。
ブログを手軽に、そして美しくデザインしたい方は、ぜひSwellを検討してみてください。
この記事でcocoonでもオシャレに仕上げることができる方が増えると嬉しく思います。
最後まで読んでくださいありがとうございました。
まだブログで月1万円稼いでいない方はこちらからの記事を参考にしてみて下さい
ブログで効率的に収益を上げるために以下記事を参考にしてみて下さい。
AI美女で稼ぎたい方はこちらから
コメント