タグ別アーカイブ: テーマ

【年末年始の自由研究】スマートフォン向けブログテーマをBootstrapで作りかえてみた


blogtheme_bootstrap

先日Android版Firefox向けに調整したばかりの当ブログモバイルテーマですが、一から作り替えてみました。

従来のモバイルテーマはjQuery Mobileベースだったのですが、jQuery Mobile自体が少々重装備なのと、テーマファイルのベースが自分で作ったものではないためメンテナンスしづらいという問題がありました。そこで今回WordPressテーマや流行ライブラリの勉強を兼ねて、Bootstrapを用いてスクラッチで作ってみました。とにかく形にすることを優先して、画面デザインの多くはBootstrapのデフォルトそのままです。デフォルトのままでもそこそこきれいに見えるのがBootstrapの魅力ですね。

ブログ記事が読めるというレベルの基本的なところは問題ないはずです。ところどころ表示がおかしいところもあるかもしれませんが、それはおいおい直すということで。

PC版ブログデザインを新しくしてみました


bari-ikutsu_pc_2013

記事投稿以外ずっとほったらかしにしていたブログに最近手を入れています。スマートフォン向けテーマにロゴを入れ、PC表示との切り替えも整備しましたが、PC表示のテーマ自体は(細かく修正はしていますが)WordPressでブログを始めた当初から基本的にそのまま。ロゴをシンプルにしたのをきっかけにブログデザインもシンプルにしようかなとふと思い立ち、1日くらいのやっつけ仕事でここまで持ってきました。

ベースのテーマはWordPress標準の「Twenty Twelve」。スマートフォン向けテーマはすでに整備しているのでレスポンシブ機能は無効にし、コンテンツ互換性を考えて3カラムに変更。あとは上部にロゴを入れてサイズを調整した程度の(繰り返しですが)やっつけ仕事です。色やサイズなど細かく調整していくとは思いますが、まずはこれでいこうかと。

ちなみにTwenty Twelveを3カラムにするのは以下の記事を参考にしました。

【Twenty Twelve】3カラムの作成方法 (WordPressカスタマイズ【WPCOS】)

さらに追記として、スマートフォン版と動作をそろえるため、左上のロゴをクリックするとブログホーム(http://blog.bari-ikutsu.com)を表示する機能を入れています。一気にホームまで戻りたいときにご活用ください。