I Found It!

今回はBootstrapのグリッドシステムをメインのレイアウト部分に採用する方法について紹介します。まずは、グリッドシステムって何？という話と、メイン部分にグリッドシステムを使うメリットについて、簡単に説明します。 グリッドシステムとは 画面の横幅を等分割した「グリッド」単位でレイアウトを指定することで、画面サイズに応じた柔軟なレイアウトを実現するしくみ、です。画面サイズに応じた、つまりPCサイズとスマホサイズでそれぞれに見やすいレイアウトを実現できるので、レスポンシブデザインにしたい時に使える、というわけです。ですので、スマホはスマホ版テンプレート使う、という方はグリッドシステムを使ってもさほどメリットはないと思います。 今回使用するBootstrapのグリッドシステムはメインレイアウトがグリッドシステムを利用しているということを前提として、入れ子にすることができます。つまり、メイン部分でちゃんとグリッドシステムを利用しておけば、記事部分やサイドバーの中も、柔軟にレイアウトできるようになります。 「グリッド」単位でレイアウトを指定、と言われてもよくわからないと思うので、Bootstrapのグリッドレイアウトで具体的に説明します。 Bootstrapのグリッドシステムについて Bootstrapでは、以前 レスポンシブデザインことはじめ の記事でも紹介したように、画面サイズを次のように分類しています。 xs （~767px） sm （768~991px） md （992~1199px） lg（1200px~） Bootstrapのグリッドシステムではそれぞれの画面サイズで画面幅の1/12を1単位としてレイアウトの幅を指定します。利用方法はこんな感じです。 <div class="container"> ..

スマホ版とＰＣ版を統合してしばらく経ちますが、最近になって「コメントを書く」のフォームがちゃんとレスポンシブになってないことに気が付きました。「スマホ版とPC版を統合する前に確実にレスポンシブ化しておいてください」とか書いてたのに…すみません。ということで、修正しましたのでこちらの方法も紹介します。テンプレートを変更しながら、レスポンシブ化とは別に、いくつか気になった点も修正しました。 今回もレスポンシブ化にはBootstrapを使います。Bootstrapの適用方法については以前紹介した。 レスポンシブデザインことはじめ などを参考にしてください。 変更の前にあらかじめcssとhtmlのバックアップを取っておいてください。 今回作成する「コメントを書く」の入力フォームはこんな感じのデザインにします。 入力フォームはシンプルに、見出しをつけずにplaceholderを使用しています。placeholderというのは入力フィールドに入力すべき項目がうっすら表示されている、あれ、です。なんとなくかっこいい、というのもありますが、スマホサイズにした時、見出しがあると入力フィールドの幅を確保するために縦並びになって入力フォームだけで高さをとってしまうのを避けるために、placeholderを採用しました。以前はjQueryのプラグインを使ったりしてたけど…HTML5でplaceholderが使えるようになって便利になりました。残念ながらIE8、IE9は未対応です。IE8、IE9で、placeholderもどきを表示させるためにスクリプトを追加する、という手もありますが、IE8、IE9ってことはPCなので、placeholderじゃなくても別にいいな、と思い、筆者はIE8、IE9では下記の表示になるようなつくりにしました。 メインレイアウトへのグリッドシ..

数回に分けてＰＣ版テンプレートをレスポンシブ化してスマホ版とＰＣ版を統合する方法を紹介していましたが、レスポンシブ化の途中にウィンドウサイズを小さくすると「このカテゴリーの最新記事」のサムネイル画像がおかしくなったりレイアウトが崩れたりしてたのをすっかり忘れていました。ひとまずコメントアウトして「後で修正しよう」と思ったんだった…。ということで、今回はBootstrapのグリッドシステムという仕組みを使って「このカテゴリーの最新記事」をレスポンシブ表示する方法を紹介したいと思います。完成イメージはサムネイルつきで、スマホサイズではこんな感じになります。 変更の前にあらかじめcssとhtmlのバックアップを取っておいてください。 メインレイアウトへのグリッドシステム適用 Added at 2016/10/29 「このカテゴリーの最新記事」部分にBootstrapのグリッドシステムを使うためにはまずメインレイアウト（メインコンテンツ部分とサイドバーのレイアウト）部分にこのグリッドシステムを使う必要があります。まずメインレイアウトにグリッドシステムを採用する方法 を参考に、メイン部分にグリッドシステムを使うよう変更してください（左右のサイドバーがない場合はid="containter"にcontainerクラスを追加する部分とcontainerのスタイル指定削除部分だけでOKです）。今回は「このカテゴリーの最新記事」部分を入れ子にするためにrowにしていきます。 「このカテゴリーの最新記事」5件を等幅で並べるために 「このカテゴリーの最新記事」では5件の最新記事が表示されます。画面が大きいときは横に5件並べたいですよね。しかし、上記の記事で紹介したBootstrapのグリッドシステムの基準となる12という数字が5で割り切れない！…とい..

スマホ版とPC版を統合する手順を数回に分けて紹介しています。 （これまでの記事） スマホ版とPC版を統合するメリット・デメリット レスポンシブデザインことはじめ 今回は前回適用したBootstrapを使ってグローバルメニューを設置する方法を紹介します。 設置するグローバルメニューはこんな感じです。（上：PCサイズ表示時、中：スマホサイズ表示時、下：スマホメニューオープン時） 画面上部に固定表示される（スクロールしても表示されたまま）ドロップダウンでサブメニューも表示できる画面を小さくするとメニューボタンが表示される Bootstrapであらかじめ用意されているスタイルのメニューバーですが、すっきりしているのでそのまま使われているサイトもよく見かけます。Bootstrapを使ったいい感じの無料テンプレートが入手できるサイトが色々あるので、それを参考にしてさらにカスタマイズすることもできます。ちなみにこのブログのメニューの参考にさせていただいたのが、こちらのテンプレートです。サブメニューを表示できるようにしたり、検索追加したり、もうちょっと変更してます。 Auro - Bootstrap Agency Template cssの変更 画像のようなデフォルトスタイルを使用する場合、cssの変更は基本的には必要ないんですが、筆者が試してみたところ「カスタム01」ではリンクに下線が表示される指定があるので、これを書きかえる必要がありました。（メニューはリンクでできています） 「デザイン > デザイン設定」で、PCの使用中のテンプレートのcss編集リンクをクリックします。cssの最後に下記を追加してください。 .navbar a{ text-decoration:none; } htmlの変更 「..

スマホ版とPC版を統合する手順を数回に分けて紹介しています。 （これまでの記事） スマホ版とPC版を統合するメリット・デメリット 今回はまずレスポンシブデザインを簡単に実現できるフレームワーク、Bootstrapを適用します。これによりレスポンシブ化に便利なクラスが色々使えるようになるので、これを使ってブログの記事ひとつひとつを修正して、最終的にはPCで画面をスマホ並みに小さくしても横スクロールが表示されないところまで変更します。画面が小さくなるとサイドバーを非表示にする変更も一緒に行います。 Bootstrapの適用 まず公式ページのBasic Template を参考に参照を追加します。 Bootstrap公式 「デザイン > html」からhtmlを編集します。htmlを初めて追加する場合は適当な名前で新しくhtmlを追加して、そちらを編集してください。 まず、headのcharset指定の次の行に <meta http-equiv="X-UA-Compatible" content="IE=edge"> を追加してください。これはIEのレンダリングモードの指定で、前回表示時に互換表示を選択されていてもちゃんと最新のIEで表示してね、みたいな指定です。Basic Templateではviewportの指定もしていますが、現時点ではこれはあえて指定しないでおきます。（これを指定するとスマホ版からPC表示された時に縮小表示されなくなって大変なことになります。ある程度レスポンシブ化を進めてから変えます。） 次にBootstrapのcssへの参照を追加します。これもheadに追加しますが、cssでカスタマイズできるように、カスタマイズ用のcssより前に追..

スマホでファンブログを表示すると「PC版を表示」などのリンクが表示されます。これをクリックするとPC版がちっちゃーい文字で表示されるのが以前から気になっていました。まずはこれを見やすくしたい、と思ってＰＣ版のレスポンシブ化を進めていたんですが、それならもうスマホ版はいらないな、と思って統合（スマホで表示する時もＰＣ版を常に表示する）することにしました。 これから数回にわたってスマホ版とPC版を統合するまでの過程を紹介しようと思いますが、あらかじめそのメリット、デメリットを紹介しておこうと思います。 メリット スマホ表示もhtmlを変更できるためデザインの自由度が高い スマホ用のデザイン・コンテンツを別途管理する必要がない 記事本文中でWebフォントが使用できる（スマホ版テンプレートでは表示できない） 投稿時にプレビューでウィンドウサイズを変更すればスマホ版でのレイアウトも確認できる デメリット スマホ版テンプレートで用意されていた機能（メニューなど）を自分で作成しなければならない PC表示向けの大きい画像がある場合にスマホ表示が若干重くなる 記事本文中にWebフォントを使用した場合、ガラケーではやっぱり表示できない 一般的なレスポンシブ化のメリット・デメリットはもっと色々あると思いますが、ファンブログにおいては、という観点で挙げてみました。レスポンシブ化するにあたって、PC版のサイドバーをどう扱うかを考えないといけませんが、筆者は単純に非表示にする方法を紹介します。サイドバーが非表示になってカテゴリーアーカイブが消えてもカテゴリーページに移動できるよう、レスポンシブデザインのグローバルメニューを設置する方法も紹介する予定です。 以上のメリット、デメリットを踏まえた上で、スマホ版とPC版の統合を検討してくださいね。