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

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

数字表記におすすめのGoogle Font はてなブログの日付にどうぞ

フォント ブログカスタマイズ はてなブログ

f:id:syofuso:20170323234951p:plain
このブログではブログタイトルと日付にGoogle FontのJosefin Sansを指定しています。全体にWeb Fontを指定すると見出しやタイトルなど一部分にフォント指定すると、デザインのアクセントになりおすすめです。今回は日付の表示、数字の表示に最適なGoogle Fontについて書いていきます。

はてなブログテーマMinimal Greenでは日付は

    .entry-header .date {font-family: Helvetica, Arial, sans-serif;}

と指定しています。 Arialではこんな感じ。
f:id:syofuso:20170318171503p:plain
Helvetica, Arialもとても見やすいフォントなのでこのままでも良いんですが、ちょっとデザインを印象的に見せたい時にはディテールに変化を付けると良いと思うので、日付のデザインを変えてみましょう。

  • Lato
    • フォント読み込み・指定
  • Roboto
    • フォント読み込み・指定
  • Josefin Sans
    • フォント読み込み・指定
  • Montserrat
    • フォント読み込み・指定

Lato

続きを読む

ガーリーデザインに使える無料イラスト素材配布サイトまとめ

ガーリーデザイン デザイン

f:id:syofuso:20170317035140p:plain
ガーリーデザインシリーズです。今回はガーリーデザインに使えるイラスト素材配布サイトをまとめてご紹介します。もう既に有名な素材サイトばかりですが、個人的に使いやすくよく利用しているサイトです。参考として、それぞれの配布サイトの素材を組み合わせてヘッダー画像を作りました。
特に注意書きしていない場合以外、基本商業利用可能で著作権表示の要らない無料素材配布サイトです。(Freepikは著作権表示が必要)

  • イラストAC
  • ガーリー素材
  • デザイン枠、飾り罫素材専門サイト「フレームデザイン」
  • イラストボックス
  • Freepik
  • ぷちぺいんと
  • Illustratorのパターンスウォッチ
  • ガーリーデザイン向けのフォント
  • 見出しのデザインやブログカスタマイズ
続きを読む

この記事が気に入ったらいいねの代わりに、Twitter、読者登録、Feedlyのフォローボタンを設置するカスタマイズ

ブログカスタマイズ jQuery CSS

この記事が気に入ったらフォローを設置
記事下のシェアボタンの下にバイラルメディア風の「この記事が気に入ったらフォロー」バナーを置いてみました。
よくWordPressでは見かけますよね。「この記事が気に入ったらいいね!」ボタンは私も澄風荘ブログに置いています。そのデザインを応用して「この記事が気に入ったらフォロー」バナーにアレンジしました。
Facebookページは持っていない方も多いでしょうし、フォローボタンの方が使いやすいかなと。コピペで使えるので是非はてなブログにも導入してみて下さい。

  • こんな感じのデザイン
  • HTML&jQuery
    • 注意点
  • CSS
  • 「この記事が気に入ったらいいね!」の導入は
続きを読む

ホワイトデーにおすすめ ヒトツブカンロのグミッツェルが可愛美味しい。

ガーリーデザイン デザイン

f:id:syofuso:20170313125954j:plain
バレンタインってもはや男女関係なくお歳暮的に送り合っていますよね。今年もバレンタインのチョコレートをいくつか頂いたので、ホワイトデーのお返しギフトに今年はヒトツブカンロのグミッツェルを選びました。ヒトツブカンロはあののど飴などの老舗菓子メーカー「KANRO(カンロ)が」創業100年を記念し、オープンした直営店のブランドシリーズ。ショップは東京駅B1F グランスタ店と大阪 LUCUA 1100店があります。かわいいパッケージに惹かれます。

以前お客様にお土産にいただき、とてもかわいいパッケージとグミッツェルのデザイン、美味しさが気に入ったので今年のホワイトデーのギフトに選びました。

  • パッケージがかわいい!
  • 袋がかわいい!
  • スイーツカラーをガーリーデザインに取り入れる
続きを読む

ガーリーなデザインの見出しのCSS はてなブログへコピペで使えます。

ガーリーデザイン ブログカスタマイズ CSS

f:id:syofuso:20170311032257p:plain
ガーリーデザインシリーズです。見出しのデザインに使えるコピペCSSを用意しました。ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Greenとあわせてお使いいただくと良いかと存じます。
以下ははてなブログの大見出し(h3)のclass指定にあわせていますが、セレクタを変更すれば他のブログなどでも使えます。

ポイント
  • 文字や背景の色・font-sizeはお好みで変えて下さい。
  • コピペで上手くいかないときはリセットCSSを。
  • はてなブログの大見出しはh3ですが、もちろんh2やh4にも使えます

続きを読む