BLOG

WordPressの自動整形完全無効化

CREATE RECORDはWordpressで制作されています。そしてWordpressの自動整形に頭を悩ませておりました。「Wordpress」「自動整形無効」で検索すると色々な情報が公開されています。 functions.phpに

を記述し無効化する方法やプラグインPS Disable Auto Formattingを使う方法などの情報が主です。

その2つの方法ではフロントページ側の表示は無効化できているのですが投稿画面では「<」等が相変わらず自動整形されていて編集時に自動整形がフロントページに反映される不便さで完全に無効化できなくて半ばあきらめていましたが、ついに解決しました。

ユーザー設定でビジュアルリッチエディターを使用しないにチェック!!

解決!何やってたんだ!僕は・・・・・

Nexus7のポートレート

レスポンシブデザインでコンペに参加することになりましたので、ちょっと色々調べておりました。 今回気になったのはタブレットのポートレートです。もっと絞るならNexus7のポートレートです。

以前は思わなかったのですがNexus7のポートレートはスマートフォンと同じレイアウトの方がユーザビリティーが高いと思います。 Nexus7はプライベートでもつかっています。購入当初は検証目的だったのですが、パソコンよりもお手軽なのでちょっとした調べ物や原稿作成にもつかっています。 このサイトもNexus7のポートレートをランドスケイプと同じ2カラムのレイアウトにしていたのですが、使用頻度が上がるにつれてスマホレイアウトの方が使いやすいと思ってきました。 2カラムのレイアウトですとコンテンツ下部まで読むとフッターにリンクがないナビゲーションのある位置まで戻らなくてはいけません。

まぁたったそれだけのことですが以外に面倒です。文章を読むのにこの狭い範囲にナビゲーションがあるのも邪魔だと思います。 スマートフォンのように横いっぱいにナビゲーションが展開すうるのはちょっとシュールな気がしますが、デザイン的なことを無視すればその方が使いがってはよいと思います。

デザインとその辺の機能をうまく両立するためにはモバイルファーストに対する見識がもっと必要です。ちなみにこのサイトのメディアクエリはトップページのフッターの上の図に記載しています。 また検証等でちょこちょこ変わるかもしれません。

picturefill.js設置してみました。

レスポンシブでホームページ制作してもキービジュアルが写真だったらあまり気にならないのですがCREATE RECORDは キービジュアルが文字なのでエッジがダルくなるのが気になります。対策としてキービジュアルの画像サイズ切り替えるpicturefill.jsを導入してみました。 設置もシンプルでした。

ヘッダー内でpicturefill.jsを読み込み

htmlは以下のようなソースです。max-widthを入れないと1000以下のときに画像がきえちゃいましたので入れています。

http://create.irec.jpに実装しました。
また時間のある時にタブレットやスマフォの画像を最適化させます。 IEは10以外動作してませんでしたので9以下はカットです。

picturefill.jsのダウンロードはこちらから

Sponsored Links