【はてなブログ】簡単カスタマイズ！【マテリアルぽっぷ】コピペデザイン集まとめ！

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

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

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

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

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

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

ブログ書け。

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

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

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

とはいえ色々なサイト様を参考にさせて頂き、そのうえで自分なりの改造を加えたデザイン集の紹介になります(笑)お手柔らかにお願いしますね(^^)v

このブログのテーマ

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

参考

レスポンシブ対応のカード型デザインです。このブログは映画レビューが多めなので、サムネ画像が目立つようにカード型デザインを選びました(^^)

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

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

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

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

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

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

僕のことね(^^)

はてなブログ拡張機能

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

参考

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

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

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

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

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

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

中央揃えや、

右揃え。

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

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

宝の持ち腐れ～

でもこの三つだけでもかなり重宝させてもらってます(^^)vありがたや・・・

コピペ総集編

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

コピペ使用させて頂いているものを、自分の使い勝手のいいように作り変えているものもあります！ご了承ください！

配色、配置、デザイン

参考

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

参考

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

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

勉強しろよ。

ヘッダー下オススメ記事

参考

ヘッダー下(編集によってはフッター上)に自分の読んでもらいたいオススメ記事を設置しておく方法です！

自動でスクロールするようなオシャレなデザインもありますが、ブログ自体が重くなりそうなのと、シンプルなデザインが好みだったのでこちらを参考にさせて頂きました！

パソコンでの表示は基本的に問題ありませんでしたが、スマホではどうしても表示が小さくなるので、記事タイトルが長いと枠外にはみ出しちゃったりします。

CSS後半の、スマホのフォントサイズ部分だけは状況によって変更をオススメします！

はてなブログアイコン

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

参考

はてなブロガーさんならダッシュボードでお馴染みですよね？

アレをそのまま自分のブログデザインに使っちゃってます(笑)

ブログアイコンのコードを、デザインしたい部分に当てはめるだけなので簡単です！

色も大きさも自由自在！詳しい編集方法はリンク先にて！

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

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

合わせて読みたい

コレと

ポイント

コレも

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

参考

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

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

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

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

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

参考

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

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

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

ふきだし

参考

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

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

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

まとめ

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

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

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

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

合わせて読みたい

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

うしごやよろしく！

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