今回は、実際にMOJO COLORを使ってブログをカスタマイズしてみましょう。
MOJO COLORを別タブで開きます。
→MOJO COLOR
レイアウトは、Type Aを使用します。（2カラム左メニュー）
"レイアウトを変更する" ボタンをクリックし、Type Aを選択。
まず全体の背景色を選択します。
色は、#252525にしました。
丸で囲まれたボタンをクリックするとMOJO COLORが非表示になります。
表示する場合は、再度ボタンをクリックください。
確認してみましょう。
ブログ全体を同じ色にしたいので、記事やサイドメニューの背景も#252525にしていきます。
他の部分に使用した色を使用したいときは丸で囲まれた入力エリアをコピーして適用したいエリアにペーストしてください。
それでは、他の部分も同様に配色、設定をしていきましょう。
各部分の設定は、以下のとおりです。
①背景
背景画像のURL:空白
背景色:#252525
②文字色
通常色:#7F8388
リンク色:#CACACA
訪問済みリンク色:#CACACA
ホバーリンク色:#FBFB00
③ヘッダー
ヘッダー画像のURL:空白
ヘッダーの高さ:250
画像の配置:左
背景色の有無:なし
④タイトルと説明
上からの距離:175
文字の配置:左
文字のサイズ:中
文字色:#FFFFFF
⑤サイドバー
タイトル背景色:#000000
タイトル文字色:#FBFB00
外側の背景色:#252525
内側の背景色:#252525
点線の色:#575757
⑥記事
背景色:#252525
回りのボーダー色:#252525
タイトルアイコン:#FBFB00
タイトル文字色:#FFFFFF
それらしくなってきました。
最後にヘッダー画像をはめてみましょう。
今回は、簡単なヘッダー画像を用意しました。
広告とブログの間にスペースがほしかったため、画像の上部40pxは、透過にしてあります。
アメブロのマイページのCSS編集画面で画像をアップロードし、この"画像のパス"をコピーします。
MOJO COLORに戻ってコピーした "画像のパス" を"ヘッダー画像のURL" 入力エリアにペーストし、"読み込み" ボタンをクリックします。
確認してみましょう。
ヘッダー画像が適用されました。
最後に"CSSをダウンロードする" ボタンをクリックし、表示されたCSSをアメブロマイページのCSS編集領域に貼り付けて保存すればカスタマイズは終了です。
スタイルシート知識なしで簡単にブログのデザインをカスタマイズすることができました。
所要時間は、画像の作成を合わせて10分程度です。
デザインカスタマイズ前のブログ
デザインカスタマイズ後のブログ
かなりカスタマイズされましたね。
参考になればと思い、当ブログに今回作成したデザインを適用してみました。
実際に自分でカスタマイズしてみた感想は、同じ色を複数の部分に配色する際に少し不憫を感じました。
今後改良していきたいと思います。
みなさまからのご意見・感想もお待ちしております。
→MOJO COLOR操作方法