こんばんは、パソコンはいじれるけどHTMLとかCSSとかの知識が皆無なうしぞうです！
このブログも元々はほぼ思い付きで始めたため、プログラミングなどの専門知識は全くございませんでした(笑)今は細々とお勉強なう♪
でもコレ、知れば知るほど面白い！！
意味の分からない文字の羅列を入力して反映すると何故か形になる・・・
た、楽しい！！ごめんなさい、このレベルの初心者です。
で実際あるあるなんでしょうけど、ブログ記事なんて放置でひたすらデザインばっかりいじってました。
ブログ書け。
と！いうことで初心者の私も無知なりに他サイト様を参考にさせていただき、当ブログで色々といじったはてなブログのカスタマイズ集をまとめました！
ちなみに「デザインがかわいい！」とか「はてなブログなのにワードプレスみた～い！」とか言ってもらえるとまんまとこんな感じになります。
とはいえ前述した通り、初心者の私が色々なサイト様を参考にさせていただき、そのうえで自分なりの魔改造を加えたデザイン集の紹介になります！
- ブログ始めたけどデザインが味気ない
- はてなブログ限定でできることってあるの？
- 初心者だからコピペで簡単に！！
って感じの方へ向けて・・・
お手柔らかにお願いします！！詳しくは知らん！
はてなブログテーマ『マテリアルぽっぷ』
当ブログ『うしごや』では、はてなブログのテーマストアより『マテリアルぽっぷ』というテーマをインストールしています！無料です！
レスポンシブ対応のカード型デザインです。このブログは映画レビューが多めなので、アイキャッチ画像が目立つようにカード型デザインを選びました！
はてなブログの無料版でも使用できますが、表示方法の関係で有料版(はてなPRO)が推奨みたいです。最低限の初期設定に加えて
- カードデザインの表示パターン
- ブログ全体の配色
- ヘッダー、フッターのデザイン
- プロフィールのデザイン
などの変更方法もリンク先のデモサイトで、テーマ作者の豆ゴロさんがまとめてくださっています！
正直、このテーマだけでかなりブログのイメージが変わりますし、目次とか見出しとかのかわいい系デザインも全てこのテーマ内に含まれていて、恥ずかしながらほとんどこちらのテーマに依存しているような状態です。
この場を借りて、いつもありがとうございます！
ちなみにブログタイトルの牛画像やブログランキングの牛バナー、ふきだしのアイコンなどは別で作ったものをデザイン上に当てはめて使用しています。
イッツミー。
はてなブログ拡張機能
続きまして、はてなブログの編集に欠かせない便利な拡張機能のご紹介です！
実ははてなブログでは、記事のタイトルが<h1>タグ(一番でっかい見出し)に対して、記事内の見出し設定でできる『大見出し』を選択しても<h3>タグ(三番目にでっかい見出し)になってしまいます。
二番目は！？<h2>はどこ！？
つまりはてなブログで<h2>タグを使うには手動での記述が不可欠。そこでこの拡張機能をインストールしておけばボタン一つで<h2>タグを挿入できるって寸法よ！
見出しのタグって数字を飛ばして順番がおかしくなってるとSEO的にもよろしくありません！あとこの拡張機能によって
文字の背景をグレーに枠取りしたり
中央揃えや、
右揃え。
なんてことも楽々できちゃいます！テキストだけでなく画像も可。
コピペカスタマイズ総集編！
それでは私が行っているはてなブログカスタマイズ＆HTML＆CSSコピペ等をダイジェスト気味にお送りします！
コピペ使用させていただいているものを、自分の使い勝手のいいように作り変えているものもあります！よろしかったらご参考に！！
配色、配置、デザインの基礎＆HTML、CSS
まず、基本的にCSSの完成形をコピペ使用させていただく場合が多いので、個人的に書き換えるのは色ぐらい？(笑)配色時の参考にはこちらを使用しています。
同系色の濃度や彩度などから色を探したり、反対色や合う色なども探しやすいのでオススメ♪
そして要素の配置やスペースの調整などの基礎の基礎の基礎くらいのウェブデザインはサルワカさんを参考にさせていただいています。非常に分かりやすい！
初心者なりになんとなーくフィーリングで適当にコピペしたり数字を変えたりして、うまくいったら喜ぶ感じで(笑)
勉強しろよ。
ヘッダー下オススメ記事
ヘッダー下に自分の読んでもらいたいオススメ記事を設置し、＋αでコンテンツをスライドインさせるアニメーションの設定方法です！
自動でスクロールするようなオシャレなデザインもありますが、ブログ自体が重くなりそうなので、わりとシンプルなデザインにちょっぴりアニメーションを付けてみました！
はてなブログアイコン
私がメニューやプロフィールで使っているハートや星などのアイコンは、はてなブログ公式のものです。
はてなブロガーさんならダッシュボードとかでもよく見るアレをそのまま自分のブログデザインに使っちゃってます(笑)
こういうやつ！
ブログアイコンのコードをデザインしたい部分に当てはめるだけなのでとっても簡単です！色も大きさも自由自在！！
※はてな公式が「自由に使っていいよ～」と明言しているわけではなく『使えるものを使っている』形なので、怒られはしないだろうけど・・・もし急に使えなくなっても仕方ないですね。
応用：合わせて読みたい、ポイント、参考
先ほどから使っている『合わせて読みたい』や『参考』の囲いに加え
こんな囲いも
タイトル部分にはてなの公式アイコンを使用しています。文字やリンクを目立たせるボックス(囲い枠)のコピペ、引用デザインのカスタマイズはこちらから！
応用：箇条書き＆リスト表示カスタマイズ
はてなブログでは記事の編集中に箇条書きボタンをクリックするだけで、便利で見やすくリスト表示にすることができます。
でもそのままだと質素な気も？
- こ
- ん
- な
- 感
- じ
- で
一工夫！はてなブログの吹き出しアイコンも添えてます♪
箇条書きをデザインすること自体は簡単なんですが、はてなブログの記事内のリスト表示のみにデザインを適用する方法がてこずった・・・(笑)
応用：スターレーティング
| 作品評価： | |
|---|---|
| 4DX評価： | |
| ScreenX評価： | |
コレですね！商品や映画のレビューには欠かせません。
こちらははてなブログの星アイコンを応用しています。
こちらもブログアイコン情報と同ブログ様より！
星の数や色、点数の表示やアマゾンっぽいレーティングもありますので是非♪
私は基本的に評価項目を二つか三つにして、星の数に合わせてグラデーションカラーになるようにしました。
文字数が多く長い文章も読みやすく
校長先生並みにお話が長い私は文章も長くなりがち。文章も個性だから添削し過ぎももったいないけど・・・あんまり長いとブログの離脱率も増えちゃう？(笑)
そんなあなたにこちらのまとめ！
- 『この記事は約〇分で読めます』という読了時間の表示
- 見出しが多く、目次も長くなる対策に開閉式の目次
- 下まで読み終わったらスムーズにトップへいける上へ戻るボタン
を紹介しています。
実用性のみならず、デザイン的にもオシャレ感があるからオススメです！
記事内の文章を吹き出しで会話形式に
こちらはガッツリコピペです！(笑)
先ほどの拡張機能の作者様ですね！やっぱすごい人の情報は有益なものが多い！
ただ使うテーマによっては配置がおかしくなってしまうこともあるので、そのあたりの調整は必須です！
まとめ：まだまだ初心者！カスタマイズは終わらない
いかがでしたでしょうか？ブログ初心者が色々と試行錯誤を繰り返し、あーだこーだ言いながら頑張ってみたブログのカスタマイズ集です！
ほぼコピペだから偉そうなこと言えないけど！
今後も『うしごや』もとい私も成長を続けます♪私も現在勉強中ですが
- 『はてなブログ』に詳しくなりたい
- 基本的なデザインCSSについて学びたい
そんな初心者の方にオススメな書籍も紹介しておきます！
まずは『はてなブログ』でブログ運営する以上、はてなブログのイロハが詳しく乗っている専門のガイドブックと
ウェブデザインには欠かせないHTMLとCSSについて、詳しく書かれたこちらは必須だと思います！本のタイトルが『基本』じゃなくて『きほん』なあたりガチな初心者向けだと思うの
書ききれなかったカスタマイズや、詳しいCSSも少しずつ詳細にアップしていきたいと思いますので、コンゴトモヨロシクお願いします！
ありがとうございました！
うしごやよろしく！