はてなブログテーマ【Under Shirt】に変更して行ったカスタマイズまとめ

この「Under Shirt」にテーマを変更すると、パソコンでは記事一覧が2列表示、スマホでは1列表示になります。スマホでは1列表示にしたい方にオススメのテーマです。

私はスマホで1列表示に出来るはてなブログのテーマを探していました。そんな時に「Under Shirt」を知り、「よし、変更しよう！」と思い立ちました。スマホから見た自分のブログがたまらないほど気に入っています。本当に最高。 では、早速カスタマイズしたことをまとめていきます。

テーマ変更を「UnderShirt」に変更する

ろくぜうどんさん(id:rokuzeudon)が作った、はてなブログのテーマ「UnderShirt」を使わせていただきました。やっぱりせっかくこのブログに来てくれた人に「このブログ見やすい」とか「このブログ読みやすい」と思ってほしいので、頑張りました。

テーマ変更後はこんな感じ

▼ パソコンから見たDIY BLOG In Nagasaki

▼ スマホから見たDIY BLOG In Nagasaki

このテーマの凄いオススメなところが、スマホでは1列表示のカード型に表示されること。サイドバーが下に表示される1カラムのデザイン。かつお洒落なカード型。ほとんどスマホのブログデザインは1カラムが多いです。ついつい私も憧れちゃいました。

そこで、パソコンでもスマホでも、記事を2列表示に出来るZENO-TEALは珍しい。更に、かっこよくて素敵。しかし、デザインを変えたくてうずうずしてきてしまい、変更しちゃいました。 ▼ こちらからテーマインストール出来るページに飛べます。 UnderShirt – テーマ ストア

「Under Shirt」のDEMOサイト

DEMOサイトをご覧いただけたら、自分のブログがどんな感じになるのかの大体のイメージが分かるので、是非参考にしてみてください。 このDEMOサイトを見て、もうね、すぐに一目惚れです。テーマに恋しちゃった感じ。すんごい素敵。 ▼ DEMOサイト thumbnail.hatenablog.com かなりシンプルですが、この整ったデザイン。ブログを開く度に幸せな気持ちになっています。 ▼ ろくぜうどんさんが「Under Shirt」について詳しく書かれている記事です。 blog.rokuzeudon.com アイキャッチ画像の表示についても詳しく書かれていたので参考にしながら、どうしようか考え中です。 はてなブログの仕様で、アイキャッチ画像の真ん中の正方形の部分が抜かれるらしいので、画質も荒くなってしまいます。どうにか自分で良い方法考えてみます。 あんまりにも分からなかったから、ろくぜうどんさんに聞きます。(迷惑なので、必死に対策考えます。)

はてなブログのテーマを変更するには

はてなブログのテーマを変更する方法を説明します。

▼ 管理画面のデザインをクリック

▼ 下へスクロールして『テーマストアでテーマを探す』をクリック

▼ テーマストアから探していきます。下へスクロールします。

▼ 新着テーマの所にありました。『UNDER SHIRT』をクリック。

▼ この画面になったら『プレビューしてインストール』をクリック。

▼ どんな感じになるのかプレビューが表示されます。確認して『このテーマをインストール』をクリック。

以上でテーマを変更することができます。「そんなの知ってるよ！」って人は、本当ごめんなさい。
簡単にテーマを変更することが出来ます。しかし、バックアップを取っていないと今までのCSSが全て消えてしまうので注意が必要です。
見出しなどのカスタマイズをしている人も注意。見出しだけでなくシェアボタンやフォローボタンもCSSに入力していたら消えてしまいます。
必ずメモなどに保存しておいて下さい。最初からまた変更する！という方は良いかもしれませんが、大変ですよね。

テーマを変更して行ったカスタマイズ

テーマを変更してから行ったカスタマイズを紹介します。CSSを直接デザインCSSに打って行ったカスタマイズから。
もっと良いCSSがあるかもしれませんので、もしも「もっと良い方法あるよ！」と思った方は教えてくれると助かります。

トップページの記事一覧形式を変更する

記事一覧トップページを角丸に

サイドバーの背景色変更

記事一覧ページのみはてなスターを消す

▼ 記事一覧ページのみはてなスターを消すのに参考にさせていただきました。
naruhesogoma.net
記事一覧のみスターを消すCSSをデザインCSSに追加しました。

ヘッダー下メニュー

ヘッダー下のメニューはZENO-TEALのメニューを引き継いでおります。
zeno-teal.hatenablog.com
ZENO-TEALも大好きだったので、ZENO-TEALでスマホの記事一覧を1列表示にしたかったのですが、上手くいかなかったのです。
flexboxとかをいじるのかな？とか色々ネットで検索して調べましたが、まだまだCSSの知識が無いので、悩んでおりました。うーん難しい。flexboxを極めたら凄いことになりそう。
そんな時に、UnderShirtを知り、プレビューしてみたら、スマホで1列表示になっていたので、思い切ってテーマを変更することにしました。
ちなみにflexboxについて調べたら、

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。
引用元：これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス

簡単にレイアウトできる素敵なボックスとのこと。
いつかは私もflexboxを使いこなせるようになりたいので、サルワカさんのWebデザイン入門でゆっくり学んでいこうと思います。
▼ HTMLとCSSを勉強する時は、サルワカさんのWebデザイン入門が分かりやすい。
saruwakakun.com

シェアボタンを変更

シェアボタンは色々変更させていただいていますが、フォローボタンとシェアボタンのデザインが統一されたデザインにしたいと考えています。
しかし、自分で考えることはまだ出来ないので、色々と参考にさせていただきました。
▼ コピペしただけで簡単にシェアボタンの設置が出来ました。
www.minamisouju.com
何をやっても円の中心にアイコンが来ないので変更。私がいじくったCSSに問題があると思います。ページを検証することを覚えたのですが、まだ全然分からないので、勉強が必要です。
▼ 現在はこちらのシェアボタンを使わせていただいております。
webgaku.hateblo.jp
▼ このサイトのシェアボタンがすごくお洒落だけど　はてブボタンの入れ方が分からない。
sole-color-blog.com

アドセンスの広告を貼る位置に悩む

アドセンスの広告をブログのどこに貼るのか？と一時期悩んでいました。記事中ならば、どこに貼れば読んでくれる人が嫌な気持ちしないかなとか。
▼ 記事中に自動挿入するのに参考にさせていただきました。
english-apple-diy.hatenablog.com
どこに貼ろうかと悩んでいる方も、イラストで分かりやすいのでおすすめです。
私は最終的に、最初の大見出しの前に1つと、真ん中の見出し前に1つ自動で貼っています。あとは、たまに長い記事だけに手動で1つ入れたりします。あまりやっていませんが。
▼ パソコンではダブルレクタングルにしていましたが、display:noneで消す方法は規約違反だと教えていただき、直ちに修正しました。
www.mamegoro.com
パソコンはパソコン、スマホはスマホが良いとはずっと思っていたのですが、なかなか自分では分からず。そのまま記事下に1つだけ広告を貼っていました。
しかし、パソコンで記事下広告はダブルレクタングルがおすすめだと知り、全然しっかり考えていなかったと反省。
ダブルレクタングルというのは、パソコンの記事下にレクタングルを2つ並べて貼ること。
パソコンで見ると、記事下に広告が2つ並んでいます。そして、スマホで表示すると広告が1つになりました。
2018年2月24日追記 

display:noneで消すと規約違反だと豆ゴロさんに教えていただき、直ちに修正。記事下はレスポンシブ広告をパソコンでは2つ、スマホでは1つ表示。レスポンシブの広告を貼っており、display:noneを消しました。豆ゴロさんの教えてくれている記事の通りに貼り付けなおしました。最近横ズレが発生してしまったので、今は記事下は1つだけにしました。

▼ サイドバーにアドセンスを貼る時に参考にさせていただきました。
blogkasutamaizu.hatenablog.com
ただスマホから見ると、サイドバーからはみ出していたので、レスポンシブの小さい広告に変えました。レスポンシブ リンクというタイプの広告です。また色々考えて変更するかもしれません。

記事一覧ページのタイトル下の本文を消す

▼ 記事一覧ページの本文を消したかったので、ろくぜうどんさんの記事を参考にしました。
blog.rokuzeudon.com
▼ アイキャッチ画像の下に『続きを読む』を入れています。

アイキャッチ画像→続きを読む→冒頭文の順で記事を作成しています。
▼ トップページを見ると、アイキャッチ画像や続きを読むの順番の違いで表示が変わることが分かる。

上はアイキャッチ画像→続きを読む→冒頭文、下はアイキャッチ画像→冒頭文→続きを読むの順で作成しています。

▼ スマホから見ても本文非表示に出来てます！

SPECIAL THANKS !

私、いつも助けてもらってばかりです。私が困っている時に手を貸してくれた人を紹介したい。

豆ゴロさん

▼ ずっと前から仲良しの豆ゴロさんのBLOG
www.mamegoro.com
1列表示で悩んでいる時に、1列表示に訂正してくれたCSSを送ってくれて、本当に優しい豆ゴロさん。
しかし、おかしい所を自力で直せずに、ごめんなさい。豆ゴロさんが考えてくれたCSSはずっと保存して、またZENO-TEALに戻ったときに使わせていただきます。
ブログを始めた当初から仲良しの豆ゴロさん。本当に助かりました。困っていた私を気にしてくれた気持ちも嬉しいです。

豆ゴロさん、これからも応援しています。

ろくぜうどんさん

▼ ろぐぜうどんさんのブログ デザインが素敵すぎる。
blog.rokuzeudon.com
「Under Shirt」を作ったご本人様です。
おいおい、本当に聞いたのかよ！と思いますよね。私も迷惑とは思いながら、お聞きしました。
サイドバーのプロフィールだげ短いのが気になっていて。どうしても分からず、ろくぜうどんさんに直接お聞きしたら、私のサイドバーのプロフィールのhtmlがおかしいよと教えていただきました。
変な所にdivというhtmlが入っていたようです。すぐ直りました。助かりました。本当にありがとうございます。

お忙しい中、本当に本当に助かりましたっ！

 助けてもらってばかりいつかお礼したい

出典:ワンピース 十巻182P

こんな感じです。自分に出来ることは自分で一生懸命やる。けれど、誰かの助けがなかったらカスタマイズ出来ていなかったです。
ありがとうございました。私も助けてくれる人へ力になりたいので、何でも言ってくださいね。

おわりに

「Under Shirt」は最高だよっていうお話でした。

最後までご覧いただき、ありがとうございました。]]>