waka8*stakes

〜馬絵+林檎+Wordpress〜

またテーマを1から作りました。レスポンシブとかいろいろ取り入れてみたよ〜♪

making_theme

変更点

  • Bootstrapのレスポンシブスタイルを取り入れてパソコンでもモバイルでも1つのテーマで済むようにした
  • 検索窓とかメインメニューをクリックで出すようにした(jQueryプラグインを使った)
  • FontAwesomeをアイコンに使った
  • WordPressのjQueryではなくGoogle版CDNにした(Fancybox2が動かなくなったので 1.8を読み込みFancyboxは1.3.4に戻した)
  • Syntaxhighlighterが動かなくなったのでGoogle Code Prettifyに変えた

Bootstrapのレスポンシブスタイルを取り入れてパソコンでもモバイルでも1つのテーマで済むようにした

iPhoneネタもたまに書いているせいかこのサイトでもスマートフォン(特にiPhone)でのアクセスが多い事をGoogleアナリティクスを見て知りました。

PC表示用テーマとスマホ表示用テーマを分けたけど管理がめんどくさい

スマートフォンでもパソコンサイト見られるしKtai-Styleでガラケー対応だけしてたらいいかとずっと思ってたけどスマホ優先主義の時代だし、自分のサイトもスマホからのアクセスが多いのでスマホ対応は避けられないと思い前のテーマで一念発起してスマフォ対応してきました。

以前は一つのテーマで済むレスポンシブデザインをやろうとしたけど出来たテーマをアップして有効化してiPhoneで見たら狭い画面の左に寄ってしまって失敗したのでそのテーマを流用してスマートフォン向けにCSSを書き換えたテーマを作りプラグインでPC表示とモバイル表示を使い分けてました。

でもその方法だと片方のテーマに何か加えたときもう一方のテーマも同じように追加しなければならなくて面倒でした。今更ではありますがBootstrapがレスポンシブデザインを簡単に取り入れられるということで使ってみました。Bootstrapの導入の仕方などは以下の参考ページが解りやすかったです。

参考ページ

簡単な使い方

<div class="row"><!--グリッド開始-->
 <div class="col-xs-12 col-sm-7 col-md-8">
  col-xs-12 スマホ(768px未満):画面いっぱい
  col-sm-7 タブ(992px未満):画面の 7/12
  col-md-8 PC(992px以上):画面の 8/12=2/3
  col-lg-6 特大ディスプレイ(1200px以上):画面の半分
 </div>
 <div class="col-xs-12 col-sm-5 col-md-4">
  col-xs-12 スマホ(768px未満):画面いっぱい
  col-sm-5 タブ(992px未満):画面の 5/12
  col-md-4 PC(992px以上):画面の 4/12=1/3
  col-lg-3 特大ディスプレイ(1200px以上):画面の3/12=1/3
 </div>
 <div class="col-xs-12 col-sm-5 col-md-4">
  col-xs-12 スマホ(768px未満):画面いっぱい
  col-sm-12 タブ(992px未満):画面いっぱい
  col-md-12 PC(992px以上):画面いっぱい
  col-lg-3 特大ディスプレイ(1200px以上):画面の3/12=1/4
 </div>
</div>!--グリッド終了-->
  • 外側のボックスにclass="row"をつける
  • 内側のボックスに、スマホ向けにclass="col-xs-〇〇"、タブレットとかミニパソコン向けにclass="col-sm-〇〇"、パソコン向けにclass="col-md-〇〇"、さらに大きいパソコン向けにclass="col-lg-〇〇"をつける
  • 横並びさせたいボックスにつけたそれぞれのcol-●●-〇〇の〇〇は足して12になるようにする
  • 大きな画像を狭いスマフォでも幅いっぱいで見られるように画像(<img>)にはclass="img-responsive"を追加

検索窓とかメインメニューをクリックで出すようにした(jQueryプラグインを使った)

横からメニューが飛び出すPageSlide

iPhoneでページを見るとトップのメニューでコンテンツが隠れてしまい、見えなくなっていたのでスマホサイトでよくある『タップして横からメニューがこんにちは♪』するようにしてみました。

『ウェビメモ』さんで紹介されてたPageSlideというjQueryプラグインが簡単そうなので導入してみました。このページの最上部、サイトタイトルの横にある『』をクリック(タップ)すると左からするっとメニューが出ます。ページのどこかをクリック(タップ)すると閉じます。

詳しい使い方は以下の配布元や参考ページで。デモページもあります。素のままですとメニューが普通のリストスタイルなのでボタン風にスタイルを付けました。

[配布元]
[参考ページ]

検索窓も隠してみた

以下のページのコードを前のテーマのドロップダウンメニューに使わせてもらってました。

[参考ページ]

こちらに書かれているスクリプトのclassやIDを自サイト向けに書き換えて使ってました。それを検索窓用に書き換えて使い回しました。

Source: header.php

$(function(){
$(".searchform").css("display","none");/*検索窓(class="searchform")を隠す*/
$(".button-toggle").on("click", function() {
/*丸い虫眼鏡アイコン(class="button-toggle)を押すと検索窓がこんにちは♪"*/
$(".searchform").slideToggle();});
});

FontAwesomeをアイコンに使った

アイコン画像をいちいち作るのがめんどくさいのでアイコンフォントを使う事にしました。Wordpressの標準テーマでは既に使われてますね。

BootstrapにはGlyphiconというアイコンフォントが同梱されていて、導入してとhtmlファイル(WPならテーマファイル)に記述するだけでアイコンフォントが使えるようにしてくれています。

でもみんな大好きFontAwesomeを選んだ

Glyphiconにはブログで使えそうな『フォルダ』『時計』『カレンダー』『タグ』『リンク』『吹き出し』なんかのがアイコンが揃っているのですがそれだけでは足りないはずです。今やブログからTwitterのリンクを貼るのは当たり前。どうせならTwitterの鳥さんのアイコンを使いたいですよね!

そこでFontAwesomeです。このFontawesomeならTwitter、Facebook、Flickrなど有名なSNSのアイコンが揃っています。もちろん私が大好きなInstagramのアイコンもあります。記述もGlyphiconならclass="glyphicon glyphicon-xxxxだったのがFontAwesomeならclass="fa fa-xxxx"と短くて済むし(^皿^*)

FontAwesome 導入方法

上記の公式サイトで入手できます。落としたzipを展開すると色んなフォルダが入ってますが要るのはcssフォルダとfontsフォルダだけです。なのでテーマフォルダにfont-awesomeフォルダを作りその中にcssフォルダとfontsフォルダを入れました。

テーマフォルダ内にfont-awesomeフォルダを置いたら以下のようになります。

  • font-awesome
    • css
    • fonts
  • index.php
  • style.css

head内に以下を書いてFontAwesomeを使うためのCSSを読み込みます。

<link href="<?php echo get_stylesheet_directory_uri(); ?>/font-awesome.min.css" rel="stylesheet">

あとはアイコンフォントを表示したいところに

<i class="fa fa-xxx"></i>

を書くだけです。

送信ボタンにもアイコンフォント

検索フォームやコメントフォームやメールフォームなどの送信ボタンにもアイコンフォントを書く事ができます。少し悩んだので調べてメモした記事を書きました

input要素で書かれたボタンにアイコンフォントを書く方法 – Waka8*Stakes[わかば☆すてーくす]

導入方法は以下の記事が参考になります。

ダウンロードしてテーマファイルに入れなくてもCDNで外部から読み込むだけで使う方法もあります。これなら画像ぐらいしかファイルが置けないレンタルブログサービスでも簡単に導入できますね♪

WordPressのjQueryではなくGoogle版CDNにした

今までhead内にwp_enqueue_script('jQuery');でWordpressのjQueryを読み込ませて使ってたのですが、jQueryをコピペして使うときに$jQueryに書き直すのが面倒くさかったり、外部サイトから読み込むCDN版の方が高速化するといろんなブログで見た記憶があるのでこの機会に変えてみました。

WordPressの場合はテーマのhead内に普通にlinkタグでgoogleのjQueryを指定して読み込みという訳にはいかないようなので、その前にwp_dequeue_script('jQuery');でWPのjQueryを使わないようにしときます。

Code: header.php

<?php 
wp_deregister_script('jquery'); /*WPのjQueryを使わない*/
wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'); /*GoogleのjQueryを読み込む*/
?>

GoogleのjQuery1.10を使うようにしたらFancyBox2が動かなくなった

このサイト始めてから、デザインが可愛いと思ってFancyBox1.3.4を使ってました。いつかWordpressをアップデートしたときに中のjQueryのバージョンアップで動かなくなったのでFancyBoxも新しい2の方を使ってました。デザインが古い1.3.4の方が好きだったのですが…。

この際だからjQueryもFancyBox1.3.4が動くバージョン1.8をGoogleから読み込む事にしました。

Syntaxhighlighterが動かなくなったのでGoogle Code Prettifyに変えた

Bootstrapを使ったら今までSyntaxhilighterでカラーリングしていたpreの中身がグレーの枠と黒字になってしまいましたorz

(自分が泥スマホだったから中身がスクロールできなかったのを確認して)中をスクロールしなくても見られるように折り返ししたり行をしましまにしたりとカスタマイズを施して使ってたのに…

Syntaxhighlighter3.0.83で長い行を折り返して表示する – Waka8*Stakes[わかば☆すてーくす]

↑こんな記事も書きましたw

今、この手のシンタックスハイライター的な物はGoogle Code Prettityがよく使われてて(なんとBootstrapの公式サイトでも使われている)導入もSyntaxHighlighterより簡単ということなのでこっちに乗り換えました。しかし一筋縄では上手く行かず…。Bootstrapなサイトではそのままでは表示できません。Bootstrap公式サイトもprettify.cssを書き換えているとの事です。

↑こちらのページの下の方に書かれているコードをコピーして自分のprettify.cssの内容を消してこれをペーストして書き換えると無事に色がつきました。ページの幅にあわせて自在に折り返してくれるしスマートフォンでも全部見えるのでカスタマイズしなくてもよく、楽です。

今まで書いた記事のソースコードにもPrettifyを適応させる

jQueryのaddClassを使ってます。

<script type="text/javascript">
/* Prittifyのクラスを追加 */
$('pre').addClass('prettyprint');
</script>

をsingle.phpに書きました。

使い方と注意点

ソースコードを囲むpreタグにclass="prettyprint"を追加するだけでいいのですが、中にHTMLタグや<?php ?>を書く場合は文字参照に変えなければいけません。私はMacのユーザー辞書にしょうなりと打てば&lt;だいなりと打てば&gt;と変換するように登録しているのでさほど苦にはなりませんでした。

変更した理由

  • テーマの内容を変更したりテンプレートを増やしたときに2つのテーマを弄らなければならなかったのが面倒くさかったのでレスポンシブスタイルにしてPCモバイルどちらでも1つのテーマで済むようにしたかった。プラグインもひとつ減らせるし。
  • アイコンですっきりさせたかったのだが画像を作るのが面倒だった。今ではアイコンフォントが当たり前らしいので使ってみようと思った。
  • スマホサイトでよく見る「『三』アイコンをタップしてメニューを出す」を使いたかった。