皆さまこんにちは！今日ははてなブログのテーマやデザインを大幅に変更したので、記事にしてまとめていきます。
今回私が変更したテーマは「Under Shirt」です。デザインがスッキリしていて、かつ素敵なテーマです。是非皆さまも試してみてください。思わず一目惚れしてしまうようなデザインですよ。
この「Under Shirt」にテーマを変更すると、パソコンでは記事一覧が2列表示、スマホでは1列表示になります。スマホでは1列表示にしたい方にオススメのテーマです。
私はスマホで1列表示に出来るはてなブログのテーマを探していました。そんな時に「Under Shirt」を知り、「よし、変更しよう！」と思い立ちました。スマホから見た自分のブログがたまらないほど気に入っています。本当に最高。
では、早速カスタマイズしたことをまとめていきます。
テーマ変更を「UnderShirt」に変更する
ろくぜうどんさん(id:rokuzeudon)が作った、はてなブログのテーマ「UnderShirt」を使わせていただきました。やっぱりせっかくこのブログに来てくれた人に「このブログ見やすい」とか「このブログ読みやすい」と思ってほしいので、頑張りました。
SPONSORED LINK
テーマ変更後はこんな感じ
▼ パソコンから見たDIY BLOG In Nagasaki
▼ スマホから見たDIY BLOG In Nagasaki
このテーマの凄いオススメなところが、スマホでは1列表示のカード型に表示されること。サイドバーが下に表示される1カラムのデザイン。かつお洒落なカード型。ほとんどスマホのブログデザインは1カラムが多いです。ついつい私も憧れちゃいました。
そこで、パソコンでもスマホでも、記事を2列表示に出来るZENO-TEALは珍しい。更に、かっこよくて素敵。しかし、デザインを変えたくてうずうずしてきてしまい、変更しちゃいました。
▼ こちらからテーマインストール出来るページに飛べます。
「Under Shirt」のDEMOサイト
DEMOサイトをご覧いただけたら、自分のブログがどんな感じになるのかの大体のイメージが分かるので、是非参考にしてみてください。
このDEMOサイトを見て、もうね、すぐに一目惚れです。テーマに恋しちゃった感じ。すんごい素敵。
▼ DEMOサイト
かなりシンプルですが、この整ったデザイン。ブログを開く度に幸せな気持ちになっています。
▼ ろくぜうどんさんが「Under Shirt」について詳しく書かれている記事です。
アイキャッチ画像の表示についても詳しく書かれていたので参考にしながら、どうしようか考え中です。
はてなブログの仕様で、アイキャッチ画像の真ん中の正方形の部分が抜かれるらしいので、画質も荒くなってしまいます。どうにか自分で良い方法考えてみます。
あんまりにも分からなかったから、ろくぜうどんさんに聞きます。(迷惑なので、必死に対策考えます。)
はてなブログのテーマを変更するには
はてなブログのテーマを変更する方法を説明します。
インストールする前に、必ずサブブログで試してみたり、バックアップを取っておきましょう。
▼ 管理画面のデザインをクリック
▼ 下へスクロールして『テーマストアでテーマを探す』をクリック
▼ テーマストアから探していきます。下へスクロールします。
▼ 新着テーマの所にありました。『UNDER SHIRT』をクリック。
▼ この画面になったら『プレビューしてインストール』をクリック。
▼ どんな感じになるのかプレビューが表示されます。確認して『このテーマをインストール』をクリック。
以上でテーマを変更することができます。「そんなの知ってるよ！」って人は、本当ごめんなさい。
簡単にテーマを変更することが出来ます。しかし、バックアップを取っていないと今までのCSSが全て消えてしまうので注意が必要です。
見出しなどのカスタマイズをしている人も注意。見出しだけでなくシェアボタンやフォローボタンもCSSに入力していたら消えてしまいます。
必ずメモなどに保存しておいて下さい。最初からまた変更する！という方は良いかもしれませんが、大変ですよね。
テーマを変更して行ったカスタマイズ
テーマを変更してから行ったカスタマイズを紹介します。CSSを直接デザインCSSに打って行ったカスタマイズから。
もっと良いCSSがあるかもしれませんので、もしも「もっと良い方法あるよ！」と思った方は教えてくれると助かります。
トップページの記事一覧形式を変更する
まずは設定→詳細設定→トップページの表示形式（PC版）→一覧形式にチェックを入れて変更するを押します。
記事一覧トップページを角丸に
| /* 記事一覧角丸にする */ | |
| .page-index .archive-entry { border-radius: 10px;} | |
| .page-index .entry-thumb { border-radius:10px 10px 0 0;} /* 画像を角丸に */ |
サイドバーの背景色変更
| .hatena-module {background: #fff;} /* fffを変えると色が変わる */ |
記事一覧ページのみはてなスターを消す
▼ 記事一覧ページのみはてなスターを消すのに参考にさせていただきました。
記事一覧のみスターを消すCSSをデザインCSSに追加しました。
| /* 記事一覧スター消す */ | |
| .star-container {display:none;} |
ヘッダー下メニュー
ヘッダー下のメニューはZENO-TEALのメニューを引き継いでおります。
ZENO-TEALも大好きだったので、ZENO-TEALでスマホの記事一覧を1列表示にしたかったのですが、上手くいかなかったのです。
flexboxとかをいじるのかな？とか色々ネットで検索して調べましたが、まだまだCSSの知識が無いので、悩んでおりました。うーん難しい。flexboxを極めたら凄いことになりそう。
そんな時に、UnderShirtを知り、プレビューしてみたら、スマホで1列表示になっていたので、思い切ってテーマを変更することにしました。
ちなみにflexboxについて調べたら、
FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。
簡単にレイアウトできる素敵なボックスとのこと。
いつかは私もflexboxを使いこなせるようになりたいので、サルワカさんのWebデザイン入門でゆっくり学んでいこうと思います。
▼ HTMLとCSSを勉強する時は、サルワカさんのWebデザイン入門が分かりやすい。
SPONSORED LINK
シェアボタンを変更
シェアボタンは色々変更させていただいていますが、フォローボタンとシェアボタンのデザインが統一されたデザインにしたいと考えています。
しかし、自分で考えることはまだ出来ないので、色々と参考にさせていただきました。
▼ コピペしただけで簡単にシェアボタンの設置が出来ました。
何をやっても円の中心にアイコンが来ないので変更。私がいじくったCSSに問題があると思います。ページを検証することを覚えたのですが、まだ全然分からないので、勉強が必要です。
▼ 現在はこちらのシェアボタンを使わせていただいております。
▼ このサイトのシェアボタンがすごくお洒落だけど はてブボタンの入れ方が分からない。
アドセンスの広告を貼る位置に悩む
アドセンスの広告をブログのどこに貼るのか？と一時期悩んでいました。記事中ならば、どこに貼れば読んでくれる人が嫌な気持ちしないかなとか。
▼ 記事中に自動挿入するのに参考にさせていただきました。
english-apple-diy.hatenablog.com
どこに貼ろうかと悩んでいる方も、イラストで分かりやすいのでおすすめです。
私は最終的に、最初の大見出しの前に1つと、真ん中の見出し前に1つ自動で貼っています。あとは、たまに長い記事だけに手動で1つ入れたりします。あまりやっていませんが。
▼ パソコンはダブルレクタングル、スマホはレスポンシブに設定するのに参考にさせていただきました。
パソコンはパソコン、スマホはスマホが良いとはずっと思っていたのですが、なかなか自分では分からず。そのまま記事下に1つだけ広告を貼っていました。
しかし、パソコンで記事下広告はダブルレクタングルがおすすめだと知り、全然しっかり考えていなかったと反省。
ダブルレクタングルというのは、パソコンの記事下にレクタングルを2つ並べて貼ること。
でも、一体どうやってやるんだろう？と思っていた時に、powerbombkunさんの【Adsense】記事下広告をPCはダブルレクタングル、スマホはレスポンシブにする方法 - ボム君.comに助けられました。
パソコンで見ると、記事下に広告が2つ並んでいます。そして、スマホで表示すると広告が1つになりました。
▼ サイドバーにアドセンスを貼る時に参考にさせていただきました。
blogkasutamaizu.hatenablog.com
ただスマホから見ると、サイドバーからはみ出していたので、レスポンシブの小さい広告に変えました。レスポンシブ リンクというタイプの広告です。また色々考えて変更するかもしれません。
記事一覧ページのタイトル下の本文を消す
▼ 記事一覧ページの本文を消したかったので、ろくぜうどんさんの記事を参考にしました。
▼ アイキャッチ画像の下に『続きを読む』を入れています。
アイキャッチ画像→続きを読む→冒頭文の順で記事を作成しています。
▼ トップページを見ると、アイキャッチ画像や続きを読むの順番の違いで表示が変わることが分かる。
上はアイキャッチ画像→続きを読む→冒頭文、下はアイキャッチ画像→冒頭文→続きを読むの順で作成しています。
本文をトップページに表示したくない場合は、アイキャッチ画像の下に続きを読むを入れましょう。
▼ スマホから見ても本文非表示に出来てます！
SPECIAL THANKS !
私、いつも助けてもらってばかりです。私が困っている時に手を貸してくれた人を紹介したい。
たにやん
▼ たにやんのBLOG。
もう皆さん仲良しなのはお分かりだと思いますが、カスタマイズでもたにやんにお世話になっていました。たにやんは、私のブログの管理者なので、何かあったら見てもらっています。優しい。
管理者になってもらうということは、ブログの全てを管理できる権限を渡しているということ。もしも、権限を渡したい人がいる時は、信用できる人にお願いしないといけません。アクセス解析など全てを管理者は見れてしまいます。
以前、ZENO-TEALのカスタマイズに困っていた時は、真っ先に相談しました。すると、忙しいのにも関わらず、速攻でCSSを修正してくれました。本当にありがとうございます。
DIYでもいつも助けられております。DIYの知識も豊富で、経験者でもあるたにやん。いつも迷惑かけてばかりなんだけど、細かいカスタマイズもDIYも、分からなくなったらいつもお聞きしています。
私がたにやんの立場なら、いっつも聞いてきて迷惑な人やなって思うんだけど。たまに怒るけど（そこもいい）、ちゃんと教えてくれて、本当に優しいよね。
本当にありがとうございます。いつも迷惑なみっぷうですが、めげずに今度はDIYのこと教えていただくつもりです。テーマ変更しちゃって申し訳ないのですが、たにやんが考えてくれたCSSは一生とっておきます。
豆ゴロさん
▼ ずっと前から仲良しの豆ゴロさんのBLOG
1列表示で悩んでいる時に、1列表示に訂正してくれたCSSを送ってくれて、本当に優しい豆ゴロさん。
しかし、おかしい所を自力で直せずに、ごめんなさい。豆ゴロさんが考えてくれたCSSはずっと保存して、またZENO-TEALに戻ったときに使わせていただきます。
ブログを始めた当初から仲良しの豆ゴロさん。本当に助かりました。困っていた私を気にしてくれた気持ちも嬉しいです。
豆ゴロさん、これからも応援しています。
ろくぜうどんさん
▼ ろぐぜうどんさんのブログ デザインが素敵すぎる。
「Under Shirt」を作ったご本人様です。
おいおい、本当に聞いたのかよ！と思いますよね。私も迷惑とは思いながら、お聞きしました。
サイドバーのプロフィールだげ短いのが気になっていて。どうしても分からず、ろくぜうどんさんに直接お聞きしたら、私のサイドバーのプロフィールのhtmlがおかしいよと教えていただきました。
変な所にdivというhtmlが入っていたようです。すぐ直りました。助かりました。本当にありがとうございます。
お忙しい中、本当に本当に助かりましたっ！
助けてもらってばかりいつかお礼したい
出典:ワンピース 十巻182P
こんな感じです。自分に出来ることは自分で一生懸命やる。けれど、誰かの助けがなかったらカスタマイズ出来ていなかったです。
ありがとうございました。私も助けてくれる人へ力になりたいので、何でも言ってくださいね。
おわりに
「Under Shirt」は最高だよっていうお話でした。
最後までご覧いただき、ありがとうございました。