【初心者でもできた!】ワードプレスで簡単可愛くブログをカスタマイズする方法

ブログカスタマイズ初心者 趣味

 

まーちゃん
まーちゃん

こんにちは!

まーちゃん(@marchanblog)です

 

いきなりですが、今日は何の日でしょう?

答えは・・・

 

ブログリニューアルのためだけに有給を取った日です!

 

たーちゃん
たーちゃん

知らんがな

 

Twitterでの告知も実はこの件なのです。

 

以前からブログを可愛くしたいという思いはあったのですが、初心者なので調べるだけでも時間がかかってしまい、なかなか出来ないでいました・・・

一気にやってしまいたかったので、今回わざわざ有給を取ったわけです。

 

そしてリニューアルしたのはこの5箇所!

・ヘッダー画像
・グローバルメニュー
・吹き出し
・フォーム追加
・Today’s まーちゃん’s point!追加
いろいろ時間をかけたのですが、文字に起こすとたったの5箇所・・・

ですが今回カスタマイズしてみて、初心者でもこんなに可愛い(自画自賛)ブログが作れるんだ!と、自信がつきました。

 

ブログ初心者の皆さん!
まーブロ!みたいに可愛いブログを作ろうぜ!

 

※タイトルにあるように、ワードプレスを使用しています。
※使用テーマは【Cocoon】です。ヘッダー画像と吹き出しの位置・表情はCocoonでのカスタマイズになります。

ヘッダー画像をカスタマイズ

Before

ブログヘッダーイラストカスタマイズ

After

ブログヘッダー画像カスタマイズ

 

ヘッダーにする画像を用意したら、あとは差し替えるだけ。

ダッシュボードのCocoon設定→ヘッダーから差し替えられます。

 

今回私は自分のイラストを使いましたが、過去の記事アイキャッチの作り方を応用すれば素敵なヘッダーが作れちゃいますよ!

 

ヘッダー画像はブログの顔!
自分だけの個性あるヘッダーで他のブログに差をつけましょう!

 

グローバルメニュー をカスタマイズ

Before

ブログメニューカスタマイズ

After

ブログメニューカスタマイズスクロール

 

スマホから見たメニューをスクロール式に

スマホからブログを見たときのメニューの幅がずっと気になっていたので、スクロール式に変更しました。

 

方法はリスブロさんで↓

CSSって何?レベルの私ですが、書かれている通りstyle.cssにコピペするだけで簡単に出来ました!

【Cocoon】モバイルメニューを横並びにしてスクロール可能にするCSSカスタマイズ(β版)
このサイトをスマホ表示すると、上部グローバルメニューが横にスクローラブルになっています。というわけでこれの実装方法を書いておきます。Cocoonのモバイルメニューを横並びスクロール可能に。下記CSSを子テーマstyle.css(「外観」→「

 

ただ、言われているようにスクロール可能であることがユーザーに伝わりにくいのが問題です。

 

また、下に表示されるメニューの色も変更しました。

方法はPurple Lifeさんで↓

『Cocoon』細かいカスタマイズ(まとめ&備忘録)CSSコピペでOK!
ワードプレス無料テーマ『Cocoon』の細かいところをカスタマイズした記録です。メニューにFont Awesomeアイコンを入れたり、目次を中央配置にして背景色の変更をしたり、カテゴリーのラベルを非表示にしたりなど、自己満足的に?細かく変更した箇所などの備忘録です。徐々に増えていく予定!

 

メニューにアイコンをつける

アイコンは以前からつけていたのですが、方法を知らない方のために載せておきますね。

 

アイコンの設定方法はブロギングライフさんで↓

WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加表示する方法
WordPress テーマ Cocoonは、標準でFont Awesome のアイコンフォントが組み込まれて(ロードされて)利用可能になっています。本記事では、Cocoonのメニュー項目にFont Awesomeのアイコンを加えて表示させる

 

だがしかし・・・

グルメ!お前だよ!

グルメカテゴリだけなぜかアイコンが表示されないのです・・・

調べてもわからなかったので一旦保留にします・・・

 

吹き出しをカスタマイズ

Before

ブログ吹き出し

After

ブログ吹き出し

 

アイコンの大きさ

アイコン、スマホから見ると小さかったんですよね〜

 

これをハイジブログさんの方法でカスタマイズしました↓

こちらもCSSでのカスタマイズですが、グローバルメニュー の時と同じstyle.cssにコピペするだけでOKです。

Cocoon:吹き出しをセリフの量に合わせ、キャラも大きくするカスタマイズ(改)
ワードプレステーマCocoonの吹き出しの幅をセリフ量に合わせるカスタマイズです。以前のものと違い長いセリフの際に出来た吹き出し外の余白をなくすことに成功しました。

 

表情を追加

まーちゃん
まーちゃん

Befor

まーちゃん
まーちゃん

After

 

たーちゃん
たーちゃん

このようにいろんな表情を作ってみました〜

まーちゃん
まーちゃん

イラストが描けない人はイラストACココナラ
でゲットするといいぞ〜

 

たーちゃん
たーちゃん

読みやすいように位置も左に寄せたぞ〜

まーちゃん
まーちゃん

アドバイスくれた方、ありがとう!

表情(画像)の追加はCocoon設定→吹き出しから変更できます。

 

フォームの追加

お問い合わせフォームを作成しました!

フォームの作成方法はTECH ACADEMYさんで↓

WordPressで問い合わせフォームを設置する方法【初心者向け】
WordPressで作成したサイトに「お問い合わせフォームを設置する方法」を初心者向けに解説した記事です。今回は【Contact Form 7】という有名なプラグインを使った方法を紹介します。フォームのカスタマイズも簡単に可能です。

 

さらに調子に乗ってカップルお悩み相談室も作っちゃいました!

まーちゃん
まーちゃん

答えるぞ〜

たーちゃん
たーちゃん

来るかな〜ワクワク

 

※お悩みはブログの記事にさせていただきます

 

Today’s まーちゃん’s point!

ブログの最後にお決まりのコーナーが欲しくて・・・

私の大好きなHIKAKIN大先生からパクり真似させていただきました!

たーちゃん
たーちゃん

いいのか・・?

 

それがコチラ!!!

 

どうでしょうか?

商品紹介の際に使っていく予定です!

 

おわりに

すごく疲れました。

1日でやらずにコツコツと数日にかけてやったほうがいいかもしれません。

でも可愛くなったので満足です。

これからも【まーブロ!】をよろしくお願いしますね〜!
まーちゃん
まーちゃん

他にも『こうしたらいいと思う!』ってのがあったら教えてね!

コメント

まーちゃん

まーブロ!の運営者。食べることとお絵描きが趣味。