こんにちは。
Madori（@madori_10）です _φ(･_･
はてなブログの大幅なカスタマイズを行いました。
今回はカスタマイズに関する記事ですが、備忘録なのでHTMLやCSSの記述はありません。
デザインテーマをUNDER SHIRTに変更
お気に入りだったシロマさんの「SOHO」から、rokuzeudon さんの「UNDER SHIRT」に変更しました。
変更の理由
はてなブログProにしてから1ヶ月と少し経ちました。
Proにしてからブログのカスタマイズが楽しくなってきましたが、やはり記事一覧をどうしてもカード型にしたかったのです。
UNDER SHIRT
カード型にもこだわりがありました。
・PC 2カラム表示
・スマホ 1カラム表示
・カテゴリページもカード型表示
カード型のテーマといえば！
のテーマのブログもよく見かけはするのですが、何だかしっくりこなくて。
「SOHO」に惚れ込んでいたというのもあります。
なので、他のテーマに変えることを想像していなかったのです。
ですが、何となくテーマストアをのぞいたら…。
「めっちゃ好み！」
なテーマがあるではありませんか。
それが、rokuzeudon さんの「UNDER SHIRT」です。
全体のイメージも、かなりストライクゾーン。
インストールしてから、記事の投稿を後回しにしてカスタマイズに夢中になってしまうほど気に入ってしまいました。
この通り、まさに思い描いていた「PC 2カラム・スマホ 1カラム」デザインです。
カテゴリ「Travel」ページ もカード型になっている！
こちらはPC表示です。
PC表示のサイドバーはこんな感じです。
テーマ「SOHO」でカード型にチャレンジしたときのスクショが残っていたので貼り付けておきます。
ダンナさんに、
「スマホ2カラムより普通の記事一覧のほうがいいよ。」
と言われたのもありますが、調べてみると確かにスマホ2カラムは見づらいという声もちらほら。
結局、スマホでのカード型表示はやめて普通の記事一覧にしました。
これはこれで結構気に入っていました。
私のブログを読んでくださっているのはスマホ閲覧のかたが大半なので、スマホからの見栄えにはこだわりたいという思いもありました。
もっと知識があればスマホでも1カラムに出来そうですが（汗）。
SOHO
ですが、シロマさんの「SOHO」も大好きなテーマ。
ブログ開設当初から一途にこのテーマを愛用してきました。
「SOHO」のためのカスタマイズ記事も書いてしまうほど。
したがって、ベースは「UNDER SHIRT」ですが、「SOHO」で気に入っていた部分をカスタマイズによって取り入れています。
SOHOを参考にした箇所
フォントサイズ
「UNDER SHIRT」の記事タイトルと見出しが少し大きすぎるような気がしたので、「SOHO」を参考にした大きさに変更しました。
マウスオーバー時に画像に影
私のブログは旅行記がメインなので、写真の見栄えがとても重要です。
なので、マウスオーバーした時に画像に影が出るのがとても気に入っていました。
これは絶対に取り入れたかったのです。
カテゴリ名
カテゴリ名の前に「#」を入れました。
私はインスタグラマーと言われるほどではありませんが、Instagramを現在も楽しんでおり、良くも悪くも強い思い入れがあります。
なので、引き続き使わせていただくことにしました。
主なカスタマイズ
カラーの変更
UNDER SHIRTに変更する前と同じ色にしました。
・本文のカラー
・リンクカラー
・ホバーカラー
・リンクホバー時に下線（記事内にのみ適用）
フォントの変更
フォント オタクかも（笑）
それぞれ個別に設定しました。
タイトルは個性を出し、本文は読みやすさを重視しました。
・全体のフォント
・記事タイトルと見出しのフォント
・ブログタイトルとサイドバータイトルのフォント
見出しデザインと色の変更
大幅には変えておりませんが、
・大見出しのデザイン
・中見出しのデザイン
・小見出しのデザイン
を、変えました。
パンくずリストの設置
パンくずリストを設置しました。
旅行記はどうしても記事タイトルが長くなってしまいます。
記事タイトルが長くなったときに、デザインが崩れてスマホからの見栄えが悪くならないようカスタマイズ しました。
CSSの
text-overflow:ellipsis;
を使って1行にすることができるそうです。
1行におさまらないと、末尾に「…」と表示されます。
友田ヌキさんの記事を参照
グローバルナビ（ヘッダーメニュー）の変更と設置
カテゴリが増えてきたのに、また増やしてしまいました。
「Travel」を追加。
私のブログはタイトルやメニューが英語表記なので、親カテゴリの頭にWebアイコンもつけてみました。
そして、子カテゴリを設置してみました。
PC表示のグローバルナビに親カテゴリとして表示するのは、以下の通りにしました。
・Home（トップページ）
・Travel（国別に子カテゴリ）
・Blog（全カテゴリを子カテゴリに）
・Photos（写真記事ページ）
・Football（サッカー 記事ページ）
・About this（ブログ説明ページ）
・Profile（自己紹介ページ）
・Email（問い合せページ）
スマホからも子カテゴリが表示できるようにしました。
左の「MENU」をタップすると、下にカテゴリが一覧形式で表示されます。
閉じるときも同様に左の「MENU」ボタンをタップします。
とてもわかりやすい設置方法だったのとデザインが気に入ったので、色だけ変えてそのまま取り入れました。
半月 さんの記事を参照
（スマホで子カテゴリ表示が可能です。）
ゆきひー さんの記事を参照
（スマホでは親カテゴリのみの表示です。）
目次デザインをクラシカルに
目次はテーマを変更する前から取り入れておりましたが、この機会に載せておきます。
私のブログは良い言いかたをするとシンプルですが、見るひとによっては地味です。
部屋のインテリアもブログもベースは無彩色なのが好み。
ですが、どこかにアクセントをつけたいと思い、見つけたのがこちらの目次デザインです。
おしゃれな目次がたくさんあります。
ブログデザインもとてもお洒落です！
kimix さんの記事を参照
SNSボタンの変更
今までのデザインもシンプルでとても気に入っていたのですが、気分転換も兼ねてSNSボタンも変更してみました。
こだわりは、全種類同じ色にすること。
shun さんの記事を参照
たくさんのかたがたの記事を参考にさせていただきました。
本当にありがとうございます。
¡El Blanco! 振り返り
これまでのブログデザインを振り返ってみたいと思います。
ブログ開設当初
まだ無料会員でしたが、CSSで記事一覧表示にしたときのデザイン。
PC表示
この頃はスターを設置していたんですね〜。
スマホ表示
Proにしていちばん良かったと思う点。
広告の非表示。
まだ2記事しか投稿していなかったのでレスポンシブにはしておらず、スマホ版はデフォルトのデザインです。
背景画像はスペインのトレドの全景。
うぅ〜旅欲が。。。
いちばん長かったデザイン
いろいろカスタマイズ を覚えて、PC表示をカード型にしはじめた頃。
スマホは普通の記事一覧。
ヘッダー画像がとても気に入っていたのですが、ライフスタイルブログっぽくなってしまったのと、画像が多すぎて何となくダサ（特にPC）！
と思って、引き算カスタマイズ に取り組んだのでした。
直近
テーマ「UNDER SHIRT」に変更する直前のデザインです。
これもシンプルでとても気に入っておりました。
テーマストアを覗きにいかなかったら、ずっとこのままだったと思います。
現在
テーマ「UNDER SHIRT」をインストールしてカスタマイズ した後。
特にスマホからの見た目がお気に入りです！
あとがき
ブログのカスタマイズが楽しくて、プロフィール記事の趣味欄に「ブログのカスタマイズ」も追加してしまいました（笑）。
新テーマのカスタマイズが無事に終わり、ようやく来週から旅行記を再開できそうです。
Instagramもずっと投稿をお休みしておりましたが、こちらもボチボチ再開しようと思います。
数あるブログの中から、当ブログ「¡ El Blanco !（エル ブランコ）」を訪れていただきありがとうございました。
また、読者登録をしていただきありがとうございます。
Madoriでした (´ｰ｀)
