sungenのイラスト練習ブログ

デジ絵練習や小説関連のブログです。オリジナルWeb小説のイラストなど。二次絵は刀剣乱舞がメイン。




CSS初心者が、はてなブログのカスタマイズに参考にしたサイトまとめ

CSS全くやったこと無かったので、だいたい以下のブログを参考にしました。今日はカスタマイズで力尽きそう…。今後、参考にしたブログ&サイトはこの記事に貼り付けていきます。

(※旧ブログのみで使ってたCSSもあります)

20160203145834

参考ブログ&サイト

凄く助かります本当にありがとうございます。

目次

 

 

 

色見本

 

シンプルな感じ。「この色何だっけ?」と言うときに大助かり。

encycolorpedia.jp

 

カラーホイール。何かオシャレ。

color.adobe.com

 

↓日本語の色名とかもある。赤、青など色ごとに調べられる。

■色見本と配色サイト - color-sample.com

http://www.color-sample.com/

 

 

見出しの作り方

すごいとしか言いようが無い。

www.yukihy.com

 

グレーとかも格好いい。

toshiiy.blog22.fc2.com

 

続きを読むボタンの変更(暫定)

参考にさせて頂いたけれど私にはまだ難しい。

georges.hatenablog.jp

当ブログのボタンは見れば分かるかと思いますが、こちらをそのまま借りただけです…。色と形だけ変更…。

デフォルトだとクリックしにくいので急遽設置しましたが、そのまますぎて申し訳無いのでまたデザインを変更します。

 

下の方に関連記事を表示する

こんな便利な物があったなんて…。この方は神か。

bulldra.hatenablog.com

 

こちらもすごい。分かりやすくてめちゃくちゃ助かりました。

chipspd.hatenadiary.jp

 

グローバルナビと言うらしい。

こちらのブログさんのグローバルナビはとてもシンプルで格好いいです。

ほぼそのままですみません。そのうちアレンジします。

chipspd.hatenadiary.jp

 

キーワードの下線を消す

キーワードの下の下線も消しました。調べられるのもそれなりに助かる機能ですが、小説読むとき邪魔だなって思ってたので。

(確かリンクを切る方法もどこかで見たのですが、当ブログではやってないです。ええと、どこだったかな…見つけたらまた貼ります)

akiueo.hatenablog.com

 

このpinterst貼り付けカスタマイズも気になる。

akiueo.hatenablog.com

このpinterst(ピンタレスト…そうかそう読むのか)って良く使ってるんですが、結構役に立ちます。ざっくり言うとウェブの画像をクリックで自分のページに保存して、自分のページから元のリンクへ飛べるサービス。他の人のページも見られるので暇な時に見ると楽しい。

資料写真を印刷するとインクが減りまくるので、来年こそタブレット買って資料の参照に使いたいな…。

でももし私のブログに使ったら、何のブログか分からなくなりそうなのでちょっと保留。

 

こんな感じかな。

 

一応ほんのわずかアレンジして使ってます。…けどすみません。色とか変えるだけしかできない…。

 

カスタマイズをあまりやり過ぎるとダサさがなくなるので、ほどほどにしたいです。

子カテゴリと目次のつくり方はまた調べたい。

見出しはもう少しデザイン考えようと思います。

 

 

サイドバーが長くなったので横並びに。

こちらを参考にしました。背景色はシンプルにしたいので無しで。

fa11enprince.hatenablog.com

 

ソーシャルボタンの変更

3Dなのは何となくです。

www.yukihy.com

www.yukihy.com

 

フォローボタンはこちらを参考にしました。

デフォルトで用意されているボタンだと表示に時間がかかったので、レトロにHTMLです。サイドバーに置きました。

kimizuka.hatenablog.com

お月様のイラストかわいい。

 

 

広告の背景が黄色で表示されているのを消す方法。

広告の表示前に、黄色い背景が出ていてとても邪魔だった…。

なんと消す方法を書いて下さっているブログ様が…!!これは本当に助かった!!

chipspd.hatenadiary.jp

 

 

Twitterのタイムラインをサイドバーに表示させる方法

www.matome-pro.com

Twitterやってる方はやってみてもいいかも。 

 

 

サイドバーに画像を貼る

blog.minimal-green.com

こちらを参考にさせて頂きました。

はてなのフォトストレージですが、各画像の編集画面から画像のアドレスをコピーしないと、一覧から右クリックすると小さい画像になります。表示画像のアドレスを取るって感じなので仕組み的にそうらしい。