ノン太郎の徒然日記

ゲームやパソコン関連など買ったものをのんびりと紹介したいなぁと思います。

レスポンシブデザインって難しいなぁ・・

こんばんは!ノン太郎です。

ブログのデザインを変えました!

お気付きかも知れませんが、この度ブログのデザインを変えてみました。

事の発端は前々から記事がノッペリしてて少し見辛いなと感じていたこと。
そして、どうしても文章にまとまりがないと言うか区切りを付けるのが難しいなと感じていたこと。

f:id:nontaro19711021:20180120222016p:plain

じゃあその原因は何なのだろうかと他の方のブログを色々と参考にして考えた結果!
見出しがないんじゃね?
そう見出しと言うか文章の区切りがないことが悪いのではないかと考えました。

他の方々はとても見やすい文章で、パートパートで区切られていて読みやすい。
ノン太郎のブログも見出しを付けて、文章を区切ったら読みやすくなるのではないか?と言う訳で前回の記事から見出しを付けてみました♪

nontaro19711021.hatenablog.com

見出しだけでは終わらない・・・

勉強不足でした。

元々文章力のないノン太郎なので、大して中身のない記事なのですが見た目だけでもメリハリが付いて少し見やすくなったかな?
とちょっと機嫌良くなってたんですが・・・。

スマホの「はてなブログ」アプリで見てみると・・・
見出しが反映されていない!?Σ( ̄ロ ̄lll)ガーン

ノン太郎はかな~~~り昔にHTMLをそのまま打ってホームページを作っていたことがあります。
もう何十年も昔。(;^_^A

それこそ今では当たり前のCSSなんて全く使われていない時代。
時代に取り残された化石の如く・・・全く知識がありません。

はてなブログの設定

でも実はこのはてなブログにはブログを書く為の便利な機能が色々とあります。
今回、色々と設定を変えてみて遊んで、もとい勉強させて頂きました。

f:id:nontaro19711021:20180120222919p:plain

はてなブログ「デザイン」設定スマホマークがあるのをご存知でしょうか?
え?そんなの今更何言ってんの?って・・・( ̄▽ ̄;)

まぁまぁ知らなかったことにしてください。(笑)

その中に「詳細設定」って言うのがあって「レスポンシブデザイン」チェックボックスがありました。
「何々?スマホにPCのデザインを反映させることが出来るとな?」
試しにポチッと設定して保存・・・そしてスマホアプリで確認!!

あれ?変わっていない・・・。( ̄▽ ̄;)
そのままレスポンシブデザインをONにするだけではダメでした。

レスポンシブデザインって何!?

実はノン太郎。「レスポンシブデザイン」と言う言葉を聞いたのは初めて。
つい先日までSE兼プログラマーをしていたくせに・・・です。お恥ずかしい。orz

まぁ基本的にデザイン関連はデザイン会社に外注してたので、ノン太郎は直接関与していなかったと言い訳もしたいとこですが。(笑)

それはさて置き「レスポンシブデザイン」とはじゃあ一体何なの!?って話です。

Wikipadiaによれば「閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。」とのこと。
レスポンシブウェブデザイン - Wikipedia

んー・・・要するにどんな画面サイズでもデザインを崩さずに表示する方法ってことやけど、どないしたらええんやろ?

f:id:nontaro19711021:20180120224559p:plain

ん?よく見たら設定のとこに「詳細」ってとこがある。ポチッ。

help.hatenablog.com

はてなブログのヘルプみたいなのが表示されました。

ほうほう、「テーマ」の「CSS」にResponsive: yesと一文追加すれば良いのだな?

f:id:nontaro19711021:20180121011351p:plain

ちゅうことで「デザインCSSResponsive: yesを追記。

再度スマホアプリで確認。
おおおっ!!反映されとる!!
けど・・・小っちぇぇぇっ!!!!Σ( ̄ロ ̄lll)

そう単純にResponsive: yesだけ追記してもサイト全体が縮小されて全画面で表示されるだけでした。orz
しかも、拡大縮小も出来ず・・・( ノД`)

はてなブログってすごいね

デザインを見直すことに・・・

ふむぅ・・・CSSは奥が深いと言うか難しいな。orz
「レスポンシブデザイン」なんてどうすればええんや!?

ここはGoogle先生に頼るしかない!と更にググって調べること数時間。(笑)

これって・・・CSSを一から書いてデザインを「レスポンシブデザイン」に合わせて作らないとあかんってことかっ!?Σ( ̄ロ ̄lll)ガーン

そう元々ノン太郎が使っていたはてなブログの「テーマ」「レスポンシブデザイン」に対応していないものだったのです!(ちなみに使っていたのはBordeaux)

でもでも!流石はてなブログ!!
ちゃんと「レスポンシブデザイン」に対応したテーマも用意されていました♪
それで早速使ってみたところ・・・コレジャナイ!!

「レスポンシブデザイン」って基本的にどんな端末でもどんな解像度でも同じように見せる手法。
つまりはあまり複雑なデザインだと対応しきれないってことで極力シンプルなものが多い訳です。

まぁそれならそんなに複雑でなくてもええかぁと思っていたのですが、ノン太郎が唯一望んだ表示のものが見当たらない。
それは(パソコンで)過去記事とかプロフィールとかおすすめリンクとかのリンク集を右横に表示したいと言うもの。

でも最初から用意されていたテーマで「レスポンシブデザイン」に対応したものには望んでいたものはありませんでした。orz

テーマ ストア!

テーマを物色して見つけました。

f:id:nontaro19711021:20180120231328p:plain

「テーマ ストア」!!
そうはてなブログの先輩方はブログテーマを作って公開されているのです。
「ストア」と言うからには有料なのかな・・・と思って覗いてみたところ無料のものがかなりの数、公開されています。

その多くの中から色々とテーマを探してみると、ノン太郎の要望にピッタリのものがありました♪
その名も「Minimalism」(codomisu様作)。

hitsuzi.hatenablog.com

現時点で一番人気のようです。

早速テーマを設定して、背景やら何やら変更して・・・。
とまぁやっとのこと今のデザインになりましたと♪

まとめ

何とも勉強不足と言いますか、知識不足のノン太郎だった訳ですが、いやぁ奥が深いと言うか難しいですね。
まぁ見出しやフォントとかちょっと触る分には、そこまで難しくなくて少しググれば出来るので怖がらずにチャレンジすることですね!

その前にノン太郎はもっと文章力を付けろって話ですけどね。(笑)

同じようにデザインについて困っている方のちょっとしたヒントになればなぁと思いつつ、結局は他力本願のノン太郎だったのでした。ちゃんちゃん♪(;^_^A