現在使用中のNibbleblogの初期テーマのCSSだけを編集して、モバイルフレンドリーなレスポンシブデザインっぽくしてみた

| Nibbleblog

Bootstrapテーマなんて使わずに対応

レスポンシブデザインなんて知るかコノヤローと思っていたが、モバイルフレンドリーなウェブデザインがSEO的に良いらしく、最近レスポンシブデザインが増えてきている。一方、Nibbleblogの初期テーマの一つであるGoogleSimpleを現在利用しているが、このテーマはレスポンシブデザインに完全には対応していない。しかし、今更このテーマからBootstrapテーマ系のテーマへ変更するつもりはない。かと言って、このテーマをゴリゴリに弄るのは面倒。そこで、このテーマのCSSだけ弄って、なんちゃってレスポンシブデザインにしてみた。

最近はセマンティック・ウェブな世の中になりつつあるらしいので、Nibbleblogの初期テーマの一つであるGoogleSimpleのスクリプトを弄ってJSON-LDを追加した

| Nibbleblog

構造化データの文法の一つ、JSON-LD

フィードやトラックバックが流行ったころも似たようなことが言われていた気がするが、最近はセマンティック・ウェブな世の中らしい。そこで、Nibbleblogの初期テーマの一つであるGoogleSimpleの以下の2つのスクリプトを次のとおり弄って、SEO的に期待されているJSON-LDを追加した。

  • /themes/google_simple/views/blog/includes/post.bit(記事一覧表示用スクリプト)
  • /themes/google_simple/views/post/includes/post.bit(個別記事表示用スクリプト)

このNibbleblogはデフォでmeta要素のviewportを生成しないので、デフォで生成するようにしてみた

| Nibbleblog

モバイルフレンドリーに必須なviewport

このNibbleblogはデフォでmeta要素のviewportを生成しない。一部の初期テーマは生成するようだが、現在利用しているGoogleSimpleという初期テーマは生成しない。しかしviewportはSEO的に重要らしい。そこでスクリプトを以下のとおり修正し、デフォで生成するようにしてみた。

このNibbleblogのOpen Graphプラグインのog:imageとTwitter Cardプラグインのtwitter:imageのURLがおかしいので修正した

| Nibbleblog

プラグインのダブルスラッシュ問題

このNibbleblogにはプラグイン機能があり、このうちFacebookOpen Graphプラグインのog:imageと、Twitter Cardプラグインのtwitter:imageのURLがhttp://www.example.com//themes/テーマ名/css/img/image.pngとダブルスラッシュ(//)が入っておかしなことになっていた。そこで、以下の2つのスクリプトを次のとおり修正した。

  • /plugins/open_graph/plugin.bit(Open Graphプラグイン)
  • /plugins/twitter_cards/plugin.bit(Twitter Cardプラグイン)

ここ海外無料サーバーにFTPアップロードでNibbleblogというPHPで動作するフラットファイルCMSを設置してみた

| Nibbleblog

Nibbleblogとは

ここ海外無料サーバーにFTPアップロードでNibbleblogを設置してみた。NibbleblogはPHPで動作し、管理者画面から記事を投稿するタイプのウェブログ向け簡易CMSで、オープンソース。それに、過去に利用していたWordPressNucleus CMSとは異なり、軽量なフラットファイルCMSで、つまりはデーターベース(RDBMS)が不要。加えて、過去に利用していたBlognPlusとは異なり、開発が継続中。

Home