当サイトをモバイルフレンドリー化 & PC表示の幅を広げた

このエントリーをはてなブックマークに追加
2016/07/28 8:21 am
Blog Category / 日記
Tags /
 

smf
殆ど更新されない当サイトをご覧のみなさま、こんにちわ。
今までこのサイトは信じられないことにスマホでの閲覧に対応しておらず、表示させるとPC用のデザインがそのまま表示されて非常に見辛い状態だった。アクセス統計を確認すると、スマホでの閲覧が半数以上にのぼっていた為、重い腰を上げてテキトーにモバイルフレンドリー化を行った。
使用したWordpressプラグイン
smf3
仕事では1ソースマルチデバイス対応のレスポンシブECサイトを作ったりしていたが、非常に面倒臭いので上記のプラグインで簡単にモバイルデバイスに対応させた。無料版でもカスタマイズ項目は多く、カスタム投稿タイプにも対応。デフォルトのCSSテーマもシンプルで良い。
PCでの表示も調整
smf2
従来まではXGA(1080px × 768px)に対応する960px幅のデザインだったが、いくらなんでも時代遅れなので、WXGA(1280px × 760px等)基準で1200pxまで幅を広げた。だいぶ読みやすくなったかな。調整はCSSを少し変更しただけ。トップページはMasonryで自動的にレイアウトさせているので、wrapの幅を広げるだけ。
ついでにフォントファミリーを変更して游ゴシックをメインに。随分と印象が変わった。

WordPressのテーマをゼロから作った

このエントリーをはてなブックマークに追加
2014/04/08 11:00 am
Blog Category / 日記
Tags /
 

empty  
ものづくりに特化したサイトが作りたくてWordpressのテーマをゼロから構築し、完成はさせたものの肝心の中身が用意できずに放置して早や1年。もう作った事も忘れかけていたタイミングで制作再開。延べ2年かかってしまった。。
毎日仕事、仕事、仕事仕事仕事仕事、あれ、時が経つ毎に仕事の量が乗算されていく…なんてたのしいんだろう!と社畜精神に拍車がかかり、仕事の量に反比例するかのように制作意欲は削がれ、サイト作りの記憶が頭から消滅しかけ…
ss

バイク買ってツーリングしまくったり、レゴを大人買いして童心に帰ったり、雪道を楽しんだりしてよう遊んだ。
これはあれだ、仕事という現実からの逃避だ。

いかん、これはいかんよ。
あれだね、人間なんて気分次第。
自分で作っておいて何だけど、もう仕組みも何も忘れてしまったので、メモ的にオリジナルWordpressテーマのプラグインやら何やらをここに記しておく。放置している間にフラットデザインがベーシックになってしまい、少々古臭いデザインになってしまった感が。

●960pxを基準としたグリッドデザイン

>>参考URL  960 Grid System : http://960.gs/
ピクセル幅1024pxのモニター対応したレイアウトだが、ここ最近はPCモニターもフルHDが当たり前になってきたので少々古さは否めない。が、あまり幅広にしてしまうと読む際に視線の移動量が増えてシンドイので採用。

●jQueryによる可変グリッドレイアウト

>>参考URL  jQuery Masonry : http://masonry.desandro.com/
ボックス要素を隙間なく整列して表示してくれるjQueryプラグインを採用。トップページや、メイン記事のアーカイブ表示に利用している。これは、新しいサイトを作ろうと思い立った際にとても流行っていた。最近はどうかは知らないが、情報量と見栄えのバランスが良くて好きなんだ。ちなみに我がローテクラボは、オモコロを運営しているバーグハンバーグバーグのレイアウトをパクって参考にしている。見やすいよね。

●メインコンテンツとブログを別けた運用

通常のブログの様式通りにカテゴリを分け、”日記”と”日記では無い”エントリーが同じデザイン・レイアウトの中で同居している状態を避けたかった。印刷物である雑誌等で例えると、全てのページのレイアウトが同一で代わり映えがせず、しかもそれが毎号続く状態だ。コンテンツ自体のテーマを統一していても、内容に差異、個性は出てくる訳で、そこをキッチリと別けてやろうと。カスタム投稿タイプとカスタムタクソノミーを設定し、デザインもメイン記事とブログとで分別させた。
メイン記事は記事毎にレイアウトの自由度を高く、
個性を出しやすいように1カラムとし、極力余分な要素を排除。
ブログは2カラムデザインとし、サイドバーに各種ウェジェットが並ぶブログ然としたデザインに。

●コメントシステムにDISQUSを導入

Wordpressデフォルトのコメントシステムはソーシャルメディアとの連携について役不足なのでDISQUSを採用した。スパム対策にも有用。他にも似たサービスやWordpressプラグインが存在するが、スタンダードなサービスなので情報も多い。
まだテーマの細部が仕上がっていない状態だけど、追々という事で。
 

  • 最近の投稿
  • 最近の特集
  • 人気の記事
  • アーカイブ
  • カテゴリー
  • タグクラウド