"妄想ノートなラクガキ帳

04/14

2014

Bootstrap3で当ブログのデザインを一新してみました

webデザイン

コメント:0 TB:2


まぁ、実はかねてよりぼちぼち作っていたのですがw
いよいよ、Bootstrap3でのテンプレートを実用化?という感じでありまして。

これだと何がいいのかというとレスポンシブなのですね。ブラウザウィンドウを小さくしたら、横のサイドバーがなんと自動的に下に消えてくれるのです。これがやりたくて導入を狙っていたわけです…まぁ、直前に作り替えたテンプレートも中々気には入っていたのですが、一度思いついたことはやりたくなるのが人間の性というものでしょう。

かなりBootstrap3に慣れてきたかな〜という感じであります。
テンプレートも1から作り直しましたが、はたしてうまく動くのでありましょうか。
まぁ、ダメなら前のやつに戻せばいいだけなのですね。

というか、まぁ動かなくても少しづつコツコツ直せばいいや、ってな感じでもあります(´・ω・`)
あまり人も訪れない場所なのでして、問題はないと考え直しましたw
それにしてもメニューにユーザータグジャンプを仕込むとは、我ながらちょっと面白い使い方では?(自画自賛)

さて、bootstrap3導入について一応備忘録的なメモを残しておきます…
おいらも詳しいわけではないので完璧に間違えているかもですが、とりあえず。

「ファイルアップロード」でスクリプトやcssなどをアップロードしたのですが、拾ってっきたbootstrap3のスクリプトは、ファイル名にbootstrap.min.jsなどというように、拡張子以外のピリオドが入っているためそのままではアップロードすらできません。
そこで名前を変えてしまいます。
そしてアップロードしたらファイルURLをコピーして


<link href="(自分のブログのURL)/bootstrap_min.css" rel="stylesheet" media="screen">
<link href="(自分のブログのURL)/bootstrap-theme_min.css" rel="stylesheet">
<script src="(自分のブログのURL)/jquery-min.js"></script>
<script src="(自分のブログのURL)/bootstrap_min.js"></script>


みたいな感じに、<head>〜</head>に埋め込みます。サンプルを見るとjqueryはhttps://code.jquery.com/jquery.jsでもよいようなのですが、向こうに障害が起きたらどうなるのだろう?と思ってfc2に置くことにしました。

あとはまぁ適当に…忘れていましたがIE向けの呪文も置いておく必要があるようです。

これはなんだか本当によくわからなくて、bootstrapの配布ファイルには含まれてないし、調べてもどこかよくわからないURLのjavascriptを読むような感じなのですね。
そんなわけでbootstrap if IE 9でググって自己責任でお願いします。

というかちょっと調べたらわかりました(←すぐ調べろよ自分)

Respond.js(github)html5shiv.js(google code project)
だそうです。こいつらを拾ってきて、やはりピリオドを書き換え、<head>〜</head>にこんな感じにする感じでしょうか。

<!--[if lt IE 9]>
<script src="(自分のブログのURL)/html5shiv_min.js"></script>
<script src="(自分のブログのURL)/respond_min.js"></script>
<![endif]-->


はー息をするのもめんどくせー

まぁ、IE9以下はバッサリ切ってもいいかな〜と思ったり思わなかったり。


追記

結局プラグインのツイッターとかは極限まで削りました。まぁミニマリズムというほどではないのですけどねw
特にツイッターは読み込み時間もかかるので要らんかなと。
スポンサーサイト

コメント



名前
メールアドレス
URL
パスワード

トラックバック


dothikoのカクカクワールド2D

test

2014/04/15 21:21


テストのエントリーです

dothikoのカクカクワールド2D

testその2

2014/04/15 23:05


testのエントリーです 今度は長文でどうなるか、また複数のトラバがどういう影響を及ぼすのか についてちょっと調べようかな〜 とかとか 思いつつ なかなかですね、長文を海ミニ討つというのは実に難しいもので。 なんもはや、アレであります。 ところでアレなんですが。 そう、そうそう。 アレなんです。 ではでは ちょっとコピペして笠間市です testのエントリーです 今度...

トラックバックURL :

モブ沢ドト彦(dothiko)

ブログ主:モブ沢ドト彦(dothiko)
@dothiko

当ブログについて (←いわゆる「最初にお読みください」というヤツです)

このfc2ブログをお絵かき専用ブログに再編するにあたり、ハンドル名ではなくペンネーム「モブ沢ドト彦」を名乗ることに致しました。今後はプログレッシブに生きていこうと思います。基本的にお絵かきは毎週土曜日更新(予定)、その他のネタは不定期という事にしています。
amazonアソシエイトに参加することにしました。
年齢は特に明示しませんが
* おっさんです *

10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

ユーザータグ

FC2Ad