OILOG

lifestyle - botanical - gadjetなブログ。

iPhoneホーム画面ウィジェット対応の天気予報アプリまとめ!【iOS14】

iOS14_iPhoneホーム画面ウィジェット対応の天気予報アプリまとめ

どうも、oioi(@oioi0815)です。

2020年9月17日、AppleよりiOS14が正式にリリースされました。皆さんは既にアップデートしましたでしょうか?

今回のアップデートでは、ウィジェット機能が刷新され、このようにホーム画面にもウィジェットを表示できるようになりました。(私は画面上部に世界時計と天気予報を表示させています。)

iOS14_iPhoneのホーム画面

天気予報やニュース、株価など、既にiOS14に対応しているアプリなら、ホーム画面にもウィジェットを追加できるようになっています。

この記事では、「天気予報アプリ」にフォーカスして、iOS14対応済みの"ホーム画面に天気情報を表示できるアプリ"をご紹介します!

 

iOS14ウィジェット対応の天気予報アプリ3選

ウェザーニュース

まずはこちら、「ウェザーニュース」です。

ウェザーニュース

ウェザーニュース

  • Weathernews Inc.
  • 天気
  • 無料

 ウェザーニュースは、

  • 気温と天気
  • 雨雲レーダー

の2種類をホーム画面に表示させることができます。

ウェザーニュースをウィジェットとしてホーム画面に配置する際のプレビューがこちら。どちらも、小・中・大の3サイズから選択することができます。

-気温と天気-

ウェザーニュース_ウィジェット_気温と天気

-雨雲レーダー-

ウェザーニュース_ウィジェット_雨雲レーダー

サイズの種類が豊富のため、自分のホーム画面に合わせて表示するサイズを自由に選ぶことができます。 

 

Yahoo!天気

もう一つは「Yahoo!天気」です。

Yahoo!天気

Yahoo!天気

  • Yahoo Japan Corp.
  • 天気
  • 無料

 

 Yahoo!天気は、

  • 現在の天気
  • 天気予報
  • 雨雲レーダー

の3種類をホーム画面に表示させることができます。

Yahoo!天気をウィジェットとしてホーム画面に配置する際のプレビューがこちら。サイズについては、現在の天気と天気予報は小サイズのみ、雨雲レーダーは小・中サイズのみとなっています。

Yahoo!天気_ウィジェット

 

Widgetsmith

3つ目はこちら。ウィジェットスミスというアプリです。

Widgetsmith

Widgetsmith

  • Cross Forward Consulting, LLC
  • 仕事効率化
  • 無料

 こちらは、天気予報専用アプリではなく、カレンダー・世界時計・写真など、複数の機能の中から自由にカスタマイズしてホーム画面に登録することができるウィジェットに特化したアプリです。

しかし、無料では天気予報をウィジェットに追加することができず、現在は月200円、もしくは年2100円の課金が必要です。

一応、天気予報の機能があるということで紹介しましたが、海外のアプリであり予報の正確性も保障できないためおすすめはできません。 

 

 

私のおすすめアプリ

f:id:sushimikan:20200925001927j:plain

私が個人的にオススメするアプリは「ウェザーニュース」です!

理由としては、ウィジェットのサイズが小・中・大と豊富な点です。Yahoo!天気は、サイズ大のウィジェットを設定できないため、より詳細な情報をホーム画面に表示させることができません。一方で、ウェザーニュースは天気予報・雨雲レーダーの両方とも全てのサイズがあり、自分のホーム画面に最適なサイズを自由に選ぶことができます。

 

iOS14対応の天気予報アプリはまだ少ない模様。これからに期待!

 iOS14に対応している天気予報アプリはまだ少ない模様。しかし、これから順次iOS14に対応されていくことは間違いないです!また、新しいアプリを発見した場合はこちらの記事に追記していこうと思います。

 それでは本日もご覧いただきありがとうございました。

その他のiPhone関連記事はこちら!

oioiroom.hatenablog.com

oioiroom.hatenablog.com

oioiroom.hatenablog.com

 

【iPhone】iOS14で背面タップが反応しない、できない原因と対処法まとめ!

f:id:sushimikan:20200920185459j:plain

どうも、oioi(@oioi0815)です。

2020年9月17日、AppleよりiOS14が正式にリリースされました。皆さんは既にアップデートしましたでしょうか?

iOS14では、新たに「背面タップ」という機能が追加されました。

しかし、実際にアップデートされた方のツイートを見ると、

といった声を多く見かけます。

そこで、今回の記事では、「iOS14にアップデートしたのに、背面タップ機能が反応しない」といった不具合の対処法をシェアしていきたいと思います。

本記事を最後まで読むことで、

  • 背面タップの設定方法が分からない
  • 対応機種を知りたい
  • iPhoneケースに入れていても機能するの?
  • 背面タップのコツは?

といった疑問を解決することができます。

 

 

「背面タップ」について

どんな機能?

これはiPhoneの背面を2回、もしくは3回指でトントンと叩くと、あらかじめ割り当てた動作を呼び出すことができる機能です。

背面タップに割り当てることができる機能一覧

現在割り当てられる機能は下記になります。

  • アクセシビリティショートカット
  • Appスイッチャー
  • Siri
  • Spotlight
  • コントロールセンター
  • シェイク
  • スクリーンショット
  • ホーム
  • 音量を下げる
  • 音量を上げる
  • 画面をロック
  • 簡易アクセス
  • 消音
  • 通知センター
  • AssistiveTouch
  • VoiceOver
  • ズーム
  • 画面の読み上げ
  • 拡大鏡
  • 反転(クラシック)
  • 反転(スマート)
  • 下にスクロール
  • 上にスクロール
  • 「ショートカット」に設定している動作

背面タップが反応しない不具合の対処法

f:id:sushimikan:20200807003044j:plain

実は、iOS14にアップデートするだけでは、背面タップ機能を使うことはできません。まず初めに「設定」アプリから、背面タップを有効化する必要があります。

手順をざっくり解説すると、

  1. 背面タップの設定画面にアクセス
  2. 背面タップに割り当てる機能を一覧から選択する

といった流れです。

詳細な手順をこれから解説していきます。

 

 

 

手順① 設定→アクセシビリティ→タッチ→背面タップ

まずはホーム画面から「設定」アプリを開きましょう。

f:id:sushimikan:20200920184747j:plain

 

そして、「アクセシビリティ」→「タッチ」→「背面タップ」と進んでいきます。

f:id:sushimikan:20200920184751j:plain

 

f:id:sushimikan:20200920184754j:plain

 

f:id:sushimikan:20200920184758j:plain

 

 

手順② ダブルタップ・トリプルタップにそれぞれ機能を割り当てる

次に、ダブルタップとトリプルタップにそれぞれ機能を割り当てます。

f:id:sushimikan:20200920184801j:plain

それぞれに機能を割り当てたら、背面をタップしてみましょう!!

問題なく機能するはずです。

 

 

 

 

背面タップができる機種とできない機種

f:id:sushimikan:20200920185243j:plain

背面タップができる機種

下記の機種では、iOS14にアップデートし、先ほどご紹介した設定を行うことで背面タップを使用することができます。

  • iPhone 8 / 8 Plus
  • iPhone X
  • iPhone XS / XS Max / XR
  • iPhone 11 / 11 Pro / 11 Pro Max
  • iPhone SE2 (SE 第2世代)
  • iPhone 12 / 12 mini / 12 Pro / 12 Pro Max

※発売順に記載 

 

背面タップができない機種

 下記の機種の場合、背面タップ機能を使用することができないためご注意下さい。

  • iPhone 3G / 3GS
  • iPhone 4 / 4S
  • iPhone 5 / 5c / 5s
  • iPhone 6 / 6 Plus / 6s / 6s Plus
  • iPhone SE(第1世代)
  • iPhone 7 / 7 Plus
  • iPod touch(第7世代)

※発売順に記載 

 

【余談】iPod touch(第7世代)は背面タップが使用できません!

 意外な落とし穴ですが、iPod touch(第7世代)は背面タップを使用することができません!

 iPod touch(第7世代)が発表されたのは2019年5月。iPhoneXS / XRシリーズとiPhone 11シリーズの間に発売された比較的新しい機種であり、背面タップにも対応しているかと思いきや、iPod touch(第7世代)にはこちらの機能は搭載されていないとのことです。

 

 

 

 

iPhoneケースに入れていても背面タップは使えるの?

結論として、ケースに入れていても問題なく背面タップが使えました。

ちなみに私が使用しているケースは、「iFace」という商品です。

こちらのiPhoneXS用を使用しています。しっかりとした丈夫なケースでそこそこ厚みがあるのですが、このケースに入れていてもしっかりと機能してくれます。

iFaceで問題なければ、一般的なケースなら全く心配する必要はなさそうです。

 

 

 

背面タップを上手く反応させるコツ!

実際に背面タップ機能を使ってみて、上手く反応させるコツが分かってきたのでご紹介します。

コツ①:背面上部をタップする

 なるべく、背面の上部をタップしましょう。

 上部をタップした方がより振動が伝わるため、背面タップ機能が反応しやすくなります。

f:id:sushimikan:20201105000438j:plain

 

コツ②:iPhoneの先端を上下に揺らす

 背面を叩いた時の振動で、iPhoneの先端を少し上下に振動させるように意識してみて下さい。基本的に叩いた時の衝撃で、自然と先端が上下するかと思いますが、もし上手くいかないときはiPhoneをやわらかく持ち、意識して上下に振動させてみると反応しやすくなります。

f:id:sushimikan:20201105002106j:plain

 

 

 

私が設定している背面タップの割り当てがこちら

f:id:sushimikan:20200920185502j:plain

私は、

  • ダブルタップに「消音」
  • トリプルタップに「Siri」

を割り当てています。

ダブルタップに割り当てている「消音」とは、いわゆるマナーモードのON/OFFの切り替えのことです。私が使用しているiPhoneXSのマナーモード切替ボタンは左側面の上部についており、片手だとスムーズにON/OFFできないことが小さな悩みでした。

しかし、今では人差し指で背面をトントンと2回叩くだけで、マナーモードに切り替えることができるようになりました。電車などで片手で操作をしているときにマナーモードに切り替えたいと思うことが多々あるので、これから非常に重宝しそうです!

終わりに:iOS14は神アプデ

いかがでしたでしょうか。対処法が分からなかった方の参考になれば幸いです。

個人的にiOS14は神アプデです...!! 様々な機能が追加されたので、OSを更新しただけなのにまるで最新機種を購入したかのような気分になりました。

まだ対応しているアプリが少ないことや、不具合が多いとのうわさもあり、最初はアップデートすることに躊躇しました。しかし、いざアップデートをしてみると、全く不具合もなくむしろより高機能になって快適になりました。

まだアップデートされていない方は試してみることをおすすめします!

それでは本日もご覧いただきありがとうございました。

はてなブログユーザーの皆様、よろしければ読者登録お願いします(^^)

 

その他のiPhone関連記事はこちら!

oioiroom.hatenablog.com

oioiroom.hatenablog.com

oioiroom.hatenablog.com

 

 

ジブリ作品の静止画をiPhoneから高画質でダウンロードできない時の対処法!

風立ちぬ_場面写真

どうも、oioi(@oioi0815)です。

2020年9月18日より、スタジオジブリ公式サイトにてジブリ作品の場面写真の無料提供が開始されました。

www.ghibli.jp

 

Twitterで情報を見つけてこれはすごい!と思い、早速iPhoneからダウンロードしようと試みました。

しかし、なぜかダウンロードできない...

いつもなら画像を長押しして「"写真"に追加」をタップすればアルバムに保存されますよね。ですが、ジブリ作品の画像をタップすると拡大表示され、それを長押ししても何もメニューが出てきませんでした。

iPhone画面

 

 同じ現象で困っている方がたくさんいるようで、

  • 保存ボタンが見つからない
  • 保存しても低画質になってしまう...

といった声をTwitterで多く見かけました。

そこでいろいろ試してみた結果、iPhoneから高画質のままダウンロードする方法を見つけることができたので、今回の記事ではその内容をシェアしたいと思います!

 

 

 

スタジオジブリ作品の場面写真が無料提供開始!

千と千尋の神隠し_場面写真

2020年9月19日時点では、以下の8作品の場面写真が掲載されています。

  • 思い出のマーニー
  • かぐや姫の物語
  • 風立ちぬ
  • コクリコ坂から
  • 借り暮らしのアリエッティ
  • 崖の上のポニョ
  • ゲド戦記
  • 千と千尋の神隠し

【追記】2020年10月16日より、下記6作品の場面写真が追加公開されました。

  • ハウルの動く城
  • 猫の恩返し
  • ギブリーズepisode2
  • ホーホケキョ となりの山田くん
  • もののけ姫
  • 耳をすませば

【追記】2020年11月20日より、下記5作品の場面写真が追加公開されました。

  • 平成狸合戦ぽんぽこ
  • 海がきこえる
  • 紅の豚
  • 魔女の宅急便
  • となりのトトロ

【追記】2020年12月18日より、下記5作品の場面写真が追加公開されました。

  • 風の谷のナウシカ
  • 天空の城ラピュタ
  • おもひでぽろぽろ
  • レッドタートル
  • On Your Mark

 

 2020年9月から12月まで毎月場面写真が公開されてきましたが、12月18日の公開をもって新しい場面写真の更新は終了になるとのことです。

 

公開された場面写真は、その数なんと

  • 計24作品
  • 合計1178枚

 太っ腹すぎやしませんか...?

 

 

常識の範囲内なら自由に使ってOK

下記公式より引用です。

 

スタジオジブリ公式サイトから引用

 

今月からスタジオジブリ全作品の場面写真を順次提供することになりました。今月は、新しい作品を中心に 8作品、合計400枚提供します。

常識の範囲でご自由にお使いください。

 

引用元:今月から、スタジオジブリ作品の場面写真の提供を開始します - スタジオジブリ|STUDIO GHIBLI

 

常識の範囲内ならば自由に使用してもOKとのことです。とてもありがたいですね!

「常識の範囲」という言葉が少しフワッとしていますが、SNSへの投稿やプロフィールのアイコン画像への使用、ジブリファンがブログに貼り付けるくらいなら全く問題なさそうです。

 ただし、画像データを販売したり、Tシャツのようなモノにプリントして販売したり、そういう使い方はNGかなと個人的には思います。

 常識の範囲という個人のモラルに委ねる言い回し、なんだかいいですね。

 

 

 

iPhoneから高画質で静止画をダウンロードする方法

とても簡単なのでサクッと解説いたします。ちなみにiPhone標準ブラウザのsafariを使っていきます。

まずは下記のスタジオジブリ公式サイトにアクセスして、好きな作品をタップして下さい。

今月から、スタジオジブリ作品の場面写真の提供を開始します - スタジオジブリ|STUDIO GHIBLI

 

 

すると、掲載されている画像が一覧表示されます。

ジブリ画像をiPhoneから保存する方法_1

 

次にダウンロードしたい画像を長押し→「新規タブで開く」をタップ。

ここで注意ですが、この画面で「"写真"に追加」をタップすると、低画質の画像が保存されてしまいます。

高画質で欲しい場合は、ひとまず新規タブで開きましょう。

ジブリ画像をiPhoneから保存する方法_2

 

すると、このように画像一枚のみが表示されたページに飛びます。

ジブリ画像をiPhoneから保存する方法_3

③ここで、画像を長押し→「"写真"に追加」をタップしましょう。

ジブリ画像をiPhoneから保存する方法_4

 

これで写真アルバムに高画質の画像が保存されます。

千と千尋の神隠し_場面写真

終わりに

普段からブラウザで画像を保存することがなかったので、最初は保存の仕方が分からず戸惑ってしまいました。ジブリ作品は世代問わずファンが多いと思うので、スマホ操作に慣れていない方などの参考になれば幸いです。

そしていろいろとダウンロードさせて頂きました。

風立ちぬ_場面写真

ゲド戦記_場面写真

千と千尋の神隠し_場面写真

風立ちぬの場面写真、エモくて好きです。これからも毎月順次公開されるということで、とても楽しみです!

それでは本日もご覧いただきありがとうございました。

はてなブログユーザーの皆様、よろしければ読者登録お願いします(^^)

 

その他のiPhone関連記事はこちら!

oioiroom.hatenablog.com

oioiroom.hatenablog.com

 

Amazonベストセラー1位の本でhtml・CSS・Webデザインを勉強します!

どうも、oioi(@oioi0815)です。

本日は私が最近買った本をご紹介します。

それがこちら、

f:id:sushimikan:20200819225837j:plain

 「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」という本です。

 

 

 

この本を購入した理由

①html? CSS?みたいな現状から脱却したい

はてなブログを本格的に始めて約2週間経ちました。思えばあっという間ですね。

最初は突発的にブログを始めてみたいなと思い、無料かつ初心者でも簡単にブログが書けるはてなブログでこの「おいろぐ」をスタートしました。

テキトーな記事を書いていた始めたての頃に比べると、記事の内容だったりブログのデザインだったりが割とそれっぽくなってきていて、過去記事を見返すとちょっと面白いです。

 

で、実際に2週間はてなブログを弄ってみて思ったことと言えば、

凝ったブログデザインにするにはそれなりにコードの知識が必要だということ。

あれ?はてななら簡単じゃなかったの?って思ってしまいました。ただ記事を書いて投稿するだけなら簡単だけど、いろいろデザインをカスタマイズするとなるとちゃんとした専門知識が必要になってくるんですね。

 

現在はこちらの記事にも書いている通り、他サイト様の記事に掲載されているCSSコードをコピペして本ブログのデザインをカスタマイズしています。

oioiroom.hatenablog.com

 しかし私は職人気質なところがあり、やっぱり自分のブログのデザインは自分の好きなようにカスタマイズしたい、ずっとそんな風に思っていました。

そこで、まずは入門知識を習得して、html?CSS?といった現状から脱却することを目標とし、この本で勉強することにしました。

 

②もともとWebデザインには興味があった

 私はカメラだったりガジェットだったり暮らしのモノだったり、日常を変えてくれたり気分を上げたりしてくれるモノが大好きなのですが、そんな私の好きなモノをいつも紹介されているブログがいくつかあるんです。

その中から1つご紹介します。トバログ氏が運営されている「トバログ」です。

tobalog.com

白を基調とした見た目が大好きなブログです。ガジェットだったりミニマルなアイテムだったりを紹介していて、私の物欲をゴリゴリ刺激してきます。

こういうブログを見るたびに、いつか自分でもこんなオシャレなブログを作ってみたいな~と思っていました。

しかし、いざはてなブログで自分のブログを作ってみても、イマイチ納得のいく見た目にすることができず、これを機にWebデザインについても勉強したいと思っていました。

 

③html、CSS、Webデザイン全てを学べるなんて一石三鳥じゃないか。

 私はブログ初心者なので、幅広い入門的な知識を学べる本が欲しいなと思っていました。

そこで見つけたのがこの本です。

なんと、私が学びたかった3つがこの本には書かれているとのこと。

気が付いたら家に届いていました笑

 

 

④Amazonベストセラー1位。レビュー星4.3!

この本はなんと、Amazonのカテゴリ「ホームページ入門書」にてベストセラー1位を獲得しています。

そして計340レビュー書かれているにもかかわらず、その評価はなんと星4.3(2020.8.19現在)

最新のレビューは下記からご確認下さい。

 つまりこの本を購入したほぼすべての人が内容に満足しているということですね。

 実際に僕もパラパラ読みしてみましたが、文章がとても読みやすいです。

また、お手本のサンプルデータ(html、CSSコードなど)をダウンロードして、そのコードを見ながら勉強できるとのこと。プロが作った完成品を見て学習できるのはかなり効果がありそうです。

 

 

⑤著者のManaさんがすごい人

この本を書かれているManaさんの経歴ですが、グラフィックデザイナー→Web制作学校卒業→外国企業でWebデザイナーとして働かれていたようです。

で、ManaさんのWebサイトがこちら。

ja.webcreatormana.com

www.webcreatorbox.com

うーんおしゃれで見やすい!このサイトを作られた方の本ならAmazonベストセラー1位も説得力があります。

ちなみに、上記の「Webクリエイターズボックス」は、2010年の日本のアルファブロガーアワードを受賞されたそうです。

 

 

終わりに:これから勉強がんばります!

なかなかいい買い物をしたなと思っています!自己投資をした後はなんだか強くなった気がする。(気がするだけ。)

本業・プライベートと並行してブログ書いたり勉強したり大変ではありますが、ちょっとずつ勉強して知識を蓄えていきたいですね!

 

ブログデザインのカスタマイズ。「UnderShirt」がシンプル過ぎたのでhtml・CSSを弄ってみた。

f:id:sushimikan:20200818204030j:plain

どうも、oioi(@oioi0815)です。

先日こんな記事を書きました。

oioiroom.hatenablog.com

 「UnderShirt」というはてなブログテーマを使ってみて、良いなと思ったところを紹介した記事です。

シンプルかつ細部に凝っているデザインが個人的にとても好きなのですが、一部不満に思っているところもあるんです。

それが「シンプル過ぎる」という点。

 

今回はこのテーマの不満な点を解消するために私がしているカスタマイズをご紹介します。別に不満に思っているわけじゃないけど、個人的に好き勝手にカスタマイズしているところもせっかくなので書きたいと思います。

 

今回の記事を読むことで、

  • 「UnderShirt」を適用している本ブログのカスタマイズ
  • カスタマイズするためのhtml・CSSコード

を知ることができます。

 

 

 

 

私のブログカスタマイズ

①全体のフォント変更

「UnderShirt」を適用すると、デフォルトのフォントがメイリオになっているかと思います。

私はメイリオよりも游ゴシックの方が好みなので、デザインCSSに下記を記述して変更しています。

 

/*フォントの設定(游ゴシック) */
body {
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS ゴシック", sans-serif;
}

 

もし同じく游ゴシックにしてみたい方は、上記をデザインCSSにコピペしてみて下さい。

 

②目次の装飾

 目次はこちらの記事で紹介されているコードをそのまま使用させてもらっています。

www.kurasitotonoe.com

とても参考になりましたのでぜひご覧になってみて下さい。

現在はこんな感じです。(以前投稿した記事の目次をスクショしました。)

f:id:sushimikan:20200817223814j:plain

"-Contents-"の下の点線などかわいくてお気に入り。

ですが、そのうち自分なりにシンプルかつおしゃれなデザインにアレンジする予定。

 

 

③大見出しの装飾

「UnderShirt」を適用すると、大見出しの装飾がシンプルを追求しすぎていて、大見出しと中見出しの区別がしにくくなってしまいました。

f:id:sushimikan:20200817224304j:plain

 なので、下記記事のコードをそのまま使用させてもらい、装飾を施しています。

saruwakakun.com

こちらの記事のコードを参考にする際にひとつ注意して頂きたいのが、"h1"を"h3"に変更すること。

はてなブログの記事内のいわゆる「大見出し」はh3を使用しています。ちなみにh1はブログタイトルなどに使用されています。

そのため、デザインCSSに記述する際にh1をh3に変更しないと、記事内の大見出しではなく、ブログタイトルに装飾が適用されてしまいます。

 

で、カスタマイズ後がこんな感じ。

f:id:sushimikan:20200817224932j:plain

大見出し文の背景に色をプラスし、左端に縦線を入れて強調しています。だいぶ見出しの区別がハッキリとしました。こちらもそのうち自分なりにアレンジする予定です。

 

 

④ブログタイトルの下にグローバルメニューを表示

記事タイトルの下にカテゴリを表示しているサイト、よく見かけませんか?

本ブログですとこんな感じです。

f:id:sushimikan:20200818194703j:plain

「TOP」「Category」「New post」....などなど横一列に並んでいるかと思います。これをグローバルメニューといいます。

これは「UnderShirt」に限った話ではありませんが、ただテーマを適用しただけではこのように表示させることはできません。少し手間ですが、デザインCSSとヘッダにコードを記述する必要があります。

 

私はこちらの記事で紹介されているコードをお借りしています。

blog.minimal-green.com

 

PC表示だとこんな感じ。「Category」にカーソルを乗せると、本ブログのカテゴリ(暮らしのモノ、ライフハックなど)が浮かび上がってきます。

f:id:sushimikan:20200818195920j:plain

 

 

 

モバイル表示だと、こんな感じで右上にメニューボタンが表示されます。

f:id:sushimikan:20200818200612j:plain

このメニューボタンをタップすると、下記のようにリストが表示されます。プロフィールと各SNSへのリンク、はてなブログの読者登録ボタンもデフォルトで設置されています。めちゃめちゃ便利。(コード作成された方には感謝しかない...!!)

f:id:sushimikan:20200818200632j:plain

 

ちなみに、文字色・背景色などはこのブログの雰囲気に合うように自分なりにいろいろアレンジして使っています。

 

 

まとめ:だいぶブログがおしゃれになった。コードの作成者様に感謝...!!

テーマ「UnderShirt」を適用後はシンプル過ぎて味気の無かった本ブログですが、様々なカスタマイズによりだいぶおしゃれになった気がします。程よくシンプルが個人的にベスト。

今回は私がカスタマイズする際に参考にした記事をいろいろと紹介しました。コードに関する知識があまりない私でも分かりやすいな~と思ったのでよかったら覗いてみて下さい。(というかコピペだけでカスタマイズできるようにしてくれてあるので、知識ゼロでも大丈夫)

コードを公開されている方は他にもたくさんいますので、ぜひ自分好みのデザインを求めて探してみて下さい。コードを勉強して自作しちゃうのもおもしろいですね。

自分のブログに味気なさやダサさを感じている方は、いろいろと弄ってみることをおすすめします!

 

参考になったと思った方は読者登録をして頂けると励みになります。

それでは本日もご覧いただきありがとうございました。

 

 

 

はてなブログテーマ「UnderShirt」の良いところ・おすすめの理由。

f:id:sushimikan:20200817235445j:plain

どうも、oioi(@oioi0815)です。

最近ブログのデザインにもこだわり始めており、色々なテーマを探しては変更、探しては変更を繰り返しています。(コロコロとデザイン変えるやん...と思われている方がいたらすみません)

 

で、最近は「Haruni」や「Roungup」を使っていたのですが、どうもしっくりこないところがあったり。

blog.hatena.ne.jp

blog.hatena.ne.jp

 

そんな中、いろいろと試した末に辿り着いたのが、「UnderShirt」というテーマ。

blog.hatena.ne.jp

 

今回の記事では、

  • はてなブログテーマ「UnderShirt」の良いところ

をご紹介します。

 

 

 

 

「UnderShirt」の気に入っているところ

①シンプルなデザイン

白・黒を基調としたシンプルなデザインが気に入っています。

f:id:sushimikan:20200817221711j:plain

無駄なモノは一切なし。そのおかげで文字・写真がとても見やすいです。

個人的にサイドの「カテゴリ」のところがめっちゃ好き。

f:id:sushimikan:20200817221815j:plain

 

 

②トップページをカード型表示にできる(はてなブログPro限定)

ずっと前からやりたかった「トップページに表示される記事のカード型化」。

「UnderShirt」なら、デザインCSSへの記述など難しい作業は一切必要なく、テーマを適用するだけで2カラムのカード型表示にすることができます。CSSの知識がない方にはとてもオススメです。(私もCSSとかよく分からないのでとても助かっています...!!)

実際にやってみたのがこちら。カードを並べたかのように記事が表示されます。

f:id:sushimikan:20200817222318j:plain

「Minimalism」など、シンプルなデザインの人気テーマは他にもありますが、簡単にカード型表示にできる点が「UnderShirt」を使うメリットです。

ただし注意点なのが、カード型表示にするには、はてなブログProに登録してトップページの表示形式を「全文形式」から「一覧形式」に変更していることが前提となります。

 

 

③アイキャッチ画像がきちんと表示される

冒頭にも書きましたが、「UnderShirt」にするまでは「Haruni」や「Roungup」を使用していました。

で、それぞれの何が気に入らなかったのかというと、モバイルでトップページのアイキャッチ画像がきれいに表示されなかった点です。

こちらが「Haruni」を適用し、iPhoneからトップページを開いた場合。

f:id:sushimikan:20200817234414j:plain

 

こちらが「Roungup」を適用し、iPhoneからトップページを開いた場合。

f:id:sushimikan:20200817234417j:plain

 

こちらが「UnderShirt」を適用し、iPhoneからトップページを開いた場合になります。

f:id:sushimikan:20200817234410j:plain

 

「Haruni」、「Roungup」だと、アイキャッチ画像が見切れてしまっています。

やはりこれだと見栄えがよろしくないため、きちんとしたサイズでアイキャッチを表示してくれる「UnderShirt」に変更しました。

 

 

まとめ:「UnderShirt」はシンプルかつ簡単にカード型表示ができる良テーマ

「UnderShirt」はシンプルなデザインにしたい方には非常におすすめです。

また、カード型の表示も簡単にできるので、初心者の方にもおすすめです。

 ただ、シンプル過ぎなところもあり、私は一部カスタマイズをしています。

これについては後日記事にまとめる予定です。

(8/18追記:後日記事にまとめました。)

oioiroom.hatenablog.com

 

それでは本日もご覧頂きありがとうございました。