(cache)【はてなブログ】超初心者でもできたブログテーマ変更とカスタマイズ一挙公開！minimalismからSOHOへ

こんにちは！sakuです。

ご訪問ありがとうございます☆

今回は前回に引き続きカスタマイズについてです。

今回は内容盛りだくさんとなっています。目次長っ！

レスポンシブテーマ"minimalism"から"SOHO"へブログテーマ変更
カスタマイズの前にすべきこと、注意点
- バックアップ
- 混在コンテンツ
超初心者でもできるカスタマイズ

レスポンシブテーマ"minimalism"から"SOHO"へブログテーマ変更

www.sacoo1a.com

前回の記事のとおり、超初心者の私が意を決してブログテーマの変更をしてみました。

「HTMLとは？CSSって？」とワケワカメな私でもどうにか形になりました。

これも親切丁寧にカスタマイズ方法を公開してくださっている先輩方のおかげです。

ありがとうございます☆

※掲載に関して不都合がございましたらご連絡頂けたらと思います。

以下、今回のブログテーマ変更に伴って行ったカスタマイズ方法を参考サイトとともにご紹介します♪

カスタマイズの前にすべきこと、注意点

バックアップ

ブログテーマ変更の際、私は今回テスト用ブログ（自分のみ公開）を作っていろいろ試してみました。

テスト用をつくることは公開しているメインブログのバックアップにもなります！

テスト用なのでカスタマイズを失敗しても公開されないので、やっちまったー！という後悔は起きません♪

もっと早くこの方法に気づけば良かったと思いました。。。

参考サイト▶

はてなブログカスタマイズ初心者こそ使って欲しい、テスト用ブログのススメ - FOXISM

デザインCSSのバックアップは別途必要です！メモなどに残しておきましょう！

混在コンテンツ

超初心者ですので、カスタマイズは基本「コピペでOK！」を中心に使用しています。

ただ参考にさせて頂いたコードの中には、HTTPS化に伴いHTTPが混在されてしまうことがあるので、気を付けながらコピペしました。

HTTPとなっているコードはHTTPSと"S"をつけて対応しました。

気を付けてはいたのですが、変更公開後混在コンテンツがあると読者の方からご指摘を頂きました。

他にもあるかもしれませんが、何かお気づきの点がありましたらご一報いただけると助かりますm(__)m

HTTPS化に伴う対応についても参考サイトをメモ（記事）させて頂きました。

【超初心者】HTTPS化とかカスタマイズに時間がかかってます。混在コンテンツで足止めアフィリエイト。。 - サクラサク〜Simple Lifeに憧れて〜

超初心者でもできるカスタマイズ

それでは早速行ったカスタマイズをご紹介します♪

テーマ及び基本的カスタマイズはこちらの記事をご参照ください▼

カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました - NO TITLE

ヘッダー関係

超簡単なグローバルナビの設置

今回SOHOを選んだ一番の理由が、このグローバルナビです。

カテゴリー整理しなおして階層化したので、きれいなグローバルナビを作りたくなりました。

ただ知識と技術がないので、簡単でシンプルなこちらのテーマにして実装してみました。

デザインテーマ「SOHO」にグローバルナビ(タイトル下のメニュー)を設置 - NO TITLE

このように、親カテゴリーと子カテゴリーのURLと名前を入力して、最後に「コードを生成する」ボタンを押すとコードができて案内の通りヘッダーにコピペすれば簡単に実装できます！

今回私は親カテゴリーの名前の前にアイコンを入れたかったので、URLの前にFont Awesomeのコードを入れました。

例えば、「Life」カテゴリーのコードは、

名前の前に<i>タグで青字のように入力するとアイコンが出るようになります☆

Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

また、SOHOのグローバルナビは英字の方が格好いいかなと思ったので、親カテゴリーは英語表記にしてみました☆

スマホではトグルメニューになり、これまたカッコイイ仕上がりになるのが魅力的です☆

記事上下関係

シェアボタンは保留中

デザインテーマ「SOHO」にシェアボタンを設置 - NO TITLE

SOHOのシェアボタンはモノクロでシンプルでかっこいいのですが、ちょっと変えたかったので採用しませんでした。

minimalismの流れで用意していたシェアボタンがあったのですが、いざとなったら反映されなかったので、今のところデフォルトのままです。

また時間をみながらリベンジするかもしれません。

フォローボタン

記事下にフォローボタンを設置しました。

参考サイト▼

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

「フォローをする」→「＼Follow Me／」にして文字サイズを大きめ(20px)にしました。

以前はインスタグラムを入れていたのですが、最近全然インスタまで手が回らずでいるので、お休み中との意味合いで今回は削除しました。。。

【お知らせ】TwitterとInstagramについて - サクラサク〜Simple Lifeに憧れて〜

アカウントは削除していませんのでフォローは大歓迎です♪

サイドバー関係

プロフィール画像は大きく

ブログテーマ変更の少し前にプロフアイコンを変更していました。

感謝、感謝のブログ開設5カ月。アイコン替えました。 - サクラサク〜Simple Lifeに憧れて〜

とても素敵に作って頂いてお気に入りのアイコンになったので、少し大きく表示したいなと思いました。

参考サイト▼

はてなブログカスタマイズ！プロフィールを目立たせてアピール！ - One step at a time

実際、「画像のサイズはどのくらいにしたらいいの？」と分からなかったのですが、こちらのサイトだと画像サイズから簡単な入力方法まで記載されているので助かりました☆

私は画像を250pxに設定しました。

あとは記事作成でベタ打ちをして、HTMLをコピーしてから、「モジュールを追加」でタイトルを「プロフィール」にして、HTMLをペーストして適用すれば反映されました☆

ちなみに、元々のプロフィール欄は削除しました。

これに伴い自己紹介文も変えました♪

フォローボタンとお問合せ

デフォルトのプロフィール欄を削除したので、プロフィールの下にフォローボタン、その下にお問合せを配置しました。

フォローボタンは先ほどのサイドバーバージョンを実装しています。

問合せフォームはGoogleフォームを使用しています。

Twitterの方が早めにお返事ができるかと思います＾＾

カテゴリー

サイドバーにもカテゴリーを設置しました。

カテゴリーを整理してから、パンくずリストを表示したり、子カテゴリーの表示・非表示ができるカスタマイズを行いました。

参考サイト▼

【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ

カテゴリーの階層化についてとても詳しく記載されていて簡単にできました☆

おかげさまで、スッキリとしているけれど分かりやすいカテゴリー欄になりました☆

ランランラン♪

記事を見やすくさせるカスタマイズ

見出し

当ブログのテーマカラーは桜ということもあり、ピンクを基調としています☆

参考サイト▼

はじめ、そのままコピペしていたら、テーマの見出しと重なってしまいました。汗。

２の記事を参照すると「見出しのリセット」が必要とのことでしたので、各見出しのコードの前にリセットコードを入力したらキレイに実装できました☆

カラーの変更箇所なども分かりやすく記載されていて助かりました。

引用符

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

サルワカさんのデザインはどれも魅力的です◎

カエレバ・ヨメレバ・トマレバ

以前は

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Lifeのコードを利用させて頂いていましたが、対応するショップが少なかったので、今回はカエレバ・ヨメレバ・トマレバが一括してカスタマイズできるコードを使わせて頂きました▶

CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]

吹き出し

これ、一度やってみたかったのです

アイコンを変えたのを機会に設定してみました♪

参考サイト▼

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE

これも適当なサイズが分からなかったので、テキトーに縮小して収まるようにしました。

私は100pxに設定した後、画像URLをコピペして作成しました☆

ただちょっと画像が荒いですね。。。

文字サイズ・行間

前回のminimalismテーマで感じていたことですが、文字が小さく読みずらかった。。

これはぜひとも改善したいと思い、カスタマイズしました☆

はじめ、

.entry-content p {
font-size:□□px;

と、文字サイズだけ18pxにして公開したのですが、スマホで見ると反映されているところとしていないところがありました。

レスポンシブテーマでどうにかならないかと検索していたら、見つけました▼

【はてなブログ】レスポンシブデザインでもスマホの文字の大きさを変える方法|コピペで簡単！ - マジPEACE。

早速実装させて頂いたら、スマホも均等な文字サイズになりました♪

ちなみに、文字サイズは16px、行間は1.5emで設定してみました。

蛍光マーカー

はてなブログで2色の蛍光ペンで文字を強調する方法！【コピペ一発】 - Web Tips!!!

私は「見たまま編集」バージョンを使用させて頂いています。

ただ、私だけでしょうか・・・「B」を押してもピンクマーカーにならないんですよね。。。

「I」のイエローマーカーでも事足りてるからいいかなと思ってはいるのですが、ちょっとモヤモヤが残ります。。

CSSが反映されない

前テーマから悩んでいたことなのですが、ある日を境にカスタマイズをしたくてもCSSが反映されない現象が起きていました。

症状としては、CSSコードを入力してプレビューをすると画面上部に入力したCSSの文字列がブヮー！と出てしまう。。。

なんじゃこりゃー！

と、もうてんてこ舞いに。なんでか原因が分からなくて調べても思うようなサイトは見つからず、もうこれ以上のカスタマイズはできないんだと諦めかけておりました。

しかし、今回のテーマ変更をしていく中でふと原因のあるコードを発見しました！

それが、蛍光マーカーのコードです。

蛍光マーカーのコードを入力した後、別のカスタマイズしたいコードを入力すると先ほどの現象が起きるというのに気づきました。

蛍光マーカーのコードの何がどうだからどうなんだ？と詳しいことは分からないのですが、[!important;]というのが、なんだか強いんですかね？

対策としては、蛍光マーカーのコードの前にカスタマイズしたいCSSコードを入力させるということでなんとか形になりました。

CSSが効かない・反映されないときの対処法まとめを参考にすると、[!important;]はなるべく使わないと記述されているところがありました。

キャッシュを削除すれば解消されるのかなど、ちょっと難しくて試してはいないのですが同じような現象で悩まれている方の参考になればと思います。

ボックスデザイン

シンプルなボックスデザインは

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30のbox1を使ってみました。

カラーをグレーに抑えめにしました。

こんなかんじです

今後やってみたいカスタマイズ

ヘッダー画像の編集

ただいまヘッダーはテキストだけなのですが、いつか素敵なヘッダー画像ができたらいいなと夢見ておりますｗ

たまにcanvaというアプリで作成を試みてはいるのですがね。やればやるほどブログ名を変えたくなってしまいますｗ

Canva - 画像加工 & デザイン

開発元:Canva

無料

posted withアプリーチ

画像に影や枠

SOHOにしたら、PCだと自動的に画像に影が入ってるようなのですが、スマホだと入らない。。。

何かが足りていないのかしら？ちょっと分からないので保留してます。

どなたか教えて頂けたら嬉しいです

更新日の設定

投稿日の隣に更新日が表示されるカスタマイズをしたいのですが、うまく実装できず保留中です。

参考サイト▼

更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください – つばさのーと

AMPにしていないので、サイトマップバージョンで試みたのですが、うまくいかず。。。

おわりに

ざっとではありますが、以上が今回カスタマイズした内容と参考サイトです。

カスタマイズの「カ」の字も分かっていない超初心者でもここまで形になりました☆

冒頭と重複しますが、公開されている先輩方のおかげです☆ありがとうございます！

とても愛着のあるブログになりました。

これを機に今後も精進してまいります！

これからもよろしくお願いいたします