幸せごはん日記

日々おいしくいただいたごはんの日記帖。本やお買い物したもののことも。

カスタマイズでお世話になったサイトさん(6月24日追記あり)

f:id:mameco724:20170705215008j:plain

 

はてなさんにお引越ししてブログのデザインをあれこれカスタマイズしました。

 

 

目が疲れるし時間があっという間に経って、読書時間が減ったりしていかーんとか思ってはみるものの、とっても楽しかったです(^^;

 

カスタマイズといっても、もともと作られたものに少し手を加えただけなんですが、なんとなく愛着がわいてくるような♪

 

まだまだカスタムの途中でまたお世話になると思うので、いままでお世話になったサイトさんを健忘録として残しておきます。

 あとからお世話になったサイトさんは順次この記事に書かせてもらいます♪

 

PC・スマホの記事下に関連記事を載せる。

関連記事をつける方法はいろいろあるみたいですが、四角くかこってカードみたいになってるのがいいな~と思いこちらに掲載されていた方法でつけました。

 

 

bulldra.hatenablog.com

 

 

見出しを作る

 いろいろかわいい見出しがあるのですね。反映されなかったりh3とかh5をよくわかっていなくて変てこになったりすごく時間かかりました^^;

 

 

 

saruwakakun.com

 

 

 

 

www.nxworld.net

 

 

 

パンくずリストの位置を変える

 

 

design.syofuso.com

 

 

パンくずリストってなに?ってまったく知らなかったのですが、読んでくださってる方がいまブログのどの位置か教えてくれるものなんですね。

はてなさん公式だと記事タイトル下のカテゴリの下になって、見た目うるさいかな?と思い記事下に移しました。

 

スマホの右上にmenuをつける

 

www.yukihy.com

 

いまはPCのデザインと同じようにレイアウトされるレスポンシブデザインに変えたので違うデザインになっていますけれど、バーの色も好きな色に変えられてデザイン的にもポイントになってよかったです。

 

スマホのフッターに月別アーカイブをつける 

 いま現在はレスポンシブデザインを使わせてもらっているので普通に表示されていますが、標準搭載にスマホ版の月別アーカイブがないのはびっくりでした^^;

 

いままで書いてきたlivedoor、ameba、fc2ブログでは最初から当たり前のようにあったので。

 

 

www.shachikuman.com

  

 

 記事タイトルをかわいくする

 

これいまのところ1番のお気に入りです。記事タイトルの前に〇を2つくっつけたかわいいデザインを入れることができて嬉しかったな~♪

 

 

 

 

www.north-geek.com

 

 

 

お世話になったサイト様、ありがとうございました*^^*

 

きのうからまたデザイン自体を変えてみたりうまくいかなくて元に戻したり。

結局1日やっていてまた元のデザインに戻ってます^^;アホかな。

 

その中でしたカスタマイズを追記していきます♪

(画像ごとリンクすると重たくなりそうなのでここからはURLのみにします)

 

 

TOPの記事一覧、サイドバーの画像の角を丸くする。

 

 

 

http://d3dayo.hateblo.jp/entry/2017/03/12/180455

 

自分にしかわからないけれど満足(笑)やわらかい印象になったんじゃないかな~。

 

 

スマホで閉じないグローバルメニューをつける。

 

 

 

http://design.syofuso.com/entry/2016/10/26/152537

 

 

 

スマホでmenuって文字と三本線のメニューアイコンみたいなのをよく見かけるのですが、PCみたいに閉じないメニューバーはないかなと探していて発見できて嬉しかったな♪ありがとうございます*^^*

 

 

メニューバーのカテゴリ文字の前に小さなアイコンをつける。

 

 

http://www.foxism.jp/entry/2017/01/19/023536

 

細かい作業でしたけれどちまちまと楽しくつけました♫

 

 

記事下においてあるシェアボタンとフォローボタンをかわいくする。

 

http://www.ituore.com/entry/sns-share-button

 http://www.ituore.com/entry/sns-follow-button

 

同じ作者さんのボタンです。シェアボタン、フォローボタンを配布されているサイトさんたくさん見たのですが、白背景があったのとinstagramのアイコンがあったのでこちらのボタンを使わせていただきました♫

 

TOPに戻るボタンをつける。

 

 

http://www.tsubasa-note.blog/entry/page-top-customize

 

 

いろいろなブログを見に行ったときにこのボタンがあると便利だな~と思うのでつけました。読み進めて少しするとふわりと現れるところが好きです♫

 

 

はてなブログを読んでいると、よく商品紹介にヨメレバカエレバっていう文字があってなんだろう?と思って調べたら1つの商品紹介のくくりの中でいろいろな購入先をリンクできる機能のよう。たしかに、amazonでしか買わないっていう人もいるだろうし、クリックした先でどこがいいか自分で調べたい方もいるから1つだけより比較対象が一緒に置いてあったほうが便利ですよね。

 

ということでわたしもヨメレバカエレバに登録したのですが、これまた簡単なはずなのにamazonアフィリエイトのIDを間違えて取り消ししようとしてもできなくてcookieを消してみたりめっちゃ時間かかってしまいました^^;

 

やっと登録できたのですが、そのままだとリンクの青文字で味気ないのでカスタマイズすることに。はてなブログのサイトでたくさんのカスタマイズ方法が紹介されいたのですが、なぜかどれもうまくいかず(わたしがamazonとkindole、楽天だけで数が奇数のせいか配列がずれたり、枠線の下側がなくなっていたり)やっとカスタマイズできたのがつばさノートさんのcssでした。

 

www.tsubasa-note.blog

 

四苦八苦したけれどきれいに作れてホッ。ありがとうございました*^^*