こんばんは、パソコンはまぁいじれるけどHTMLとかCSSとかの知識は皆無なうしぞうです！
今でこそ少しは知識も増えましたが、もともとこのブログもほぼ思いつきで始めたので、プログラミングなどの専門知識は全くございませんでした。
でもこれ知れば知るほど面白い！！
意味の分からない文字の羅列を入力して反映するとなぜか形になる…
た、楽しい！！！ごめんなさい、このレベルの初心者です。
で実際あるあるなんでしょうけど、ブログ記事なんて放置でひたすらデザインばっかりいじってました。
ブログ書け。
ということで今回は、初心者の私が無知なりに他サイト様を参考にさせていただき、当ブログでいろいろといじったはてなブログでのカスタマイズをまとめてみました！
この記事は
- はてなブログ初心者の人！
- ブログデザインをいろいろいじってみたい人！
- CSS等に詳しくなくてコピペで済ませたい人！
ちなみに「デザインがかわいい～！」とか「はてなブログなのにワードプレスみた～い！」とか言ってもらえるとまんまとこんな感じになります。
©尾田栄一郎/集英社 All rights reserved.
はてなブログテーマ『マテリアルぽっぷ』
まず当ブログ『うしごや』では、はてなブログのテーマストアより『マテリアルぽっぷ』というテーマをインストールし、使用しています。
見た目はレスポンシブ対応のカード型デザインです。
このブログでは映画の感想記事なんかもあげているので、アイキャッチ画像が目立つようにカード型デザインを選びました。
はてなブログの無料版でも使用できますが、表示方法の関係で有料版(はてなPRO)が推奨のようです。最低限の初期設定に加えて
- カードデザインの表示パターン
- ブログ全体の配色
- ヘッダー、フッターのデザイン
- プロフィールのデザイン
などの変更方法もリンク先のデモサイトで、テーマ作者の豆ゴロさんがまとめてくださっています。
目次や見出しなどのポップ調初期デザインも全てこのテーマ内に含まれているので、正直このテーマに変えるだけでもかなりブログのイメージが変わります。
恥ずかしながらほとんどこちらのテーマに依存しているような状態ですね…この場を借りて、いつもありがとうございます！
アイキャッチ作成は『Canva』で簡単に
ちなみにブログタイトルの牛バカンス画像やブログランキングの牛バナー、ふきだしのアイコンなどは別で作ったものをデザイン上に当てはめて使用しています。
イッツミー。
その他、アイキャッチ画像等の作成は『Canva』というサイトを使用しています。
フリー素材や、もともと作成済みのデザインなどを組みあわせて簡単に編集できるのでおすすめです♪
編集のお供！便利なはてなブログ拡張機能
そしてデザインとは少し違いますが、ブログを編集するうえで便利なはてなブログの拡張機能です。
実ははてなブログでは、記事のタイトルが<h1>タグ(一番大きな見出し)に対して、記事内の見出し設定でできる『大見出し』を選択しても<h3>タグ(三番目に大きな見出し)になってしまいます。
二番目の<h2>が行方不明。
つまりはてなブログで<h2>タグを使うにはHTMLでの記述が不可欠…しかしこの拡張機能をインストールしておけば、ボタン一つで<h2>タグを挿入できます！
<h2>タグがないと、SEO的にもよろしくありません。あとはこの拡張機能によって
文字の背景をグレーに枠取りしたり
要素の中央揃えや、
右揃えなども
楽々できちゃいます。テキストだけでなく画像も可能ですので、記事の見た目を調節するのにも一役買ってくれる便利な拡張機能です。
CSSコピペで簡単！ブログカスタマイズ総集編！
それでは私が実際に行っているはてなブログのカスタマイズ、HTML＆CSSコピペ等をまとめていきます。
コピペ使用させていただいているものを、自分の使い勝手のいいように作り変えているものもあります(笑)
参考サイト様のリンクも合わせて貼ってありますのでぜひ、参考にしてみてくださいね♪
デザイン編集の基礎知識！配色、配置のHTML＆CSS
コピペでブログを編集するときに、元のデザインから色や表示位置などを調節したい場合が多いです。
というか、基本的にはブログテーマも何も適用されていないまっさらな状態を前提としたCSSを公開してくださっている場合が多いので、自分のサイトにうまく適用させるにはもちろん自分での編集が必須です。
- 『#○○○○○○』のカラーコード値を自分な好きな色や、ブログデザインに合った色に変更する
- 『margin』プロパティで余白の幅調整など、デザインごとに要素を見やすい配置や表示に変更する
たとえ知識が全くなかったとしても、コピペしたCSS内の数値を、さらにコピペして変更していく…という流れで初心者の方も大体クリアできると思います(笑)
わかんなかったらググろう！
参考サイト様はこちらです。前者は自分好みだったり、類似色や反対色などを探しやすく、よくお世話になっています。
後者のサルワカ様は、ウェブデザインの基礎情報を分かりやすく解説してくださっています。後述するボックスデザインなどでもお世話になっているサイト様です。
ヘッダー下のおすすめ記事＆スライドアニメーション
ヘッダー下に自分の読んでもらいたいおすすめ記事を設置し、＋αでコンテンツをスライドインさせるアニメーションの設定方法です。
自動でスクロールするようなオシャレなデザインもありますが、ブログ自体が重くなりそうなので、わりとシンプルなデザインにちょっぴりアニメーションを付けてみました♪
はてなブログアイコン＆その活用法！
私がメニューやプロフィールで使っているハートや星などのアイコンは、はてなブログ公式のものです。
はてなブロガーさんならダッシュボードとかでもよく見るあれをそのまま、自分のブログデザインに使っちゃってます(笑)
ブログアイコンのコードをデザインしたい部分に当てはめるだけなのでとっても簡単です。色も大きさも自由自在！
※はてな公式が自由な使用を許可しているわけではなく、『使えるものを使っている』形なので、利用する際は自己責任でお願いします。
応用：あわせて読みたい、こんな人におすすめ
先ほどから使っている『合わせて読みたい』の囲いに加え
タイトル部分にはてなの公式アイコンを使用しています。文字やリンクを目立たせるボックス(囲い枠)のコピペ、引用デザインのカスタマイズはこちらから！
応用：評価に便利！スターレーティング
| おすすめ度: | |
|---|---|
| ホラー度: | |
商品や映画のレビューには欠かせないスターレーティング。
こちらははてなブログの星アイコンを応用しています。
星の数や色、点数の表示やアマゾンっぽいレーティングもありますのでいろいろ試してお気に入りを探してみてください♪
私は大体評価項目を二つか三つにして、星の数に合わせてグラデーションカラーになるように設定しました。
一記事が長い場合に行いたいカスタマイズ
まとめ記事などは項目や文字数が多くなりすぎて見づらくなってしまいます。
ブログの離脱率を減らすためにも行いたいカスタマイズはこちらから。
- 『この記事は約〇分で読めます』という読了時間の表示
- 見出しが多く、目次も長くなる対策に開閉式の目次
- 下まで読み終わったらスムーズにトップへいける上へ戻るボタン
以上の三つをまとめています。
実用性のみならず、デザイン的にもオシャレ感が出るためおすすめです。
箇条書き＆リスト表示カスタマイズ
はてなブログでは記事の編集中に箇条書きボタンをクリックするだけで、便利で見やすくリスト表示にすることができます。でもそのままだと質素な気もしませんか？
- こ
- ん
- な
- 感
- じ
- で
一工夫するとおしゃれで見やすくなります♪
記事内の文章を吹き出しで会話形式に
ようやく俺の紹介だ。
こちらはがっつりコピペです！(笑)
先ほどの拡張機能の作者様ですね。やっぱすごい人の情報は有益なものが多い…
ただ使うテーマによっては配置がおかしくなってしまうこともあるので、そのあたりの調整は必須です！
まとめ：【はてなブログ】カスタマイズまとめ！初心者でも簡単、CSSコピペデザイン集♪
いかがでしたでしょうか？ブログ初心者が色々と試行錯誤を繰り返し、あーだこーだ言いながら頑張ってみたブログのカスタマイズ集です(笑)
ほぼコピペだから偉そうなこと言えないけど！
- 『はてなブログ』に詳しくなりたい
- 基本的なデザインCSSについて学びたい
最後にそんな初心者の方におすすめな書籍も紹介しておきます！
まずはてなブログでブログ運営する以上、はてなブログのイロハが詳しく乗っている専門のガイドブックと
ウェブデザインには欠かせないHTMLとCSSについて、詳しく書かれたこちらは必須ですね♪
書ききれなかったカスタマイズや、詳しいCSSも少しずつ詳細にアップしていきたいと思いますので、コンゴトモヨロシクお願いします！
ありがとうございました！