幸せの見つけ方

日々の幸せをシェアし、一人でも多くの人を幸せにし、子どもたちが安心して暮らせる社会をつくるブログ

はてなブログのテーマをシンプルな「Undershirt」に変更しカスタマイズしました

スポンサーリンク

f:id:plus_ten:20190318210152j:plain

どうも、ぷらてんです。

 

既にお気づきになっているひともいるかもしれませんが、ブログテーマを変更しました。

それに合わせて、前々から違和感のあったアイコンも変更したので大幅リニューアルと言っても良いでしょう。

 

今回はテーマ変更やカスタマイズの際に大変お世話になったサイトをご紹介したいと思います。

 

 

スポンサーリンク

?

テーマを変更した理由

これまで使用していたテーマは「Naked」でしたが、知識がとぼしいブログ開始当初から使っていたので、ほとんどCSSなどいじっていませんでした。

 

その後、これとは別にWordPressで特化サイトを運営するようになったのですが、そこで導入した有料テーマの「SANGO」がとても気に入り、こちらの個人ブログもデザインもこりたくなってきたのです。

 

そのときに偶然出会ったのがスミカさんのブログでした。

 

もう衝撃でしたね。

デザインセンスが良すぎて。

 

ご自身で描いていらっしゃるイラストから色使いまですべてがドンピシャで、やっぱりプロってスゴイなって思いました。

 

f:id:plus_ten:20190318202737p:plain

スミカさんは
元グラフィックデザイナーです

 

そして、こちらの記事で書かれているようにスミカさんが使っているテーマが今回私が採用した「Undershirt」でした。

 

www.8-sumica-8.com

 

はっきり言って、今回のブログデザインはスミカさんの影響受けまくりです。

弱小ブログゆえ、どうかお許しください(汗)

 

本当にそれくらい衝撃的だったということです。

 

ついでにアイコンも変更

このタイミングで前から変更したいとおもっていたアイコンも変えました。

 

f:id:plus_ten:20190319062416p:plain

 

だいぶちがいますよね!

 

ブログをはじめる前に「アイコンは実写がいい」みたいな意見を見たんですよね。

信用度がちがうとかで。

 

でも当時はまだ働いていたので「顔出しはちょっと…」と思いポリゴン風に加工してつかっていました。

 

でも、「幸せな暮らし~」とか「子育てが~」とかいう記事をこんなイカツイ顔で言われても違和感ありますよね?

 

タイトルをはめてみたらわかりやすいです。

 

f:id:plus_ten:20190318202737p:plain

幸せの見つけ方

 

だと、何かゆるい感じがして「こっちまで肩の力が抜けそうだなぁ」って思ってもらえる気がします。

 

f:id:plus_ten:20190318221302p:plain

幸せの見つけ方

 

一方でこっちだと、「お前だれだよ!」「宗教かよ!」ってなりません?

 

私の勝手なイメージだと、プログラミングとかガジェットを紹介するようなIT系ブログならこの手のアイコンもマッチすると思うんですよね。

 

過去の記事を見れば全部直したくなるのと一緒で、知識がない状態で運営していたブログって本当におそまつ…。

 

ようやくリフレッシュできて気持ちがいいです。

 

カスタマイズしたところ

今まで手を出してこなかったカスタマイズも色々やりました。

コードを1からつくる技術はないので、ほとんどコピペ。

 

たいへん多くのブログを参考にさせていただきましたので、厚い感謝の意をこめてもれなくご紹介させていただきます。

  • タイトルヘッダー
  • グローバルナビ設置
  • グローバルナビ下のテキストリンク
  • カード型アイキャッチの見た目
  • スマホ版の記事2列表示
  • フッター
  • サイドバーのフォローボタン
  • 見出し
  • 目次の表示範囲
  • 吹き出し
  • 蛍光マーカー

 

タイトルヘッダー

変更したのはこの部分です。

 

f:id:plus_ten:20190319124059j:plain

 

タイトルのテキストを非表示にし画像をのせ、高さを調整しました。

参考にさせていただいたのは、こちらのサイトです。

 

blog.minimal-green.com

 

グローバルナビ設置

グローバルナビとはタイトルヘッダー下の青いカテゴリ部分です。

 

f:id:plus_ten:20190319124837j:plain

 

スマホ表示では2列になるようにしました。

そのためカテゴリが偶数になるよう整理し名称も少し変えています。

参考にさせていただいたのは、こちらのサイトです。

 

gakublog.com

 

グローバルナビ下のテキストリンク

SANGOの機能としてもそなわっているグローバルナビ下のテキストリンクを追加しました。

先ほどのグローバルナビのすぐ下にあるグレーの帯部分です。

 

f:id:plus_ten:20190319130158j:plain

 

参考にさせていただいたのは、こちらのサイトです。

 

www.oheya-migaru.com

 

注目して欲しいトピックをのせると効果的なので、いまのところ特にネタのない私はブログ村のランキングをのせています。

 

f:id:plus_ten:20190318202737p:plain

「幸せな暮らし」カテゴリで
4~5位をうろついています

 

カード型アイキャッチの見た目

トップページに表示されるカード型アイキャッチの見た目を変更しています。

具体的には記事の詳細とスターを非表示にしました。

 

f:id:plus_ten:20190319185329j:plain


 

とてもスッキリして良い感じ。

参考にさせていただいたのは、再びこちらのサイトです。

 

www.oheya-migaru.com

 

が、しかし!

一発で先ほどの画像のようにキレイに表示されたわけではありません。

 

つづいてアイキャッチに設定した画像が見切れるという問題が発生しました。

BEFORE・AFTERはこのようになります。

 

f:id:plus_ten:20190319134529j:plain

 

はてなブログの仕様で自動的にトリミングされるようですが、自分の意図したとおりに表示された方がだんぜん良い!

 

参考にさせていただいたのは、こちらのサイトです。

 

www.okuni.me

 

私の場合CSSは設定しなくても問題なく表示されたので、javaのみ設定しました。

 

ただしホーム画面は問題ないのですが、グローバルナビから各カテゴリのまとめページに移動すると再びアイキャッチが見切れます。

 

オークニズムさんのサイトも同様の問題が生じているので、どうしようもありませんでした。

解決方法がわかるひとがいましたら、教えていただけるとうれしいです。

 

f:id:plus_ten:20190318202737p:plain

javaScriptがからむと完全にお手上げです

 

スマホ版の記事2列表示

テーマの標準設定だとスマホで見た場合、記事が1列に表示されます。

これをPCと同じ2列表示に変更しました。

 

f:id:plus_ten:20190319140437j:plain


このカスタム方法は「Undershirt」の開発者rokuzeudonさんのページで公開されています。

 

blog.rokuzeudon.com

 

フッター

標準設定だとフッターに何も表示されませんので、コピーライトを表示させました。

参考にさせていただいたのは、こちらのサイトです。

 

blog.minimal-green.com

 

サイドバーのフォローボタン

今まで手付かずだったサイドバーも今回はしっかりとカスタムしました。

フォローボタンもそのひとつです。

 

f:id:plus_ten:20190319145124j:plain

 

参考にさせていただいたのは、こちらのサイトです。

 

www.ituore.com

 

ただし私の場合、文字の前に表示されるはずのアイコン(Font Awesome)がなぜか表示されませんでした。

 

これはこれでシンプルなのでOK!

 

見出し

サイトのバランスを考えて見出しのデザインを変更しました。

参考にさせていただいたのは、こちらのサイトです。

 

saruwakakun.com

 

目次の表示範囲

今まで目次にはすべての見出しが表示されていましたが、3階層以降を非表示にしました。

 

f:id:plus_ten:20190319151643j:plain

 

目次全体の[表示/非表示]を切り替える方法もありますが、個人的には目次はよく使うので常に表示していた方が良いと思っています。

 

ただしダラダラ長いと非表示にしたくなる気持ちもわかるので、3階層以降を非表示にすることにしました。

 

参考にさせていただいたのは、こちらのサイトです。

 

focus3.hatenablog.com

 

吹き出し

SANGOでもたいへんお世話になっているLINE風の吹き出しにも挑戦しました。

 

f:id:plus_ten:20190318202737p:plain

さきほどから使っている
コレです

 

吹き出しで多くのひとが参考にしているのが、こちらのサイト。

 

www.notitle-weblog.com

 

しかし、私も実践してみましたがなぜかうまく表示されませんでした。

最終的に参考にさせていただいたのは、こちらのサイトです。

 

saruwakakun.com

 

こまったときのサルワカさん

SANGOでも本当にお世話になっています。

 

サルワカさんの吹き出しデザインにお気に入りポイントは、文字の短さに応じて吹き出し自体も短くなるところ。

 

一方で、左右の吹き出しで会話風にしようとすると相手のアイコンが表示されないので、私がやろうとしていた「娘との会話をLINE風吹き出しで表現する」というのは残念ながらかないませんでした。

 

左右ともアイコンが使えて、文字の短さにあわせて長短する吹き出しのつくり方をご存知のかたはぜひとも教えてください。

 

蛍光マーカー

これもSANGOでよく使っている蛍光マーカー表示です。

特に強調したい部分につかうと目を引きます。

 

参考にさせていただいたのは、こちらのサイトです。

 

maroharu16.hatenablog.com

 

まとめ

これらの変更をだいたい2日くらいで集中して行いました。

スミカさんをはじめとする多くの先輩方のサイトがなければ、私だけの力ではとうてい無理でしたし、恐ろしいほど時間がかかっていたはずです。

 

本当にありがとうございました。

 

私も諸先輩方のようなひとの役に立てるサイトをがんばってつくっていきたいと思います。

 

まだまだ細かい部分の修正は必要ですし、これから過去記事をすべて見直してリライトしていく予定です。

 

そしてこのたび妻には「おはるさん」、娘には「海(うみ)ちゃん」という愛称をつけることにしました。

 

f:id:plus_ten:20190319182539p:plain

おはるです

 

f:id:plus_ten:20190319182542p:plain

海だよ

 

今まで「妻」とか「娘」とよんで無機質な感じでしたので、めでたしめでたし。

どうぞこれからも私たち3家族のことをよろしくお願いします。

 

今日も世界中で幸せな出来事が起きますように。