新たにブログを開設したのでその時に役立ったことを備忘録としてまとめました。
オシャレだと思っても、はてなブログでは上手くいかないCSSのカスタマイズも多かったので、はてなブログで使えるものを集めています。
スポンサーリンク
新しいブログ開設しました！
ちょっと暇になったので新しいブログでも作ってみるか～と思い、アニメ関連をまとめたブログを作りました。よかったらのぞいてみてください！
テーマ【Cappuccino】
テーマは、【Cappuccino】を使用しました。
オシャレなカフェのイメージのテーマで、サムネイルが見やすい感じでいいなと思います。
製作者さんのデモサイトがあり、サイトのアレンジ方法が色々紹介されています。カスタマイズがちんぷんかんぷんな私でも分かりやすくアレンジできました。
シェアボタンやグローバルナビゲーションの設置などがすんなりできました。
配色のアレンジ
サイト全体の配色は、元の色合いから大きく変えていませんが、少し変化させています。
ColorPick Eyedropper
Google Chromeの拡張機能です。
他のサイトを見ていて、この色いいなと思ったときにその色の値を調べられます。
色見本と配色サイト - color-sample.com
調べた色から少し変化させたいなというときに使っています。
指定した色から、「トーン別」「彩度」で色見本が見れます。
この色をもう少し濃くしたい、似たような色がないかなと思った時に役立ちます。
マーカーを引く
文章にマーカーを引く方法です。
強調したい文章に引くと文章が読みやすくなります。
スポンサーリンク
表の書式設定
はてなブログで表を作る方法は何通りかあります。
- はてな記法モードで作成
- Excelから貼り付ける
- htmlでそのままコードを直打ちする
上２つは直感的に表を作成できますが、あんまり美しくない……。
htmlは、上手くできれば色々なアレンジができます。なのでhtmlで表を作成しました。
そのままでは、味気ないので色を付けたいと思いやり方を探しました。でも、WPでのやり方なのか、はてなブログでそのまま使うと上手くいきませんでした。
以下のサイトははてなブログと相性がよく、色の値を変えて自分流に変えました。
この作業が一番時間かかったかもです。
CSSボタンデザイン
ついつい押したくなるような「詳細はこちらボタン」みたいなのを作りたかったのですが、オシャレなデザインを見つけても はてなブログでは上手くいかないというものも多かったです。
以下のサイトのCSSは上手くできました。
ボックスデザイン（囲み枠）
サルワカさんのおしゃれなボックスデザイン（囲み枠）を参考にしました。
ボックスデザイン以外にもオシャレなアレンジが多く使いたいなと思うのですが、はてなブログでは上手くいかないことも多いので注意が必要です。
リスト(箇条書き)
箇条書きをアレンジするのも上手くいかないのが多かったのですが、以下のサイトにお世話になりました。
上述したボックスデザインとあわせると、より目立つリストが出来上がります。
スポンサーリンク
見出しデザイン
こちらもサルワカさんから。オシャレなものが多くて好きなサイトです。
サイドバーにTwitterを埋め込む
サイドバーに自分のTwitterを埋め込むことができます。
使い方はこちらのサイトで説明されています。
今後の予定
デザインはだいたい完成したので、アフィリエイト登録とグーグルアドセンスの認証を待っている感じです。
アフィリエイト登録は上手くいったのですが、アドセンスは一回落ちました。
作ってすぐだったからかもしれないので、もう一度挑戦中です。
