¡el BLANCO!

Our trip and my favorite things

「はてなブログカスタマイズ」海外サイトやショップサイトを参考にしてみました

f:id:lavieenrose0427:20180202102303j:image

 

こんにちは。
Madori(@madori_10)です _φ(・_・

 

写真は、無彩色な我が家を彩るカレンダーの写真です。

 

カレンダーの写真部分をカメラで撮影し、加工しました。

 

2月は大好きなスミレの花なので気分が高まります。

 

『花時間』2018 Calendar パリの花・パリの街 ([カレンダー])

『花時間』2018 Calendar パリの花・パリの街 ([カレンダー])

 

 

南フランスのスミレ村を訪れた時のことを思い出します。

 

南フランス滞在記 ドライブ編② スミレの香りに包まれる村「トゥーレット・シュル・ルー」 - ¡El Blanco!

 

今回は、カスタマイズに関する記事です。

 

f:id:lavieenrose0427:20180205125312j:plain

 

プロフィール画像の変更

ブログ全体のイメージを変えたので、プロフィール画像も変更してみました。

 

自分のページにはスターを設けておりませんが、これから拝読させていただいた記事にスターをつけるときはこの画像になります。

 

f:id:lavieenrose0427:20180202120309j:image

引き算のカスタマイズ

今までのデザインはこんな感じでした。

 

レスポンシブデザインにしてるので、PCとスマホからの見え方はそんなに変わりません。

 

トップページ

f:id:lavieenrose0427:20180202102400j:image

 

これも気に入っていたのですが、カスタマイズをする度に「これも、あれも」と足していくうちに画像が多くなりすぎて落ち着かなくなりました。

 

そこで、思いきって「引き算」をすることにしました。

引いた箇所

記事のアイキャッチ画像とプロフィール画像以外のあらゆる画像を無くしました。 

 

・ヘッダー画像

 

・サイドバー「注目記事(Popular)」

 サムネイル画像の非表示

 

・サイドバーのプロフィール以外の画像を外す

 

・サイドバーの「Instagramのウィジェット」を外す

 ⇩逆に、加えたい場合はこちらから

 SnapWidget | Instagram Widget 

足した箇所

カテゴリーをひとつ追加しました。

 

Customize(カスタマイズ)

 

カスタマイズの記事は一度にまとめて投稿するのが大変そう(いや、絶対大変)なので、変更した時に少しずつ投稿していきたいと思いました。

 

そうなると、記事数が多くなるので新たにカテゴリーを設けることにしました。

変更箇所

あらゆる画像を外した今のデザインがこちら。

 

トップページ

f:id:lavieenrose0427:20180202102421j:image

 

ヘッダー画像を無くしただけでスッキリしました。

 

その代わりに細部をこだわってみました。

見出しのカラー ・デザインを変更 

これまではシャープな印象でしたが、柔らかい雰囲気にしてみました。

ブログ全体のフォントを変更

丸い感じの数字やアルファベットを用いることによって、優しい雰囲気になりました。

ブログ全体のフォントカラーを変更

記事タイトルや見出しはそのままで、本文のフォントを濃いめのグレーにしました。

ブログ全体のリンクカラーを変更

ちなみに、私はこちらのテーマを愛用しています。

「SOHO」カスタマイズページ一覧 - SOHO

 

このテーマ、本当にシンプルでスッキリしていて写真映えしますよね。

 

しかも、リンクカラー がシャンパンゴールドというのがなかなかニクい(Love)。

 

ショップサイトのような雰囲気もお気に入りです。

 

ですが、ひと目みて「SOHO」さんのテーマだというのが分かってしまうので、少し手を加えてみたくなりました。

 

全体的に淡いトーンにし、リンクカラーをお気に入りのシャンパンゴールドからグレーがかったピンクにしてみました。

 

但し、この色はリンクカラーにしては薄いので、マウスオーバー時にグレー系の色に変わるよう設定しました。

 

それだけで、だいぶイメージが変わりました。

 

遊び心もあり、個人的に満足な出来です。

 

現在は、記事一覧がカード型(PC 2カラム・スマホ 1カラム)のテーマ、rokuzeudon さんの「UNDER SHIRT」を利用しています。

 

ですが、シロマさんの「SOHO」も大好きなテーマ。

 

ベースは「UNDER SHIRT」ですが、「SOHO」で気に入っていた部分をカスタマイズによって取り入れています。

 

そんなに難しいカスタマイズではないので、季節や気分に応じて全体のイメージを変えるのも楽しそう。

 

今回は、インテリアの好みでもあるフランスのパリのようなイメージにしてみました。

 

なので、全体的にグレイッシュです。

 

スペインらしいイメージにしたくなったら全体的に暖色系にするかもしれません。

 

南フランスらしさを出すならラベンダーカラー やオリーブグリーン、ブルー系を考えてもいいですね。

 

ロクシタンのサイトが参考になりそう。

ヘッダータイトルのフォントを個別に設定

全体の丸い感じのフォントが、タイトルだと何故か違和感がありました。

なので、個別に設定してみました。

フォントの大きさも微調整しました。

記事一覧をPCとスマホで表示を変える

(はてなProのみ可能)

記事一覧を、カード型にしたいと考えました。

 

それで、参考にさせていただいたサイトがこちらです。

 

はてなブログのトップページ一覧表示機能を利用してカード型っぽいレイアウトにするカスタマイズ – つばさのーと

 

はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに - Minimal Green

 

はてなブログProでトップページを一覧表示にして更にカード型にするカスタマイズ - FOXISM

 

トップページをカード型レイアウト表示など実践した『 はてなブログ 』のカスタマイズまとめ☆その3 - アメリカ生活いろはのい〜テキサスからカリフォルニアへ移住〜

 

はてなブログ トップページをカードレイアウトにカスタマイズしよう!【PCのみ】 - のっちのブログ

 

大変参考になりました。

どうもありがとうございます。

 

だがしかし!

 

カード型、スマホでは読みづらいという情報もあちこちで見かけました。

 

ダンナさんも、

 

「今までの(一覧形式)のほうがいいかな〜。」

 

とのこと…。

 

なので、

 

・PC         カード型

・スマホ 一覧

 

に、することにしました。

Instagramのフォロワーさんにご協力

私は、ブログを書くのはPCで読むのはスマホが多いです。

 

PCでブログを書き終えた後に読者登録しているかたの更新通知が届いても、その場ですぐには読まず、時間がある時にゆっくりスマホで読みます。

 

そこで、他のみなさんはどうなんだろう?

 

と、気になりInstagramのストーリー上でアンケートをとらせていただきました。

 

回答結果はこちら。

 

f:id:lavieenrose0427:20180202102442j:image

 

スマホでの閲覧者が大半でした。

 

20%は、やはりブログを書いているかたでした。

 

フォロワーの皆さま、ご協力いただきありがとうございました。

 

この場をおかりしてお礼申しあげます。

カスタマイズの参考にしたサイト

ショップサイトがほとんどです。 

国内サイト  

どのお店も自宅から10分で行ける自由が丘にあるのが嬉しい。

 

旅にハマってからは物欲がかなり減りましたが、自由が丘はかなり危険なエリアです(笑)

Sarah Grace

大好きなインテリアショップです。

 

こちらはInstagramの写真ですが、色の全体像はこの写真も参考になりました。

 

 

インテリアの本も持っています。 

フレンチシックインテリア サラグレースのスタイルブック

フレンチシックインテリア サラグレースのスタイルブック

 

 

サラグレース - 青山、自由が丘、神戸のフレンチスタイルなインテリアショップ 洋食器、ヨーロッパ家具やフランス雑貨、キッチン雑貨、インテリア雑貨

MARGARET HOWELL

ずっと昔から大好きなお洋服屋さん。

サイトはシンプルなモノトーン。

TOP | MARGARET HOWELL

nest Robe

主婦になってからハマったお洋服屋さん。

天然素材が心地良いです。

サイトの雰囲気も好き。

nest Robe[ネストローブ]オフィシャルサイト | 

海外サイト

いずれも、フランスのパリ情報サイトです。

 

さすが!!

 

と、唸りたくなるデザインです。

 

laurenconrad.com

 

www.everydayparisian.com

お洒落なサイトの共通点 

かなり独断と偏見が入りますが、勝手に分析してみました。 

 

・ごちゃごちゃしていない

・画像を使いすぎていない

・シンプルだけれど、細部にこだわりを感じる

・シェアボタンやフォローボタンが全て同じ色

 

お洒落=機能的ではない

 

という部分もあったりはしますが、直感的に

 

「好き!」

 

だと思えるほうを優先すればいいのかな!?と思います。 

カスタマイズする時に便利な情報

備忘録代わりに載せてみました。

 

Webに詳しいかたは既にご存知の情報だと思いますのでスルーしてくださいませ。 

Google Chrome 拡張機能 

みなさん、ブラウザは何を使われていますか?

 

ブラウザには、これらの種類があります。

 

・Google Chrome(グーグルクローム)
・Firefox(ファイヤーフォックス)
・Microsoft Edge(マイクロソフト エッジ)
・Internet Explorer(インターネットエクスプローラー)
・Safari(サファリ)

 

私は、Microsoft Edge(マイクロソフト エッジ)だけ使ったことがないのですが、自宅でブログを書くときはSafari(サファリ)を使っていました。

 

それ以外のブラウザは、仕事で使っていました。

 

ですが、最近はメインブラウザをGoogle Chrome(グーグルクローム)にしています。

 

Google Chromeの拡張機能がとても便利だからです。

 

私がカスタマイズする時によく使う機能を2つ紹介させていただきます。 

Color Picker

「Color Picker」は、開いているWebサイト内から気に入った色を取得できるChrome拡張機能です。

 

新たに設定したリンクカラーとリンクのマウスオーバー時のカラーは誰とも被りたくなかったので、フランスのサイトやパリの写真から選び取得しました。

ColorPick Eyedropper - Chrome Web Store 

WhatFont

「WhatFont」は、Webサイトで見つけたお気に入りのフォントの情報を確認できる便利なChrome拡張機能です。

 

わざわざソースコードを見なくても、そのサイトが使っている「font-family」「font-size」「line-height」が確認できます。

WhatFont - Chrome Web Store

ページの表示速度を測定するサイト

カスタマイズをしすぎると、表示速度が遅くなるという話を聞きました。

 

そこで、カスタマイズをする度にこちらでチェックしています。

PageSpeed Insights

文字数を調べるサイト

私は収益化していないのでそこまで重要ではないのですが、5000文字以上がSEOに強いらしいです。

 

旅ブログ書いていると、簡単に5000文字超えますけどね(^_^;)

 

気が向いた時に確認しています。

【文字数カウント】  

Webカラー 大辞典

世界の伝統色 洋色大辞典 - Traditional Colors of World

 

私がよく調べるのが「洋色大辞典(285色)」です。

 

他にも、

 

・原色大辞典(140色)

・和色大辞典(465色)

・モノトーン(256色)

 

などがあります。

 

このページを見ているだけで簡単に時間が潰せます(笑) 

Googleフォント 

たくさんの種類のフォントがあります。

 

こちらも見ているとあっという間に時間が過ぎます。

 

Chrome拡張機能の「WhatFont」と併用して楽しんでいます。

Google Fonts 

Webアイコン

アイコンのコードが確認できます。

Icons | Font Awesome

さいごに

ダンナさんが、こんな本を買ってきてくれました(笑)

 

HTML5 & CSS3ステップアップブック

HTML5 & CSS3ステップアップブック

 

 

私にはまだ難しいですが、この本を参考にしながら少しずつHTMLやCSSの知識を深めていきたいと思います。

 

いつになるかは分かりませんが、そのうちカスタマイズの詳細コードを載せたりしたいです。

 

ブログのカスタマイズは、お部屋のインテリアを変えるような感覚が得られて楽しいです。

 

 

数あるブログの中から、当ブログ「¡ El Blanco !(エル ブランコ)」を訪れていただきありがとうございました。

 

また、読者登録をしていただきまして、ありがとうございます。

 

Madoriでした (´ー`)