bootstrap
bootstrapを導入しましたぁ。
bootstrapは色んなとこでディスられますが私は好きです。
今回何がしたいかと言いますと、広告をレスポンシブ対応にしたかったんですよ。
あと、ページネイション。次のページへ飛ばすやつ。それだけ。
理由
広告のレスポンシブ対応
私のブログの広告は「記事の下」に300✕250の広告枠を２つ並べてます。
これを、
PCとタブレットなら横並びに。
※安心して下さい！これは画像です。
スマホだったら縦に並びに。
※安心して下さい！これは画像です。
こんな風にしたかったんですよ。
で、Bootstrapが楽なんですよね、cssとかでやるとメンドクサイので。
他にもBootsrap使えるようになれば、ボタンとか色の設定とかテーブルとか地味に便利です。
ページネイション
こんなやつです。
※安心して下さい！これは画像です。
先日連載みたいな記事を書いたので、繋げたかったんですよね。
「次へ」みないに。
ページネイションは本来、動的に作成するものですが、今回はゴリゴリ手作業で追加しました。
こちらがページネイションを繋げた記事です。
Minecraft Hour of Code | マインクラフトで子供にプログラミング？ - CaramelTrip
bootstrap導入
はてなブログの場合、bootstrapをCDNで導入するのが１番簡単です。
以下の本家のページです。
http://getbootstrap.com/getting-started/#download-cdn
本家は英語なので、やり方を載せときます。
はてなブログ管理画面から『設定 > 詳細設定 > headerに要素を追加』に以下を追加して下さい。
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
これで保存すれば、ちょっと古いですがbootstrap3が使えるようになります。
以前にご紹介したFontawesomeと同じでメッチャ簡単です。
gridシステム
bootstrapにはGridシステムというメチャメチャ便利なシステムがあります。
コレです。
https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
これを使うと簡単にレスポンシブ対応できます。
PCから、タブレットから、スマホからのアクセスに合わせてレイアウトを変更してくれます。
今回追加したもの
広告のレスポンシブは、みなさんも簡単に設置できます。
「意味わかんない」とか「メンドクサイですけど」という人達のために、コピペで設定できるよう、自分がやった設定を載せておきます。
ページネイションの方はゴリゴリHTMLを書いててスマートじゃないので非公開とします。
もし、必要な方がいればコメント下さいませ。
さて、冒頭に書きましたが、今回自分が設定したのは以下のような設定です。
記事下の2つの広告を、
PCとタブレットなら横並びに
スマホだったら縦に並びに
する設定です。
はてなブログ管理画面から『デザイン > スパナマーク > 記事 > 記事下』に以下のHTMLコピペして下さい。
<div class="row">
<div class="col-sm-6 col-xs-12">
<!-- 左の広告 -->
</div>
<div class="col-sm-6 col-xs-12">
<!-- 右の広告 -->
</div>
</div>
あとは、以下の設定をご自分の環境に合わせて設置して下さい。
→ 左側に表示される広告を貼り付け
→ 右側に表示される広告を貼り付け
あとは、「実機」か「Google developer tool」で確認してみて下さい。
まとめ
はてなブログにbootstrapを適用するのは簡単(古いので良ければ)
gridシステムを使えば簡単にレスポンシブ対応できる。
bootstrapには他にも色々と機能があるので便利。 → 他にも共有できそうなものを使った際にはご紹介します。
是非、みなさんも試してみて下さい。