今日も今日とてOZISANの日記

OZISANのブログが少しでも皆さんの役に立てれば幸いです

【はてなブログ】テーマを決めてブログをお洒落に設定する方法【初心者ブロガーその3】

先輩のブログって本当にかっこいいし、かわいくてOZISANもあんなブログにしたいなーと思うんですが、難しいんだろうなーと。相当勉強しないと無理だろーなーと。


f:id:OZISAN401:20210515230150j:image
なんて思ってたらはてなブログの中に『テーマ』を発見。これならOZISANでもかっこ良くて見やすいブログが作れるかもと思い挑戦してみました💥

 

 

 

〈テーマを選ぶ〉

まずは基本設定のデザインをクリック

f:id:OZISAN401:20210510012622j:plain

 

左上側の公式テーマから好みのテーマを決めてみましょう。

f:id:OZISAN401:20210510013331j:plain

〈公式テーマ〉

いくつか公式テーマの例を挙げてみます

terminal

f:id:OZISAN401:20210510013540j:plain

 

B!KUMA

f:id:OZISAN401:20210510013543j:plain

 

Skull wings

f:id:OZISAN401:20210510013536j:plain

 

寿司ゆき

f:id:OZISAN401:20210510013527j:plain

 テーマが決まったら「変更を保存する」をクリックして完了です。

 

〈テーマストア〉

公式テーマに気に入ったテーマがない方は下にスクロールするとテーマストアから探す事ができます

f:id:OZISAN401:20210510012626j:plain

人気順や新着順も豊富に用意されています

f:id:OZISAN401:20210510021613j:plain

 

 

 

好きなテーマを選び「プレビューしてインストール」をクリック

適用するブログを選択します。

f:id:OZISAN401:20210510021420j:plain

プレビューしてみて問題なければ「このテーマをインストール」して完了です。

f:id:OZISAN401:20210510021426j:plain

 

 

 これでOZISANのブログもオシャレになって、また一歩成長したなと思っていたら大問題発生😱何故かスマホで見た時にせっかく選んだテーマが反映されてない💦

なぜ?頭を抱えながら調べていくとスマホで反映させるのに一工夫必要な事が分かりました🧐

 

〈スマホで選んだテーマを反映させる方法〉

 

デザインをクリック

f:id:OZISAN401:20210510012622j:plain

「カスタマイズ」を選んで{}デザインCSSをクリック

f:id:OZISAN401:20210510014815j:plain

 

デザインCSSの一番上に先ほど選んだテーマの記述があるので、その下に「/* Responsive: yes */」と入力

f:id:OZISAN401:20210508172257j:plain

 

カスタマイズの右の「スマートフォン」を選び「詳細設定」からレスポンシブデザインにチェックを入れる

f:id:OZISAN401:20210508172447j:plain

 

以上でスマホで見た時もちゃんとテーマが反映されるようになります😆

 

〈まとめ〉

スマホで反映されなかった時はちょっとOZISAN焦りましたが今回もなんとか出来ました😅

スマホで反映させるには設定が必要です🤔

テーマを反映させれるようになると一気に見栄えが良くなってテンション上がりますね。

見る側も格段に見やすくなりますので是非お気に入りのテーマを見つけてみてください🙄

これからブログを作る方は参考にしていただけると幸いです🥺

これからも出来るだけ分かりやすく解説頑張りますので宜しくお願い致します😌