はい、どーも！様々なモノ、コトをマーケティングした、ライフスタイル情報を発信する「シャケマ！ブログ」筆者のシャケマです！今回は、はてなブログのブログデザイン変更ついて、書いていきます！
シャケマ！ブログのデザインを一新しました！
前から読者でいてくれている方々なら既にお気づきかと思いますが、100記事達成を機にシャケマ！ブログの「ブログデザイン」を変更してみました！
どうでしょうか、少しは見やすくなったと思いませんか！？
今まではてなブログの初期既定デザインを使用していたのですが、ジャンル別で表現する「グローバルナビゲーション」が設置できなかったり、
「特集ピックアップ」記事をタイトル下に掲載できなかったり、「最新記事を2列表示」させたりできませんでした。
ブログ「Pikalog」さんをお手本にさせて頂きました！
今までブログ作りをしていても「何か見ずらいな～」と思っていたのですが、自分の思っているデザインはどんなのだろうか・・・と色々模索していたら、Pikaさん(id:pikalog)のブログに辿り着きました！
▽pikalog
デザインがとてもシンプルで見やすく、シャケマ！のイメージと近いと感じ、是非参考にしたい！とDMさせて頂いたら、色々とご伝授頂き、ようやくシャケマ！ブログとしてのデザイン変更のイメージを定めることが出来ました！
Pikalogさん、ご教授頂きまして、ありがとうございました！
デザインテーマは「Under Shirt」を選択！
そのベースとなる、はてなブログのデザインテーマが「Under Shirt」というものだったため、早速ダウンロードして編集に取り掛かりました！
▽はてなブログ「Under Shirt」
しかし、今までははてなブログの初期設定時のデザインをそのまま使用しており、幾つかのCSSでデザインを構成しておりましたが、
新たなデザインテーマをインストールすることで、今までのCSS設定はすべて削除されてしまうので要注意です！
予め、元のCSSなどはコピペして自分のPCに保存しておきましょう！
大きく「3つ」デザインを変更しました！
当記事のタイトルや、冒頭文章でもチラっと書きましたが、今回のデザイン変更では大きく以下「3つ」の変更をすると、心に決めておりました！
【大きなデザイン変更点】
- 上部固定されている「グローバルナビゲーション」を設置する
- 注目度が高い「特集ピックアップ」記事を設置する
- 更新した最新記事を「2列」で表示する
さらに、1.グローバルナビゲーション設置に伴い行わるのが「カテゴリ別」にする。ということにもつながるので、今回合わせて変更をしました！
使用した「CSS」と「HTML」コード、参考にした「ブログ記事」を紹介します！
前項でも書いた大きな変更を行うと、加えて細かな部分も変更しないと見栄えが大変悪くなってしまいます・・・。
そのため、様々なブログで紹介されているCSSを複合して、自分なりにCSSを改編して設定してみました！
自分の行った準備、使用した「CSS」や「HTML」及び参考にしたブログサイト、どのような設定やデザインとなったを、以下で紹介していきます！
なお、CSSコード及びHTMLコードの貼り付け場所は、はてなブログメニューの「デザイン」のコチラに貼り付けてください！
グローバルナビゲーション
これが一番苦労しました。これはHTMLとCSSの2つで構成しなくてはならなく、種類も色々ですがシャケマ！の条件はこちらに絞っていました。
【変更にあたっての条件】
- 上部表示（最初だけ）
- 5～6つの項目
- PC横1列、スマホ横2～3列
中々このシンプルなイメージに適用するCSSコードがなく、そして探すこと数日、藤宮＠Focus on 30min さん(id:focuson30min)の記事を参考にさせて頂きました！
▽30分集中のすゝめ
何が苦労したかって、PCだと横長になるのはいいのですが、スマホで自動に列を2～3列に直してくれるCSSコードが中々ありませんでしたが、これだとバッチリでした！
▽スマホはこんな感じになります
これでシャケマ！ブログは、イメージ色のオレンジ色にしています！
特集ピックアップ
ブログの代表的な記事や今旬な記事を、上部に固定して見てもらうことで、初めてシャケマ！ブログに訪れた方でも、どんなブログかわかってもらえるようにずっと設置したいと思っていました。
そこで参考にさせて頂きましたのは、元CAバンビさん(id:zuboraca)のこの記事になります！
▽バンビの初心者ブログ教室
PCだと横1列に4つ並びますが、スマホだと2列2つずつの仕様となっています！これ見やすいですよね！
▽スマホはこんな感じになります
後は背景色を変更したり、枠線の色を変更して任意の色に指定すれば、グッと統一感がでますよね！
最新記事2列表示
これは「Under Shirt」ならばデフォルトで2列表示になるのですが、スマホの場合は1列表示なってしまいますので、CSSでスマホで見ても2列表示にする必要がありました。
しかし、参考にしたブログを失念してしまったので、以下に直接CSSコードを貼り付けさせて頂きます。(CSSコード制作者様からご指摘ありましたら削除します。)
/* UnderShirt - スマホでも記事を２列で表示 */
@media (max-width: 767px){
.archive-entry {
width: calc( 50% - 6px);
}
.archive-entry:nth-child(2n) {
margin-left: 12px;
}
.page-archive .entry-thumb {
height: 28vw;
}
}
これを、そのままコピペして貼り付ければOKです！
日付位置、カテゴリ位置など
記事2列表示になったのはいいですが、デフォルトですとブログ作成日付やカテゴリ位置が左下になっており、
なんかバランスが悪い感じがしましたので、ブログ作成日付は右下へ、カテゴリ位置は左上へ、変更しました！
そこで、この一連の見やすさを追求するため、くうかさんのブログを参考にさせて頂きました！
▽かんしんぷるライフ.
ここで注意しなくてはならないのですが、今までのCSSコードの下に貼り付けてしまうと反映されないことがありました。（順番関係あるのか？）
原因はよくわからないですが、反映されない場合は、CSSコード内の上部に貼り付けてみると、シャケマ！は解決されましたので試してみてください！
記事枠線、説明文の非表示、記事余白狭く
これもまた合わせて変更したかった部分で、見た目のメリハリや一覧ファーストビューをよりスッキリさせたいなと思い、枠線をグレー色に、記事一覧の説明文を非表示に、余白を狭くしなるべく大きく見せる変更を施しました！
これを参考にしたのは、先ほどもご紹介させて頂いた「かんしんぷるライフ.」内に紹介されております！
これも前項で書いた様に、CSSコードをコピペする位置によって反映されないこともあるので、少し試すことが必要になります。
見やすく、読みやすく、伝わりやすいブログ作りを目指します！
いかがでしたでしょうか？シャケマ！ブログは見やすくなったでしょうか？はじめて読まれた方は見やすく思いましたでしょうか？
今回はほぼ他の方が作ったCSSコードを、コピペして少し改造することでデザイン変更をすることができましたが、もっと思い通りにするには根幹のCSSコードを作成出来なくてはならないかもしれません。
ただ、とにかくブログを可及的速やかに、見やすく且つ読みやすいものにすることで、読者の皆様やこれから読んで頂ける方々にも「伝わりやすい」ブログ作りが必要だなと思い、デザイン変更に乗り出してみました！
これに満足せず、徐々にデザインは更新していきますので、引き続き様子を伺いに来てみてくださいね！
ということで、今回のブログが良かったら読者登録やブックマーク、またツイッターやインスタグラムのSNSフォローもお願いします！では、また次のブログでお会いしましょう！
