スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

Bootstrap3を使ってFC2ブログのテンプレを作ろうその二

Bootstrap3を使ってFC2ブログのテンプレを作ろうその一の続き。
コメント欄、TB欄、あとCSSちょこちょこ。

追記
共有通ってました。DLしてくれた方々ありがとー><
bootstrap3-2で共有に載ってます



1.コメント欄をBootstrap3を使って作ってみよう
最初は標準のInput Groupesでなんとか行けないものかと試行錯誤してたけどダメ。
というか、参考にしてたテンプレみんなtableタグとかdtタグとか使って何とかしてたのね。
それをそのまま置き換えたりしてみたけど、どーーーーーーもカラムが落ちたり、コメント内容表示のところにTB欄が埋め込まれたりと謎挙動。
結局一番参考になったのはBootSwatchの適当なテーマ内のForms。
form.png 一番近かった。

コードはこんな感じ

これを元にFC2のコメント独自変数とかを組み入れてく感じ。
適当にサイズ調整なんかをはさみながら、時には標準のフォームのコードを見ながらなんとかかんとかうんたらかんたらしてみるとこのように。

form class="form-horizontal"で囲って、"form-groupe" でそれぞれを定義していく感じ。めんどいのはFC2独自の変数が入るところで、これは公式のbasic_whiteテーマのコメント欄の記述を参考に代入していきます。
edit_areaも基本は同じ。
label for="name" class="col-md-2 control-label" col-md-2 の幅で後ろの%template_name(日本語表示では「名前」と出ます)
フォーム自体は div class="col-md-6"で幅指定して input class="form-control" id="name" type="text" で入力欄を作っていく感じです。
ハマったのは<form>~</form> の中でaction="./" method="post"・・・・の部分があったんだけど、これを入れてなくって別タグで定義してた(ので結局</form>がひとつ足りない状態になってた?)ために、入力欄は表示されてるけど、送信押すとすべて破棄されてコメント入力ページに飛ばされるという現象w
ついでに入力支援ツールバー(これ↓)の内容が反映されなかったりしたんだけど、

それもこれもなにもかもこのform閉じ忘れから発生したもので、一つにまとめたら解消。
コメントエリア(comment_aria内)と編集エリア(edit_aria内)は変数が違うだけで基本一緒。
送信ボタンはinput class=のところにBootstrapのボタン定義(今回はbtn-default btn-sm)を入れればBootstrap標準のあのボタンになります。もちろんここの定義変えれば色んな色、大きさのボタンに変更可能。
見た目的に form-inline でチェックボックス~送信ボタンを一行にしたけど、別にしてもいいかもね。

2.TB欄も合わせて作ってみよう
コメント欄に比べれば非常に楽なもんです。
同じくform-horizontal form-groupe使って適当に整形するのですが、まぁ項目が項目なのですぐ。

こんな感じ。input classの中にトラックバックURL自動表示&Readonlyの呪文を代入。
onfocus="this.select()" value="<%trackback_url>" readonly="readOnly" /

あ、ちなみにBootstrapはCSSフレームワークなので、ここまでの状態のhtmlのみでもそこそこな感じで表示されます。

3.CSSでちょこちょこ気になるところを整えよう。
最初はClean BlogのCSSをそのまま突っ込んでみました。(Apacheライセンスです)
まぁ、英語圏のブログっぽいかんじよね。海外のWP使ったブログみたいな感じになります。
とはいえ、うちのブログの場合かなり軽い記事や、やってみた的な記事、Tipsというにはあまりに曖昧な記事など、真面目すぎるレイアウトではいまいちしっくりこない感じなので、ぶっちゃけ合いません。かっこいいけどね。
そこで、いらないところをバンバン削除した上で、今まで使ってたPs_960とかからもイイトコ取ってきてうまいこと見た目を整えます。とはいえせっかくBootstrapなので、あまり込み入ったCSSは書きたくないにゃー。

てなわけでうまいことイイトコどり最低限な感じで、ページ全体の色とか、フォントのサイズとか、あとborder入れるとこは入れてみたりしたCSSがこれ

もしかしたらhtmlとちゃんと定義が咬み合ってなくって意味のない記述が紛れ込んでるかもしれません。もし使われる方がいらっしゃるならば、そのへんはご自分でどーにかしてください。どーにかしたうえで「ここおかしかったからこー直したよ」的なお知らせをいただけると幸いですが、ぶっちゃけおかしいところがあっても、それがどうおかしくてどうなってるのかわかるほどのレベルに僕が達してません。

そんなこんなでできたテンプレがとりあえずGitHubにあります。https://github.com/t-min/bootstrapforfc22clumn
まぁ使ってやってもいいかなという方は使ってやってください。(あー、ライセンスって必要なんかねー?MITとかにした方がいいんかねー?
Bootstrapの勉強には・・・なったのかなぁ?FC2の独自変数とかめんどいよねー。しかもそのへんは応用効かないからあれですよねー。

次はWPのテンプレ改造とか作成とか行きたいですねー。

関連記事
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
新年明けましてテンプレート不承認
関連記事
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

コメントの投稿

管理者にだけ表示を許可する
ブログ内検索

カスタム検索

フリーエリア

クリックで救える命がある。

レンタルサーバー

さくらのマネージドサーバ
さくらインターネットのVPS
ConoHaのVPS
WebARENA VPSクラウド
99円レンタルサーバー
【CloudCore VPS】
GMOクラウドのレンタルサーバー
転送量無制限 ABLENET
@WAPPYレンタルサーバー
SPPDレンタルサーバー

カテゴリー+月別アーカイブ

 

アクセスカウンター

現在の閲覧者数:

プロフィール

Author:tmin
PCヲタ。ライト2ちゃんねら。
スロット好きのギャンブラー。(元
むしろ人生がギャンブルだが目下のところ負けっぱなし。
座右の銘は「結果オーライ」。故に基本適当。
トラブルもまた楽しみのひとつ

コメント、トラバ、相互リンク歓迎。お気軽にどうぞ。
当ブログについて
Twitterでこっちとあっちの更新情報流すことにしてみます。
http://twitter.com/t_min
Project Mikunchu♪Wikiできました。
Mikunchu200x40.png


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。