WordPressの無料テーマ、りんどうマガジンを作成しました。

ブログの記事の読みやすさ、情報の伝わりやすさにこだわったブログ向けのWordPressテーマ、「りんどうマガジン」を作成しました。

screenshot

ダウンロードはこちら

りんどうマガジンで出来ること

  • ヘッダー画像が設定できる
  • ロゴ画像が設定できる
  • グローバルナビ(ヘッダーメニュー)が設定できる
  • テーマカラーが設定できる
  • サイトの上部にあるサイトの説明文を非表示にできる
  • 記事ページに同じカテゴリの記事が表示される
  • 記事ページにSNSボタンが最初からついている
  • ビズベクトル社のVK All in One Expansion Unitプラグインに対応している(広告を貼ったり、お問い合わせボタンを手軽に設定できる。)
  • サイドバーは336px、メインエリアは300pxの広告を二つ並べて貼れる広さです。

このブログでも使用しています。デフォルトのテーマカラーはピンクですが、色を変えると男性でもご利用いただけます。

02-3-1024x541

facebookのapiでイベント情報を取得する

アクセストークンを取得して、試してみてください。

json_decodeを2回使うことで、データが日本語化できました。さくらインターネットのサーバーを使っています。

表示はこのようになります。アクセストークンの有効期限が2か月なので、実際に使うときは、2か月に一度のメンテナンスが必要になります。

01

bootstrapのテーマで自分のサイトをリニューアルして思ったこと

竜胆Webデザインのサイトをbootstrapのテーマでリニューアルしました。

rindou1605

使ったのはこちらのテーマです。

Slant  FREE HTML5 TEMPLATE

フレームワークはbootstrap一択

去年の秋に、foundationを使ってサイトのリニューアルをしたのですが、その時のブログにも書いた通り、今回はbootstrapを使いました。

foundationを使ってサイトをリニューアルしました(2015/9/12)

ワードプレスの海外製テンプレートはbootstrapが使われている場合が多い

なぜ、bootsrtapを使うべきかというと、私の場合は、これに尽きます。

他に使い道がないfoundationを覚えるよりも、bootstrapの理解を深めた方が、私の仕事にとって有益です。

無料のデザインテンプレートが充実している

ワードプレステーマでなく、普通のhtmlのbootstrapテーマがいろいろ揃ってきているようです。

無料で使える、デザイン性に優れたテンプレートはこちらのサイトがオススメです。

今回のリニューアルで、こちらのテンプレートを使いました。クレジットを入れる必要はありますが、それが許されるサイトであれば、テンプレートを使った方が、みんなしあわせになれる気がします。

ワードプレステーマ化は竜胆Webデザインにご依頼ください

最初からワードプレステーマ化されたものを買った方が、私にご依頼いただくより、安いと思います。

でも、海外のワードプレステーマを使うと、ワードプレス自体が拡張されていて、テーマのルールに沿った制作が必要になる場合がほとんどです。

そうなると、数年後のリニューアルという場合などに、難易度が上がったりします。

その点で、bootstrapでhtmlでコーディングを完成させてから、ワードプレスを組み込んだ方が、シンプルになります。

iframeでアコーディオンメニューを使いたい時のjQueryプラグイン

jQueryのtoggleで開閉する縦のアコーディオンメニューをiframe化したい時に便利なプラグインです。

DEMO

動的にiframeの高さを取得して調整してくれます。

使い方は親フレーム、子フレームにそれぞれ、set-iframe-height-parent-min.js、set-iframe-height-child-min.js、jQuery本体を読み込むだけです。

詳しい解説などはこちらを参考にしてください。

setIframeHeight – クロスドメインで動的に高さの変わるiframe設定を実現

jsonのデータをjQueryで任意の場所に振り分けて出力する

jsonのデータを整形して、あるページに出力することになりました。

データの中に、222という文字が含まれている場合は、222用のエリアに、111という文字が含まれている場合は111用のエリアに出力します。

DEMO

eachという関数で、ループさせて、同じクラスがついたulタグのidを取得し、idごとに処理をしています。

eq(i) を使うことで、すべてのクラスに同じ処理をするのではなく、ループごと、それぞれのidを取得して、それに応じた処理を実現しています。多分。

参考

JavaScript で 配列やJSONを並び替え
jQuery.grep(array, callback, [inv])

2016年前半の最近、カルーセルプラグインはSwiperを使っています

jQuery無しでも動きます。

Swiper – Most Modern Mobile Touch Slide
http://idangero.us/swiper/#.VvNC5BKLSi4

ダウンロードすると37個のデモが用意されているので、どういうことができるか、どうやって使うかがわかりやすいです。

DEMO

設置のコツ

要素をfloatさせないことです。floatさせていると、表示が崩れます。

ループする時は「loop: true,」を設定します。

スタートの位置を変える時は「initialSlide: 1,」で数字を指定します。

参考

Swiperプラグイン【日本語訳 】スワイプ対応のjavascriptスライダー

余談

今回は使いませんでしたが、このプラグインの動きがかっこいいので、機会があれば使いたいです。

Blueprints
http://tympanus.net/codrops/category/blueprints/