☆*写真好きなHSPの日常**♪

HSP(ハイリーセンシティブパーソン)という独特な気質を持って生まれた、写真大好きなOLが綴る日々です♡

はてなブログでカスタマイズしたトコロすべて公開!

f:id:lucky--happy--smile:20170701225228j:plain

 

ブログの趣旨からはズレますが、無知なわたしが頑張ってカスタマイズしたので紹介させて下さい☆ 

だいたいコピペして調整、みたいな感じなので、使えるところは使ってみて下さい♪

 

ところで、わたしのスキルはというと、昔ながらのホームページのすごく簡単なものを作れる程度です。

HTMLとCSSの基本のキくらいならわかっているという感じ。

まぁほとんど無知ですww

 

デザイン系に関しては、Fireworksは使えます。

フォトショやイラレは全く使えません。

Fireworksの使いやすさに慣れてしまうと、フォトショが全く使えません。。

使い勝手が全然違いすぎて。。

 

…という感じです。

 

カスタマイズの前に

順番は前後しますが、proにしました。

前々から考えていたのだけれど、やっと踏ん切りがつきました。

だって、月1000円ですもんね、高いよ(´;ω;`)

長くやっていきたいと思っているので、2年で600円になるコースにしました。

 

proにしたかった一番の理由は広告をなくせるから。

そもそも広告のないスッキリとしたサイトが好きで

自分のアドセンスの広告とかなら仕方ないけれど、

全然関係ないやつがダラダラとあるのは好きじゃなかったので。。

まぁ無料だから仕方ないのですが。

あとはカスタマイズなしでトップページを一覧表示することが出来るというのも大きかったです。

カスタマイズでもできるようでしたが、やってみると気に入らなくて( o´ェ`o)

あとは地味にキーワードリンクが嫌でした。。

  

カスタマイズについて

テーマは『Innocent』です。

シンプルなのが良かったのでこれに。

カスタマイズもしやすいと思いますし、ナビゲーションメニューもコピペですぐに使えます。

(ただわたしはここで苦戦してしまったのですが。。。)

 

ナビゲーションメニュー

f:id:lucky--happy--smile:20170630220335j:plain

 

このテーマでは作者さんがコピペしてすぐに使えるコードを用意してくださっているのですが、なぜか全く反映されないのです。 ↓ これ。 

moonnote.hateblo.jp

 

なので、諦めて他のカスタマイズを導入することにしました。

 

よく、スマホ版だとメニューって三本線のやつで、あれトグルメニューというそうですが、それじゃなくて横にスクロールできるメニューにしてみました!

トグルメニューは意外とタップされる率が低いそうです。

一方、横スクロールメニューは視覚的に文字が飛び込んでくるので、タップされやすいんだそう。

たけど、あまり見かけないから横にスクロールすると気付かない人もいるとか。

そのへんがデメリットです。

 

せっかくなので、わたしは横スクロールメニューを採用☆

参考にした記事はこちら。

www.yukihy.com

 

スマホの方はメニューを横にスクロールしてみて下さい♪笑

パソコン版は普通のメニューです。

メイン的なカテゴリーをメニューの中に入れました。

もう少し細かいカテゴリーはサイドバーのカテゴリーにあります。

 

 あとは、WEBアイコンも使用しています。

文字の前につけてるアイコンです。

参考にした記事はこちら。

saruwakakun.com

 

ヘッダー

f:id:lucky--happy--smile:20170630151102j:plain

 ヘッダー画像はFireworksで作成☆

素材はこれを使っています。 

 

 以前、この素材を使ってデザインの販売をしようと思っていたのですが

これが販売禁止だったんですね(ノω・、) ウゥ・・・

こういうホームページとかチラシとかで使うのはOKなのですが

素材を使ったデザインの販売はダメだったんです。

そのために買ったのに、なんということやら・・・で、使い道がなかったのですが

やっと使える時がきまして、カメラやリボンなんかはこの素材です。

ご覧いただいているとわかるかもしれないですが、手書き風なデザインが好きで

そういう雰囲気にしてみました。

 

画像の大きさの調整

スマホだとヘッダー画像が見切れてしまっていたので

デバイスによってヘッダー画像のサイズを適宜変更してくれるコードを入れました。

 参考にした記事はこちら。

blog.z0i.net

 

サイドバー

f:id:lucky--happy--smile:20170630151145j:plain

 まず、プロフィールを作りました。

元からあるプロフィール欄は画像が小さいのが気に入らなかったので

HTMLを使ってプロフィール欄を作りました。

その際に参考にした記事はこちら。

panmeeee.hatenablog.com

 

サイドバーのタイトルの装飾については 、先頭にリボンの画像をおいてます。

素材は先ほどの素材集から小さく加工&色を変えたものを用意しました。

 

下線も同じ素材集からで、大きさを変更したものを用意。

コードはこちらの記事を参考にしました。

design.syofuso.com

 

フォントはタイトルのみGoogleフォントです。

英字のGoogleフォントはたくさんあります!

その中から手書き風のフォントを探しました。

(これは【Cabin Sketch】というもの。)

そして適用。

いい感じ♪

参考にした記事はこちら。

www.yukihy.com

 

記事タイトル

f:id:lucky--happy--smile:20170630151445j:plain

記事のタイトル装飾はサイドバーのタイトルと一緒ですね。

クラス名を記事タイトルにして、画像の位置は微調整と、画像も好きなのに置き換え。

Googleフォントは【Rounded Mplus 1c】です。

ヘッダーのフォントにも使用しているものです。

 

見出し

f:id:lucky--happy--smile:20170630151506j:plain

見出しも先頭に画像がくるようにしました。

これもクラス名を見出しのh3(h4)に書き換え&微調整&画像置き換え。

 

文字

太文字にすると蛍光ペンのようになるようにしました。

太文字

オシャレですね♪

参考にした記事はこちら。

www.ringocatnote.com

 

フォローボタン

読者になると更新情報がわかるので、はてなユーザーの方には読者登録してもらえるように、そうでない方はfeedlyにて登録してもらえるように。

f:id:lucky--happy--smile:20170630151252j:plain

 

わたしも以前はFeedly使っていたのですが、とても便利ですね。

参考にした記事はこちら。

www.yukihy.com 

Twitterも追加できます。

わたしはやっていないので、Twitterの部分は消しました。

 

SNSシェアボタン

f:id:lucky--happy--smile:20170630151331j:plain

 かわいらしいデザインのシェアボタン!

これはこちらの記事を参考に。

design.syofuso.com

まんまですね。

色だけ変えてます。

スマホになると画像も小さくなるようになっているのでとても良いです♡

 

アイコン

f:id:lucky--happy--smile:20170630153849p:plain

いわゆるファビコンみたいやなつですかね。

これもFireworksで作成しました。

 

サムネイルの角を丸くする

f:id:lucky--happy--smile:20170701084029j:plain

アイキャッチなどのサムネイルの角を丸くしてみました。

ちょっとかわいらしくなりますよね☆

参考にした記事はどれだかわからなくなってしまいました…。

入れたコードは以下です☆ 参考まで♪

 

/*--------------------------------------
アイキャッチ画像のレイアウト変更
--------------------------------------*/
.page-archive .entry-thumb {
border-radius: 0.8em; /*値を変更すれば角の丸みを調整することができます*/
}

/*--------------------------------------
サイドバーアイキャッチのレイアウト変更
--------------------------------------*/
#box2 img {
border-radius: 0.8em; /*値を変更すれば角の丸みを調整することができます*/
}

.entry-content {
font-size:15px;
line-height:1.7em;

.samplecss:before{
font-family: blogicon;
content: "\f000";
}

 

課題

色々と好みな雰囲気にカスタマイズできたのですが、

記事下に出てくる《関連記事》については、サイドバーと同じ装飾ができておらず。。

(タイトルを英字にしてgoogleフォントにして、サムネイルの角を丸くしたい)

やり方がわかりません。

 

あと、独自ドメインにするか迷っています。

もうちょっと調べてみます。(変更したことによって生じる処理の煩わしさとか)

 

カスタマイズを終えてみて

はてなブログのカスタマイズ方法についてはネット上にたくさんあるのですが

女性向けというか、かわいらしい感じのカスタマイズってなかなかなくてですね;

そんな中でもMinimal-Greenさんのサイトは非常に参考になりました。

design.syofuso.com

やはり女性が作っていると感覚が似ているので、ガンガン使えます!!

ありがとうございました♡

 

理想的なデザインになりました

無知なので疲れましたが、ちょっとコピペするだけなので、思ったよりも簡単でした!

ノってくると良いのですが、ハマるとなかなか抜け出せなくて、なんでやねーん!ともなりましたし、

時間がいくらあっても足りない。。と思ったりもしました。

だけど、すごく理想的なデザインにできて満足です!!

カスタマイズすると愛着が湧きますね♡

おすすめです!

かなり長かったですが、最後までお読み頂きありがとうございました(*´∀`*)

 

photo by Q in My house