Bootstrap(3RC2)のセンターレイアウト機能とTwentyThirteenとの整合性

WordPress上でTwitter Bootstrapを用いて 色鮮やかなボタンを手軽に実現 したり、これまた お手軽なグリッドシステムを用いたレイアウト及びレスポンシブWebデザインを実現 したりしましたが、勿論Bootstrapの実力はこんなものではありません。 今回はホームページの作成者が先ず気に掛けるであろう全体のレイアウトについて、 レスポンシブWebデザインを実現した上のセンター合わせを Twitter Bootstrapを利用してWordPress上に実現してみます。

因みに2013年8月16日付けでTwitter Bootstrapのバージョンが3の RC(リリース候補)2にアップしていましたので、今回は以下2ファイルを 最新バージョンに差替え、大凡今迄の実装に問題の出なかったのを見ての作業となります。

  • bootstrap.min.css
  • bootstrap.min.js

Twitter Bootstrapのcontainerクラス

j時代に依って閲覧端末の性能も変わればホームページのレイアウトも其れに連れて変化するもの、 現在ではホームページは大概…

TwitterBootstrapがキャンセルするTwentyThirteenのサイドバーとフッターの重なりを復元する

WordPressのバージョン3.6から登場した新テーマ Twenty Thirteen では其のレイアウトにかなりjQuery等、JavaScriptが活用されています。

TwentyThirteenに於けるサイドバーとフッターの関係

一昨日、2013年8月14日の本ブログの記事 新テーマTwentyThirteenを有効化してTwitterBootstrapのグリッドシステムを使う では其の一つ、サイドバーとフッターの関係を取り上げました。

新テーマではブレークポイントを超えるデスクトップ仕様の解像度に於いては フッターのウィジェットが右にサイドバーの幅分の余白を開け、 其処へコンテンツ量を超えるサイドバーの長さが喰い込んで来る塩梅となっていました。

新テーマTwentyThirteenを有効化してTwitterBootstrapのグリッドシステムを使う

セキュリティを考慮すればWordPressのバージョンアップは欠かせぬ作業とて 手元の幾つかのWordPressシステムを利用したホームページにも適用、 その内の一つが2013年8月2日の記事 Twitter Bootstrap 3 RC1を導入してワードプレス子テーマを作成する にも記した サウンド追っ掛け情報 にて、ご多分に漏れずアップデートを実施しましたので新テーマ Twenty Thirteen を使えるようになりました。 2日の記事にある如く、当該サイトには Twitter Bootstrap 3 RC1 を導入していましたので図らずもWordPressとTwitter Bootstrapの共存環境が出来、 検証出来る塩梅となったのです。

Twitter Bootstrapを適用したサイト

Twitter Bootstrap 3 RC1をワードプレスに導入してボタンを表示してみた

実際にTwitter Bootstrapを適用したサイト上で其の機能を利用したボタンを表示してみたのが上の画像の記事 Twitter Bootstrap 3 RC1をワードプレスに導入してボタンを表示してみた になります。

WordPressを3.6にバージョンアップして新テーマTwentythirteenを使う

一昨日は2013年8月11日に本ブログに配信した WordPressの脆弱性を狙うスパムボットStealratに関する記事 の冒頭部にも記した如く、ホームページやブログのシステムとして WordPress を採用していれば其のバージョンアップは単に新機能を享受するばかりでなく、 必用且つ欠くべからざる作業となるのはセキュリティーに関するアップグレードも含まれているからです。

WordPressのバージョンアップ情報

其処でWordPressのバージョンアップの実作業について本ブログに うさ犬ランド を参考に供したいと思います。

WordPressのバージョンアップ情報に関してはWebなどに流れるニュースなどもあるでしょうが、 実際にWordPressでホームページを運用している向きには管理画面にログインすれば 其の告知は為されているものですで、下が其の画面となります。

WordPressの脆弱性を狙うスパムボットStealratの感染を確認してみた

世界標準のブログ及びCMSとなれば狙われる機会も増えるのは宿命となるのは世界の要人が狙われるのと一般ですが、 SP、即ちセキュリティポリス宜しく頼もしいガードが守ってくれるのも世界の要人と一般です。 其の要こそWordPress開発陣と言えるでしょう、 開発意欲も旺盛なWordPressに於いてはバージョンアップが頻繁に為され、 機能向上ばかりでなく中にはセキュリティーへの配慮も往々にして包含されますから、 小マメなバージョンアップ作業はWordPress管理者の義務とも言えます。

トレンドマイクロの警告

さてさてWordPressを守ってくれるのはWordPress開発陣ばかりではありません。 技術力の高いソフトウェアメーカーなども其の内に含まれるのは頼もしいことで、 此の如き援護もWordPressの世界標準たる所以でしょう。

今回はウィルスチェックソフトとしてのシェアも高きソフトウェアメーカー トレンドマイクロ 社が其のトレンドマイクロ セキュリティ ブログ (ウイルス解析担当者による Trend Micro Security Blog)の記事 CMSの脆弱性を悪用するスパムボット「Stealrat」による感染を確認するには? を配信、注意を促してくれています。

Twitter Bootstrap 3 RC1を導入してワードプレス子テーマを作成する

趣味にビジネスにホームページを保有することが普通のこととなり、 多くの方が其々の仕様で作成されるようになり、 今やホームページに要求され、必要とされる役割、機能は高まり、 其の制作についても難易度は上がるばかりです。

ホームページ制作に於いては今では其の構造とデザインは分離され、 構造をHTMLが、デザインをCSSが担当する処となりました。 一昔前にはHTMLを知らなければホームページは拵えられませんでしたが 今やブログシステム及びCMS方式を採れば其れも必要ありません、 であればデザイン方面にも一方では敷居を下げる意味からも 一方では効率化を上げる面からも必要とされ、登場したのが CSSフレームワーク でした。 誰が見ても格好良いデザインをお手軽に拵えてしまおうと言う寸法です。 其の旗手が Twitter Bootstrap でした。

Twitter Bootstrap ver.3

140文字で呟くサービスが大いに受けた Twitter でしたが、小鳥のトレードマークは勿論余りの人気にサーバーが不安定となって サービスが提供出来ない際に表示される鯨の画像も又人気となりました。 其の一種独特な可愛らしいデザインも一般に受け容れられたのです。 此の如何にもTwitterっぽいデザインを自らのサイトにも お手軽に取り入れられる手法として提供されたのが Twitter Bootstrap だったのです。

瞬く間に人気を得たTwitter Bootstrapは或るデータに拠れば 現在Webのサイトの1%に採用されているともされています。

スマートフォン画面でWordPressのウィジェットを消す方法

モバイル端末へのホームページの対応は現今必須処か 喫緊の課題として眼前に横たわっています。 なんとなればいちいちパソコンを立ち上げてホームページを見るなど面倒臭いことこの上なく、 大体が出先でパソコン操作など儘ならないとなればモバイル端末に頼るしかないのですし、 今や其れを受け容れる環境も素晴らしく整い始めているのでした。

ホームページリニューアル

本ブログ運営者は前世紀から運営するホームページ 旧うさ犬ランド スクリーンショット うさ犬ランド を保有しており、有り難くもヤフーカテゴリにも登録されていますが、 此処5年程も更新が無く放置とあっては貴重な資産が無駄なままとて 遂にリニューアルに昨年末踏み切るに至り、 合間を見てはコツコツと作業中です。

これを本ブログにもカテゴライズする WordPress が現時点では最適の仕組みと見込んで採用、 様々な古いフォーマットを改めると共に目論んだのがスマートフォン対応です。

2カラム構成のWordPress

ホームページの画面構成で縦列が2列に並ぶものを2カラムと呼んでいます。 今回リニューアルの最中、スマートフォン対応を図る中で様々画面構成を工夫する中途で 最終的にはサイドバーの無い画面構成を考えているものの…

WordPressでiPadを除くモバイル端末の検出をする

スマートフォンの普及は予想しましたが 新しく携帯電話を購入しようとすればスマートフォン以外の選択肢は難しくなるキャリア側の 競合間の激しい契約者数獲得の激しい鍔迫り合いから来る焦りとも言うべき施策に 後押しされる状況となる迄は些か想定外でした。 斯くして世の人々がホームページにアクセスするに当たり スマートフォンからのトラフィックが驚くべき勢いで増加しては 最早スマートフォン対策のなされていないホームページは ホームページとは呼べない状況ともなったのです。

iPhone 4 Bumper + Universal Dock w/ DIY Adapter

アクセス端末の検出

ホームページが依拠するインターネットが従来のメディアと大きく異なるのは 従来メディアが基本的に一方通行であるのに対し、 インターネットは双方向性を持つことに有ります。 従って原則としてホームページにアクセスする側は 自らが何者であるかホームページ側に知らせていることになります。

ホームページ側はこの受け取った情報から 相手がパソコンであるのか、携帯電話であるのか、スマートフォンであるのか、タブレットであるのか、 などを判断出来るものとなっています。

ユーザーエージェント

受け取った相手の情報の内にも端末の判断に使えるものが…

カテゴリ毎に異なるローカルナビを表示するWordPressプラグイン

インターネット黎明期には定型的なものはなかったホームページも 時が経つに連れ定番とも言うべき形が出来て来ました。 これに従うと見る人を戸惑わせることが減るため ホームページ作成の際には是非とも考慮すべきでしょう。

ナビゲーションの形

ホームページの定型の代表がナビゲーションです。 ホームページを見るときに目立つ位置に横一列に ナビゲーションボタンが並び用意されているのをしばしば目にします。 大抵はこれは グローバルナビゲーション と言ってホームページ内を大まかに分けたカテゴリーにリンクされたボタン群です。

小規模なホームページであればこれで賄えますが、 規模が大きくなってくると各カテゴリーの内容も充実してきます。 するとその豊富な情報の中に閲覧者が欲する情報を案内する導線が必要となります。 従ってカテゴリーの中に更にナビゲーションボタンがあれば好適となります。

このカテゴリー内のナビゲーションは ローカルナビゲーション と呼ばれることが多いようです。

WordPressの標準ナビゲーション

WordPressでフォントサイズ切替機能を追加するプラグイン

かつてOperaブラウザが画面の拡大縮小機能を実現したときは驚きましたが、 今や大抵のブラウザがは自由自在に拡大縮小出来る様になりました。 ユーザービリティ上、フォントサイズを拡大させることもブラウザで実現出来る訳です。

フォントサイズ切替機能がそれでも必要な理由

それでもブラウザの拡大縮小機能は一般にそれほど周知されているとは言えませんし、 それ処か馴れない人が思わぬ操作で画面が拡大されると戸惑う場面さえ見受けられます。 直し方が分からなくなって困惑しているのですね。

またブラウザの拡大機能だと画面が拡大するので フォントの大きさだけでなく回りも一緒に大きくなりますから、 横に広がった文章が画面に収まりきらない場面も出て来ます。 スマートフォンなどでしばしば見られますが、 画面の拡大、縮小若しくはスクロールで文章を読むのはストレスが堪るものです。

フォントだけ、文字の大きさだけが切り替わればそんなストレスも堪りませんから まだまだフォントサイズ切替機能も捨てたものではないのかも知れません。