読者です 読者をやめる 読者になる 読者になる

I am Mackenzie

This is who am I

ブログのカスタマイズ

Blog

この類の記事は書こうと思っていなかったのですが、備忘録もかねてブログを開設してから今までにやって来たカスタマイズをまとめていきます。

はじめに

このブログは、ゆきひー( id:ftmaccho )さんのテーマ、"Naked" を使っています。カスタマイズが楽しめるのでとても気に入っています。

youtu.be

この動画は、この記事を書くためにアップしたようなものです、はい。アップしないで貼ろうと思ってたんですけどうまくいかなかったので、じゃあアカウント持ってるんだからと。ざっとブログをめぐってる感じになってます。BGMはSabrina Carpenterの "Can't Blame a Girl for Trying" のカラオケです。

カスタマイズ:ヘッダー

まずはヘッダーのカスタマイズ。ブログ名は、"Naked" の素材をそのまま使っています。

メニューは、PCでは横並びに、スマホタブレットではトグルメニューになるようにしています。同じくゆきひーさんのカスタマイズです。

私は背景を透明にして、フォントと文字の大きさを変えました。

カスタマイズ:記事

記事はブログ全体を占めるので、一番いろいろやりました。

記事見出し

記事の顔とも言えるタイトル。私はこのサイトを見て、二重線のものにしました。オシャレかなと思って。

www.north-geek.com

シェアボタン

最初ははてなブログデフォルトの物を使っていたのですが、デザインが好きじゃなかったので変えようと思い、AddThis というアメリカのサイトを使用。シェアボタンのほかにもフォローボタンなどありますが、今回はシェアボタンのみ。

AddThisは英語サイトですが、わかりやすいと思います。こちらのサイトで手順が載っています。

このサイトは、記事の中にシェアボタンが入るデザインを採用していますが、私はページ左(右にもできます)にボタンがあり、マウスを乗せると回転してSNSボタンが出てくるタイプにしました。動きがあると楽しいので😏

続きを読むボタン

ブログを開始した当時はこのボタンを使ってなかったのですが、記事が多くなってトップページが見づらいかなと思い使い始めました。これもデフォルトのデザインが好きじゃなかったので、いろいろ探して、shun( id:shun_prog0929 )さんのサイトを発見。いくつかおしゃれなデザインがありすごいなぁ・・・と思いました。

私は、マウスを乗せると色が変わって線が出てくるものを使いました。色も変えられて、あんまりカラフルにすると(もともとカラフルなので)落ち着きがなくなるかなと思いグレーにしました。まとめ役、みたいな感じで。

コメントを書くボタン

これは全然該当するものがなくて、結局自分で作りました。一つ見つけたので試してみたものの、他の所まで囲われてしまって・・・ それで、先ほどの続きを読むボタンのCSSを、コメントを書くボタンに応用できないかなと考え、やってみたら・・・できました。やった。

/*続きを読むボタン*/
.entry-see-more

っていうところを

/*コメントを書くボタン*/
.leave-comment-title

に書き換え(その後の.entry-see-moreを全て.leave-comment-titleに書き換え)たらOK。マウスを乗せると線が二重になるデザインになりました。コメントが増えるといいけど笑

見出しのデザイン

"Naked" の大見出しのデザインがこのブログには合わないなということで、大見出しを変更。中見出しはシンプルに線だけ。

大見出しはこのサイトのデザインを使用。色は変えました。

中身だしはゆきひーさんのサイトで。こちらも色と太さを変えています。

小見出しは今のところ使う予定がないので何もしていません。

サイドバー

サイドバーは、はてなブログにすでに用意されているので目立ったことはしてない気がします。"Naked" デフォルトのサイドバー見出しの色を変えたくらいかな。

サイドバーではプロフィール、検索枠、カテゴリ、フォローボタン(はてなブログツイッター)、ツイッタータイムライン、参加グループを表示しています。ツイッタータイムラインの埋め込みはここから、自分のアカウントを入力してできます。ブログが重いようだったら表示をやめるかもしれません。

フォローボタンは、マウスを乗せるとカラーが登場するデザインに。

私、動きがあるものが好きなのかな、うん。

カスタマイズ:フッター

フッターはトップスクロールボタンのみ。そんなに加えるものがある場所でもないので。

トップスクロールボタン

これはほんとに最近追加しました。PCでもスマホでもこのボタンがなくてもページの最初に戻れるんですけど、一応。

探すといろいろなボタンがありましたがデザインが一番気に入ったのがこれです。 

少し下に行くとボタンが現れて、マウスを乗せると色が変わるのがいいなと思いこれにしました。ボタンの位置と、色を変更。気に入っています。スマホでも色が変わるのがわかるので好きです。

そのほかのカスタマイズ

全体としてこだわったのは

  • フォント

の2つです。フォントはGoogle Fontsで探しました。Googleページからしか導入できないと思います(多分です)が、導入後はどのサービスからでもフォントが反映されています。英語ページですがやることはシンプルなので問題ないです。

また色は、一番こだわったポイントです。このサイトは紫を基本色としていて、そこから青などを使っています。同じ紫でも彩度がちがかったりします。色は全て下のサイトを見ています。色を変えたいところに下のサイトの色番号を入れるだけです。

あとは、背景の画像。PCなど横向きのスクリーンだとよくわかるのですが(スマホなど縦長だとくすんだところしか見えなくて…)、とても綺麗な虹の画像になっています。これにもこだわりがあり、虹は雨の後に出ますよね。雨は憂鬱だけどそんなことの後に美しいものが見れるんだというような感じ。日々過ごしているといろいろありますが最後には虹が見れるように。みたいな笑

f:id:Mackenzie_xoxo:20170126221538j:plain

まとめ

私が独自に開発したものは何一つありませんが、こうしてI am Mackenzieは出来上がりました。このブログの読者さんはカスタマイズとか興味ないかもしれないですが公開させてください。私は記事を書くのはもちろん、カスタマイズも大事にしてます。自分だけのサイトが作れるので。これから大幅に変えて行く予定はありませんが、ちょこちょこ変えていくかもしれないです。その時はまたここに付け加えます。

もしこれを読んでカスタマイズに興味を持ったらぜひコメントください。お助けできることがあるかもです。

長くなりましたがありがとうございました😊