deCo..boCo..

でこぼこな人生。もっと楽しく…。

WordPress風なデザインでレスポンシブデビュー!?テーマを活かす5つのこと【はてなブログ,Spirea】

f:id:nishi244455666:20170929134914p:plain

「レスポンシブデザインにしてみたいけど、よく分からない…。」

「仕組みが複雑で、うまく表示されない…。」

「興味はあるけど、手をつけていない…。」

今回の記事はそんな悩みを抱える方に向けた記事となっています。

本記事を読み終えた頃には、貴方のブログは晴れて『レスポンシブデビュー』となりますので、どうか最後までお付き合い下さい。

なお、レスポンシブWebデザインのメリットやデメリットについては多くのブロガー様が解説しているので本記事では割愛させていただきます。

では早速完成予想図からご覧ください!

デバイス毎の完成予想図!

今回は参考画像を筆者が運営・管理している別のブログより切り抜いてご紹介していきます。

PCでの表示

f:id:nishi244455666:20170929140237p:plain

スマホでの表示

今回はiPhone8Plusを例に挙げます。

画面の横幅のポイント数がPCより少ないので『ヘッダ画像の表示領域』と『ナビ』が変化しています。

f:id:nishi244455666:20170929140625p:plain

 

一方で同じ端末で馴染みのある縦画面表示をすると、更にヘッダ画像の表示領域が狭まります。

また記事一覧画面も『2列⇒1列』に表示を変えています。

f:id:nishi244455666:20170929140547p:plain

タブレット端末での表示

蛇足ですが…一応タブレット端末での表示例も掲載しておきます。

f:id:nishi244455666:20170929141509p:plain

それでは完成予想図に近づくように、一緒にブログをカスタマイズしていきましょう!

画像ではなく実際に見たい方は、以下のリンクからどうぞ!もし良ければ読者登録もよろしくお願いしますね…笑

 

ブログテーマ【Spirea】

と言いいましても、当方Webデザイナーでもクリエイターでもありません。(ただのおっさん看護師…)

使い勝手が良いと評判のブログテーマ【Spirea】のテーマを利用し、作者のshun様が公開しているカスタマイズ記事を参考にしています。

www.ituore.com

【Spirea】のインストールはこちら!

この先の内容はこの【Spirea】の利用を前提とします。

まずはブログの基礎を作っていきましょう。

私はshun様の記事から次の項目を参考にし、ブログの骨組みを組みました。

  • ヘッダー周辺
  • ブログタイトル背景色・文字色
  • グローバルメニュー
  • SNSフォロー付き検索ボックス
  • 記事タイトル周辺

f:id:nishi244455666:20170929144901p:plain

shun様の記事にある5つの項目を参考にし、基本となるデザインが完成しました。

それではこの基本となるデザインに、少しずつ手を加え自分色に染めていきましょう!

PC・タブレット版カスタマイズ

レスポンシブデザインを目指していますが、まずは比較的大きなデバイスであるPCやタブレット端末向けのカスタマイズをしていきましょう!

背景色の変更

f:id:nishi244455666:20170929145921p:plain

ブログ全体の背景色を変更するには、以下のコードを『デザインCSS』にコピペします。

画像で見ると地味な変化ですが、実際は見た目の印象がかなり変化します。もちろん任意のカラーコードに差し替えることで背景色を変更できます。

ブログタイトル、説明文のフォント変更

f:id:nishi244455666:20170929152134p:plain

こちらも同様に以下のコードを『デザインCSS』にコピペします。

今回はWebフォントであるグーグルフォントを使用して見た目の印象を変えてみましたが、お好きなフォントに差し替えても表示されます。

(注意)グーグルフォントはコピペだけでは表示・反映されません。導入方法は以下の記事をご参照ください。

www.decoboco-life.com

ヘッダー画像の挿入

f:id:nishi244455666:20170929152042p:plain

こちらも『デザインCSS』にコピペします。

ヘッダーに使いたい画像を別途用意する必要があります。

画像のサイズですが、横幅1920pxに合わせることでPC画面いっぱいに表示可能です。一方で高さはお好きなpxに調整してください。参考画像では1920*270の画像を使用しています。

ブログタイトルや説明文のフォントサイズによっては高さが合わない場合もありますが、コード内7行目の『padding』の値を変えて微調整してください。

検索ボックスを非表示

f:id:nishi244455666:20170929154058p:plain

こちらも『デザインCSS』にコピペします。

『筆者が一度も検索ボックスを使用したことが無い』

『後述するスマホでの閲覧時に画面を占有してしまう』

以上の理由により検索ボックスを非表示にしました。

2~6行目のコードは非表示にしたスペースにSNSフォローボタンを配置するものです。

カード風記事一覧ページ

f:id:nishi244455666:20170929160319p:plain

FacebookやTwitterなどにブログをアップした時のようなカード風の記事一覧ページです。

まずは以下のスクリプトコードを『ヘッダ>タイトル下』にコピペします。

このスクリプトが無いと、指定された位置にサムネ画像を表示できませんので必ず挿入してください!

続いて、以下のコードを『 デザインCSS』にコピペします。

この段階までくると、デフォルトのはてなブログの面影はなく、WordPressに負けないようなスタイリッシュなデザインになると思います。(個人の感想です)

また『10行目のwidthの値を49%⇒32%』に変更すると…。

f:id:nishi244455666:20170929161202p:plain

一応3列にカスタマイズすることも出来ます。

ですが3列表示のサムネイル画像の大きさでは、SNSでの投稿時に表示されるブログカードとの相性が良くないので筆者はお勧めしません。

 

スマホ版カスタマイズ

さてすっかり忘れていたレスポンシブWebデザインですが…実は ここまでの作業で土台はほぼ出来上がっているのです。

PCやタブレット端末とスマホで異なる表示をしたい場合は、上記のコードで挟んであげればいいのです。

説明がよく分からない人も、一緒にカスタマイズしていきましょう!

ブログタイトル・説明文

「PCではインパクトのある大きさで表示したいけど、スマホでは画面に収まるように小さめに表示したい…」

そんな時は以下のコードを『デザインCSS』に付け加えます。

サンプルではデバイスの横幅が767px以下の場合にのみ適応されるという条件付けをしています。

つまり767px以下のデバイスでブログタイトルのフォントサイズを変更したい場合は『5行目』、説明文のフォントサイズの場合は『15行目』の値を変更する事で表示を変えることが出来ます。

記事一覧ページ

ブログカード風にデザインした記事一覧ページも、このままレスポンシブブログとして運用すると…。

f:id:nishi244455666:20170929163604p:plain

画像のように2列になってくれるのは良いですが、サムネイル画像が崩れブログカード風のデザインではなくなってしまいます。

スマホの縦表示では『2列⇒1列』に変更することで、見た目の崩れ感を回避することが出来ます。

以下のコードを『デザインCSS』にコピペしてください。

コードをコピペすると…。

f:id:nishi244455666:20170929164446p:plain

画像のように1列に表示する事が出来て、見た目もブログカード風を維持できます。

最大サイズを565pxにしたのは、iPhone5の横向き表示での閲覧をカバーしたかった事が理由として挙げられます。

iPhone5の画面サイズは320x568pxなので、最大サイズをそれ以下に設定する必要がありました。

f:id:nishi244455666:20170929165143p:plain

ただ、完全にはカバーしきれず少しサムネイル画像が崩れてしまいましたが…。

多くの皆さんが機種変更することを祈ります…笑

最後に。

完成予想図のようなデザインになったでしょうか?

本記事はshun様が作った素晴らしいテーマに、ただ付け加えただけなのですが…。

ブログデザインはその人の個性が出ると考えていますので、自分流にアレンジしてみてくださいね!

伝え忘れましたが『レスポンシブデザイン』を反映させる為の設定をしてくださいね。

f:id:nishi244455666:20170930184459p:plain

個性的なブログデザインを求めて…。

deCo..boCo..でした!