bluerean's blog

海外コスメ、洋画、洋書、洋楽をひたすら愛でるブログ。

【ブログ】はてな無料版でしてきたカスタマイズを備忘録的に(スマホ対応・目次・引用・見出し・シェアボタン・読者登録ボタンなど)

ブログ訪問ありがとうございます!海外コスメ、お得情報、レビュー、その他海外ものについて書いていきます。

 

どうも、ぶるりあんです。

 

この記事では備忘録的に、今までこのブログでしてきたカスタマイズをまとめていきます。多くのカスタマイズの偉人に、大変お世話になっています!(笑)とても役に立った記事へのリンクも貼っておくので、よければ参考にしてみてください。

 

f:id:bluerean:20181109193743j:plain

 

 

 

1. モバイル対応

色々カスタマイズを始めるにあたって、まずはこれ。レスポンシブデザインにしました。HTMLやCSSのコードが共通になるので、いちいちPCとスマホと、と設定しなくて大丈夫。PC版をいじれば、スマホ版にもそのまま反映されます!

 

サイドバーは必須だと思うので(そこにカテゴリーとか自己紹介が表示されるから)、サイドバーがあるレスポンシブデザインのものからチョイス。

 

今使用しているのは、minimalismです。(だいぶいじってますが(笑))

 

ひつじの雑記帳さんのデザイン。見た目や設定の仕方はこちらで解説してくれています。こんなのが作れるなんて、本当に素晴らしいです。

hitsuzi.hatenablog.com

 

2. 見出し

ひたすらサルワカさんに感謝。

サルワカという名前も秀逸だと思う。本当にサルでもわかるし、ブログも清潔感ありまくりで可愛いし、見やすい!永遠の憧れ。

 

こちらでコードはもちろん、使い方も紹介してくださっています。

saruwakakun.com

 

色を変える

ブログ名の由来のceruleanにするため、色はいじりました!画像から直接htmlコードを取得するため、こちらのcolor code finderを使い、htmlコードをゲット。

html-color-codes.info

 

3. 目次

minimalismテーマのものがすでに素晴らしいので、字体だけカスタマイズ。

この頃になると、ほんの少しhtmlがわかるようになってきたので、サルワカさんを見ながら追加しました。

saruwakakun.com

 

このブログのコード:

.table-of-contents a {
font-size: 16px;
font-family: "Montserrat";
}

 

Montserratはこんな感じのフォントです。大好き。

ãmontserrat fontãã®ç»åæ¤ç´¢çµæ

 

記事全体に適用しようとしたら、太字がうまくいかなかったので試行錯誤中。

 

4.「続きを読む」ボタン

いい感じになります。わたしは「ホバー時に枠線が重なる」にしてます。

www.ituore.com

 

5. 共有ボタン

こちらを元に、はてブFacebookTwitterのみを残したカスタマイズ。かなり悪戦苦闘しました(笑)

いじったことで微妙に左によったり、もう直すのに時間をかけすぎたので、もう一生触りません(宣言)

www.notitle-weblog.com

 

6. Youtube再生を軽くする

確かにめちゃ軽くなる!けど、至難の技でした。わたしがばかなんだろうけど、「クリックで再生」の画面がページ全体に広がるという事件発生。

問題の記事はこちら。「不具合を調整しました」という文をタイトルから消したいのですが、いじくるとまた不具合になるんじゃないかって怖くてできない。チキン。

aomi-beauty.hatenablog.com

 

いまだに使い方がよくわかりません... 書いた以外のhtmlコードが勝手に増えていくんです...

頑張る。

www.notitle-weblog.com

 

7. 読者になるボタンをクリックしやすく

横広でクリックしやすいようにカスタマイズ。こちらの記事で推奨されているように、ヘッダー下にもボタンを設置しています。

www.notitle-weblog.com

 

8. 引用

丸みのある引用符に変更。超可愛いし、見やすい!

引用は色付きもいいけど、やっぱグレーかなということで、そのまま使わせてもらっています。

www.bambi.red

 

9. 囲み枠(ボックス)

使ってみると、ボックスって見やすくするのに大切なんだなあ、と思いました。これから活用していく所存。

またまたサルワカさんです!ありがたい。

saruwakakun.com

 

 10. サイドバーの順序を変えたり、項目を追加 

 こちらは、「デザインーカスタマイズーサイドバー」でできます。

 

項目追加

ブログ村のバナーを貼りたい場合なんかも、「モジュール追加」で「html」を選択して、コードを貼り付けるだけでOK。

 

項目の名前を変更

各項目の名前は、「編集」ボタンで変えられます。例えば、わたしの「新着記事」の欄は、「書きたてほやほや記事」になってます。

 

項目の順序を変更

項目の順序は、一番左の「三」みたいなところをクリックしてドラッグすれば動かせます。

 

 

以上、今のところやってきたカスタマイズです!まだまだ初心者でわからないことが多いですが、偉人たちが知識を授けてくれるので、なんとかやっています(笑)

無料でコードのコピペを許してくれるの、本当にお心が広い。ありがとうございます!

 

これからも少しずつカスタマイズしていきますが、やりすぎないようにだけ注意ですね。偉人たちがそう言ってました。

 

では!

 

普段は海外コスメや、お役立ち情報について書いています。ご興味があれば、読者登録をお願いします。

 

aomi-beauty.hatenablog.com

aomi-beauty.hatenablog.com

aomi-beauty.hatenablog.com

aomi-beauty.hatenablog.com