簡単!動くFC2ブログ公式テンプレート「wobbly」をカスタマイズ!


いつもFC2ブログをご利用いただきありがとうございます。
FC2ブログスタッフです。

Fc2ブログをご利用いいただいているみなさんは今どんなテンプレートをブログに使用していますか

ありがたいことに、FC2ブログで公式として提供させていただいている公式テンプレートも
たくさんの方にご利用いただいているようでとても嬉しいです
でも正直、「今使っているテンプレートのこの部分がこうなったらいいのにな」、
「一部の色を少しだけ変えたいな」なんて思ったりすること、ありますよね
そこで、今回の記事では、その公式テンプレートの中の1つ、
wobbly」を使って、簡単にできるテンプレートのカスタマイズ例を1つご紹介したいと思います

FC2公式テンプレート「wobbly」とは?




wobbly」はFC2ブログに新しく追加された公式テンプレートです。

実際にご自身のブログでお試しいただくとわかりやすいのですが、
ヘッダー部分(ブログの上部)に動きがあり、ゆらゆらと漂うような円が
見ていてとても楽しいテンプレートになっています個人的にはお気に入りのテンプレートの1つです。

FC2ブログ公式テンプレート「Wobbly」を追加する



実際にテンプレートを編集する前に、まずは「Wobbly」の公式テンプレートを追加しましょう!

1.ブログ管理画面にログインし、右側メニューの「テンプレートの設定」>「公式テンプレート追加」をクリック

2.検索キーワード「circles」で検索後、「詳細」をクリックし、次のページの「追加」ボタンでテンプレートを追加



「Wobbly」の公式テンプレートを編集する



テンプレートの設定から、「[ wobbly ] のHTML編集」を確認しましょう
画面内検索で let changeWidth = function(){と検索すると、
画面上に青く選択された状態で表示されます。(※GoogleChromeの場合)



以下のようなコードが出てきましたか?

let changeWidth = function(){
circles = [
{
center: {x:canvas.width / 6, y:350 - ( 1600 / canvas.width * 60 )},
color: '#e0e0ff',
radius: canvas.width * .4,
point: []
},
{
center: {x:canvas.width / 6 * 2.5, y: -150 + ( 1600 / canvas.width * 60 )},
color: '#e0ffe0',
radius: canvas.width * .3,
point: []
},
{
center: {x:canvas.width / 6 * 4, y: 400 - ( 1600 / canvas.width * 60 )},
color: '#ffe0e0',
radius: canvas.width * .4,
point: []
},
{
center: {x:canvas.width / 6 * 5.5, y: -100 + ( 1600 / canvas.width * 60 )},
color: '#ffe0ff',
radius: canvas.width * .3,
point: []
}
];


このコードの中に、 color: と書かれている箇所がありますね
合計4箇所ほど書かれているそれぞれの内容の後に#ffe0ff
#e0ffe0とあります。
これはカラーコードといい、テンプレート上部の動く丸の色を指定することができます。
4つ書かれていることから、4つの円形で構成されていることがわかりますね
それではさっそく色を変えてみましょう!

テンプレート等、HTMLやCSSファイルの編集にはブラウザーでの画面内検索を活用しましょう!



カラーコードは以下のようなサイトで調べることが可能です。
・WEB色見本 原色大辞典 - HTMLカラーコード(※)
https://www.colordic.org/

今回は上記のカラーコード表のうち、「和色」とされている4色を選んでみました
設定した色を左の円形から順にご紹介します。
色名:代赭(たいしゃ)
カラーコード:#bb5520

色名:真朱(まそお)
カラーコード:#ec6d71

色名:赤紫(あかむらさき)
カラーコード:#eb6ea5

色名:薔薇色(ばらいろ)
カラーコード:#e9546b

article171-3.png

もともとのデザインから一気に印象が変わりますね
FC2ブログのテンプレートは他にもたくさんのカスタマイズができますので
みなさんもぜひお試しください

※テンプレートのカスタマイズ方法に関する詳細や、カスタマイズによって生じた不具合等につきましては
恐れ入りますが弊社サポート対象外となっております。なにとぞご了承ください。


FC2サービスでは、お客様からのご要望やリクエストを募集しております。
もし宜しければ、FC2ブログに関するご意見・ご要望を
下記のページからご投稿いただけますと幸いです。

▼FC2リクエスト
https://request.fc2.com/

FC2ブログに関してご不明な点がある場合は、
下記の専用お問い合わせフォームより詳細を添えてお問い合わせをお願いいたします。

▼FC2ブログお問い合わせフォーム
https://form1ssl.fc2.com/form/?id=15028
関連記事

【公式】FC2ブログスタッフ

FC2ブログの使い方やおすすめブログのご紹介など、FC2ブログのスタッフによる公式ブログです🐤

月間500億越えのPV数を誇るFC2サービスを使いこなして、ブログで情報発信していこう♪

FC2ブログ 公式ちゃんねるの公式Twitterも、フォローよろしくお願いします!



皆様の応援を心よりお待ちしております👌

web拍手 by FC2

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

最新記事

スマートフォンでFC2ブログを利用してみよう!~【新管理画面】空白行を入力する方法~ 2024/04/18
FC2おすすめブログのご紹介♪『メキシコの南の小さな家から』 2024/04/11
画像サイズ上限を引き上げました! 2024/04/04
ブログへ投稿したコメントの編集方法 2024/03/21
FC2おすすめブログのご紹介♪『しろいねこ Vol.2』 2024/03/07

検索フォーム

公式ブロガー

FC2ブログの公式ブロガーとしてご活躍されているブロガー様のご紹介です♪