【うしごや】カスタマイズまとめ！CSSコピペでできる【はてなブログ】デザイン集！！

こんばんは、パソコンは触れるけどHTMLとかCSSとかの知識が皆無なうしぞうです！

約半年前に思いつきでブログを始めた私ですが、元々プログラミングなどの知識は全くありませんでした。大事なことなので二回言いました。

でもコレ、知れば知るほど面白い！

意味の分からない文字の羅列を入力して反映すると何故か形になる・・・

た、楽しい！！ごめんなさい、このレベルの初心者です。

で実際あるあるなんでしょうけど、ブログ記事なんて放置でひたすらデザインばっかりいじってました(笑)

ブログ書け。

そしてようやく、自分の中で一段落する形にまとまったのでその全貌を記していきます！

ちなみに「デザインがかわいい！」とか「はてなブログなのにワードプレスみたい！」とか言ってもらえると、まんまとこんな感じになります。

出典：https://www.dokusyo-geek-ki.com/entry/chopper_meigen

とはいえ前述した通り、無知な私が色々なサイト様を参考にさせていただき、そのうえで自分なりの魔改造を加えたデザイン集の紹介になります(笑)

お手柔らかにお願いします！！！

このブログのテーマ

当ブログ『うしごや』では、はてなブログのテーマストアより『マテリアルぽっぷ』というテーマをインストールしています！無料です！

参考

レスポンシブ対応のカード型デザインです。このブログは映画レビューが多めなので、アイキャッチ画像が目立つようにカード型デザインを選びました♪

はてなブログの無料版でも使用できますが、表示方法の関係で有料版(はてなPRO)が推奨みたいです。最低限の初期設定に加えて

• カードデザインの表示パターン
• ブログ全体の配色
• ヘッダー、フッターのデザイン
• プロフィールのデザイン

などの変更方法もリンク先のデモサイトで、テーマ作者の豆ゴロさんがまとめてくださっています！

正直、このテーマだけでかなりブログのイメージが変わりますし、目次とか見出しとかのかわいい系デザインも全てこのテーマ内に含まれていて、恥ずかしながらほとんどこちらのテーマに依存しているような状態です・・・

この場を借りて、いつもありがとうございます！

ちなみにブログタイトルの牛画像やブログランキングの牛バナー、ふきだしのアイコンなどは別で作ってもらったものをデザイン上に当てはめて使用しています。

イッツミー。

はてなブログ拡張機能

続きまして、ブログ編集に欠かせない便利な拡張機能のご紹介です！ 

参考

実ははてなブログって記事のタイトルが<h1>タグ(一番でっかい見出し)に対して、記事内の見出し設定でできる『大見出し』を選択しても<h3>タグ(三番目にでっかい見出し)になってしまうらしいんです。

二番目は！？h2はどこ！？

つまりはてなブログで<h2>タグを使うには、わざわざHTML編集画面で<h2>と書きこまなければなりません。

めんどくさ。

そこで、この拡張機能をインストールしておけばボタン一つで<h2>タグを挿入できるって寸法よ！！

ネット初心者にはよく分からないですが、見出しのタグって数字を飛ばして順番がおかしくなってるとSEO的にも良くないんですってよ？奥さん！！

あとこの拡張機能によって

文字の背景をグレーに枠取り。

中央揃えや、

右揃え。

なんてことも楽々できちゃいます！テキストだけでなく画像も可！

その他便利な機能もあるようですが・・・私には分からないので使ってませんｗｗｗ

いや、でもワイ的にはこの3つだけでもかなり重宝してるんや・・・ありがたや・・・

はてなブログ Perfect GuideBook

コピペ総集編！

それでは私がおこなっているHTML＆CSS編集をダイジェスト気味にお送りします！

コピペ使用させていただいているものを、自分の使い勝手のいいように作り変えているものもあります！よろしかったらご参考に！！

配色、配置、デザイン

参考

まず、デザインの基礎の基礎として色の変更時に使用するカラーコードはこちら

参考

要素の配置や、スペースの調整などの装飾はこちらを参考にさせていただいています！

無知なりになんとなーく、フィーリングで適当にコピペしたり数字を変えたり・・・うまくいったら喜ぶ感じで(笑)

勉強しろよ。

ヘッダー下オススメ記事

合わせて読みたい

ヘッダー下に自分の読んでもらいたいオススメ記事を設置し、＋αでコンテンツをスライドインさせるアニメーションの設定方法です！

自動でスクロールするようなオシャレなデザインもありますが、ブログ自体が重くなりそうなので、わりとシンプルなデザインにちょっぴりアニメーションを付けてみました(^^)v

詳しくはリンク先にて！

はてなブログアイコン

実は私がメニューやプロフィールで使っているハートや星などのアイコンは、はてなブログ公式のものです。

参考

はてなブロガーさんならダッシュボードとかでもお馴染みの、よく見るアレをそのまま自分のブログデザインに使っちゃってます(笑)

こういうやつ！

ブログアイコンのコードを、デザインしたい部分に当てはめるだけなのでとっても簡単です！色も大きさも自由自在！！

※ただ、はてな公式が「自由に使っていいよ～」と明言しているわけではなく『使えるものを使っている』形なので、怒られはしないだろうけど・・・もし急に使えなくなっても仕方ないですね(゜-゜)

応用：合わせて読みたい、ポイント、参考

先ほどから使っている『参考』の囲いに加え

合わせて読みたい

コレも

左上に色を変えたブログアイコンを使用しています。囲い自体は

参考

再び登場、サルワカさんを参考にしました！他にもオシャレなデザインのテンプレートを公開して下さっているので見ているだけでも楽しくなります(^^) 

応用：スターレーティング

作品評価：	
4DX評価：	

コレですね！映画のレビューには欠かせません！

こちらははてなブログの星アイコンを応用しています。

参考

こちらもブログアイコン情報と同ブログ様より！

星の数や色、点数の表示やアマゾンっぽいレーティングもありますので是非♪

私は基本的に評価項目を二つにして、通常の星は金色、満点時は赤に、また表示を少し大きくしてセンタリングされるように改造しています(^^)

話が長い人へ(笑)

校長先生並みにお話が長い私は文章も長くなりがち(-_-;)

話が長いのも個性だから潰すのは勿体ないけど・・・あんまり長いとブログの離脱率も増えちゃう？(笑)

合わせて読みたい

そんなあなたにこちらのまとめ！

• 『この記事は約〇分で読めます』という読了時間の表示
• 見出しが多く、目次も長くなる対策に開閉式の目次
• 下まで読み終わったらスムーズにトップへいける上へ戻るボタン

を紹介しています！

実用性のみならず、デザイン的にもオシャレ感があるからオススメですよ♪

ふきだし

参考

こちらはガッツリコピペです！(笑) 

先ほどの拡張機能の作者様ですね！やっぱすごい人の情報は有益なものが多い！

ただ使うテーマによっては配置がおかしくなってしまうこともあるので、そのあたりの調整は必須です！

まとめ

いかがでしたでしょうか？ブログ初心者が色々と試行錯誤を繰り返し、あーだこーだ言いながら頑張ってみたブログのカスタマイズ集です(笑)

ほぼコピペだから偉そうなこと言えないけど！

今後も『うしごや』もとい私も成長を続けます♪

書ききれなかったデザインや、詳しいCSSも少しずつ詳細にアップしていきたいと思いますので、コンゴトモヨロシクお願いします！

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

うしごやよろしく！

SEOに強くアフィリエイトに有利なはてなブログ 『 20分で手っ取り早く見栄えのいい「はてなブログ」を制作する方法 』 - 全手順20 -