読者です 読者をやめる 読者になる 読者になる

CaramelTrip

家族で海外を旅するフリーランス・プログラマーのログ

「はてなブログ」にbootstrapを導入しました!何をするかというと・・・。

bootstrap

bootstrap

bootstrapを導入しましたぁ。

bootstrapは色んなとこでディスられますが私は好きです。

今回何がしたいかと言いますと、広告をレスポンシブ対応にしたかったんですよ。

あと、ページネイション。次のページへ飛ばすやつ。それだけ。

理由

広告のレスポンシブ対応

私のブログの広告は「記事の下」に300✕250の広告枠を2つ並べてます。

これを、

  • PCとタブレットなら横並びに。 f:id:parsetree:20170106204421p:plain

    ※安心して下さい!これは画像です。


  • スマホだったら縦に並びに。 f:id:parsetree:20170106204432p:plain

    ※安心して下さい!これは画像です。


こんな風にしたかったんですよ。

で、Bootstrapが楽なんですよね、cssとかでやるとメンドクサイので。

他にもBootsrap使えるようになれば、ボタンとか色の設定とかテーブルとか地味に便利です。


ページネイション

こんなやつです。

f:id:parsetree:20170106204458p:plain

※安心して下さい!これは画像です。


先日連載みたいな記事を書いたので、繋げたかったんですよね。

「次へ」みないに。

ページネイションは本来、動的に作成するものですが、今回はゴリゴリ手作業で追加しました。

こちらがページネイションを繋げた記事です。

Minecraft Hour of Code | マインクラフトで子供にプログラミング? - CaramelTrip


bootstrap導入

はてなブログの場合、bootstrapをCDNで導入するのが1番簡単です。

以下の本家のページです。

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には他にも色々と機能があるので便利。 → 他にも共有できそうなものを使った際にはご紹介します。

是非、みなさんも試してみて下さい。


あたなにオススメの記事

tonari-it.com

websae.net

qiita.com

qiita.com