閉じる

FC2ブログカスタマイズ備忘録 ~見た目編~


ブログについて Comments (0)
最終更新日:2021-09-20

FC2ブログカスタマイズ備忘録 ~見た目編~
カスタマイズ備忘録、今回は見た目編です。
主にやったことはこんな感じ。
  • ページの配色を再考
  • NEW表示の変更
  • いらないコンテンツの削除

ページの配色を再考
一応前から「メインカラー紫・サブカラー緑」くらいはふんわり考えていたんですが、何となく統一性がなかったのが悩みでした。
何か月か前から、ヘッダー画像をフリーの写真サイトで見つけた古書と薔薇のドライフラワーの写真にして、最近思いついて薔薇の色相を紫に変えたんです。(規約範囲内の加工)
私の推しキャラであるコマンダーや真スピッドファイアの雰囲気に合っていてとても気に入っているんですが、今回はこのヘッダー画像や、プロフィールに使っているイラストを軸に配色を考えました。

#5E5E91
ページで使うメインカラーの紫をヘッダー画像にある薔薇の紫から取ることにしました。
とりあえずインフォメの見出しとコピーボタンとフッターで使っています。
ブログタイトルに使ってる紫は、視認性よくするためにメインカラーよりちょっと明度を下げました。

#931325
NEW表示とリンクのマウスオーバーに使ってる赤はプロフ画の真スピのジャケットの色から。
メインカラーとトーンが似てるのでまとまりあるように感じる。

#006148
リンクに使ってる緑は、上の赤の補色からちょっとズレたところにあって他の色より少し彩度高め。
補色そのまま使っちゃうと、彩度と明度低すぎて、デフォの文字と区別付かなくなっちゃったので。

#D3C7B4
日付の部分のベージュはヘッダー画像の古書の色と馴染んでたのでデフォのまま。

#454545
文字色もデフォのまま。web上で使うのは真っ黒よりちょっと明るい黒ってのがセオリーらしいですね。
日付のところの文字色がlightHouseに引っかかっていたので、この色に変更しました。


このカラーの選択は、私の推しであるコマンダー・真スピッドファイアのイメージとしてはなかなかいい線行ってると思うんです!
重厚でちょっとくすんでてシブい感じ最高!!

ただ、「私」のイメージからは結構離れてるんじゃないかなと感じてたり、各記事(特にちょこめも記事)で使われてる見出しなどの色とも印象が正反対じゃないかなって思ってたり…
暗い色はどうしても重くて硬くて冷たいイメージが出てしまう。
それを緩和するのが、古書のところのベージュなのかな・・。

もっと突っ込むと、トップページに表示される各記事のアイキャッチ画像もトップページの雰囲気に合わせたほうがいいんじゃないかとか、サイドバーにあるバナーもPOPすぎるとか、まだまだ統一されてない感じある…ね…(ヽ''ω`)

まあ個人ブログなんだし突き詰めすぎても疲れるから、どこかで折り合いつけるかあ・・・ってかんじ。
特にちょこめも記事に関しては、あまり堅苦しくなりすぎないようにカラフルにしてるつもりもあるので。
バナーとアイキャッチ画像については、ちょっと考えようかなと思います。

トップページのヴィジュアルに統一感を持たせたいという理由から、SNSボタンも、お気に入りのギザギザのボタンから、変更しました。
ギザギザのボタンと同じくサルワカさんのところからデザインをお借りして、マウスオーバーで色が付くように変更。四角くかっちりしつつも遊びのある感じになったんじゃないかな…!!これもお気に入り!!

CSSで作る!押したくなるボタンデザイン100(Web用)

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。



NEW表示の変更
ちょっとでも目立たせるためにフリー素材サイトからお借りしたGIFにしていたのですが、思い立って前から使ってみたかったサルワカさんのとこのリボンに変更しました。

CSSで作る!綺麗なWeb用リボンデザイン22選

HTMLとCSSのコピペで使えるWeb用のリボンデザイン集です。横だけでなく、縦や斜めのもの、ボッ クスに折り込まれるような立体的なデザインのものまで揃えました。


画像などは使わず、全てHTMLとCSSで構成されているので、どう実装しようかな~~って悩んでたんですが、FC2ブログだけで使える「<!--topentry_new-- >~<!--/topentry_new-->」という変数を知り、これを使うことにしました。
リボンの部分のHTMLをこの変数で囲んで新着表示できるようにするわけです。

ただこのリボン、日付のボックスの上に重なってるので、このままだと日付がうまい具合に左にズレない!!!
そこでも「<!--topentry_new-- >~<!--/topentry_new-->」が活躍。
リボンが出てる間は、日付の後ろが長くなるようにpaddingを設定したボックスを表示させたらいい感じに表示できました。

残念なのは、NEWの表示期間を指定できないこと。
大体5日間で消えるみたいです。



いらないコンテンツの削除
これは前回のSEO対策にもつながるのですが、拍手ボタンにalt要素が付いてないことがlightHouseに引っかかっていたため、思い切って削除しました(´・ω・`)
拍手ボタンのalt要素は、こちら側ではどうもできないようなので、各ページの最後に表示させるだけにしました。。
トップページで何個拍手付いてるか確認できるの便利だったんですけどねえ…しゃーなし(´-`)

プロフィールのところのコピーボタンもscriptが変だったので削除しようかと思ったのですが、記事ごとに付いてるコピーボタンで使ってる「clipboard.js」というjQueryライブラリを使えばいいことに気づいたのでこちらは消さず。。

あとは伝言板とカレンダーも表示するのやめました。


こうまとめてみると大分固まってきた見た目の部分もまだまだ課題があるねえ
とりあえずはいい感じのバナーとアイキャッチ画像どうするか考えたいと思います(ヽ''ω`)
ブログいじり楽しい!!!!


次の記事はアラド関連になるといいんですけどね・・・!!!
記事のURLをコピーする

こんな記事書いて欲しいなどの要望はこちら

リクエストBOXの使い方

リクエストを送る

応援待ってます

ちょこにOFUSEする
この記事を書いた人:ちょこ
ちょこアラド戦記 C鯖在住 
男スピッドファイアが好き。
ゲームはへたくそ。
趣味はお絵描きと音楽聞くこととマンガ読む事。
About me
他の記事も読んでみる
更新順
カテゴリ:[ ブログについて ]

Comment

全てのコメントは管理人が事前にその内容を確認し、承認した上での掲載となります。






管理者にだけ表示を許可する