Blog

ブログを若干リニューアル

  • Update2013-04-21
  • Category
    • Design/UI/UX
  • Other--
ブログを若干リニューアルのサムネイル画像

By: Rob Davies

以下、変更内容

運用ベースの変更が主かもｗ

  1. Bootstrapベースのレスポンシブデザイン対応/html5対応
  2. google-code-prettifyを仕込む
  3. ソーシャルプラグインの整理
  4. アイキャッチ画像をFlickrから探せるFlickr – Pick a Pictureを導入
  5. 広告を配置

1,Bootstrapベースのレスポンシブデザイン対応/html5対応

今まではスマートフォンデザインはWP-touchというプラグインに任せてましたが、レスポンシブ対応でワンソース管理にしました。ベースのhtmlになっているのは320pressというサイトのWP-Bootstrapというフリーテーマです。

WP-Bootstrap

WP-Bootstrap

twitter BootstrapというCSSライブラリに対応。そのおかげで元々レスポンシブ対応になっています。Wordpressのベーステーマフォーマットとしてはかなり出来がよく、1からコーディングするより楽です。ちなみにWordpresのデザインは表面のデザインの他に、記事中のデザインも合わせてする必要があります。Bootstrapをベースにするとその辺うまくやってくれるので便利ですね。

html5もWP-Bootstrapがhtml5に対応しているので特に意識せず対応。既存IEでもhtml5を認識させるおまじないライブラリのhtml5.jsも元から入っています。

なお、元のデザインを若干変更するためいろいろ手を加えています。Botstrapの法則に基づいているので編集は意外と楽です。ただし、レスポンシブ対応したテーマなので、表示幅の対応数分編集が入るのでそこは手間です。

ちなみに記事中のデザインをする時、テスト記事に全部htmlが入っているものがあると便利です。自分はコリスさんの

[CSS]HTMLの各要素が配置されたスタイルシートのチェック用のテンプレート | コリス
http://coliss.com/articles/build-websites/operation/css/1457.html

を使わさせてもらいました。

2,google-code-prettifyを仕込む

google-code-prettify – syntax highlighting of code snippets in a web page – Google Project Hosting
http://code.google.com/p/google-code-prettify/

つまり↓のような表現ができるJSライブラリです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Title記述</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
</head>
<body>

    コードを記述

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/google-code-prettify/prettify.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>prettyPrint();</script>
</body>
</html>

Bootstrapのページで以下のような説明を上手いビジュアルで見せているので、今後何かノウハウ系の記事を書くとき使ってみようかと。

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  …
</table>

※仕込み方は後で記事を書きたいと思います。

3,ソーシャルプラグインの整理

今まで手で埋め込んだものやプラグインが勝手に仕込んでくれるものいろいろあってよく分かんないけどとりあえず表示できていましたが整理しました。

まず、個別ページの左上に表示されているソーシャル関連のボタンは「Sharebar」というプラグインを導入。

Sharebar

Sharebar

スクロールしても消えないし、大きいボタン、小さいボタンと2つのコードを記入する枠が設けられていて、大きいのはPC用、小さいのはスマホで表示されるようになっています。(※PCの方、見た目がガタガタでちょっと調整の必要があるね)

また、個別記事の下には「WP Social Bookmarking Light」を使っています。シンプルで説明がなくても設定の仕方が容易です。

03

WP Social Bookmarking Light

なお、ogpの設定なのですが「Open Graph Pro」というプラグインで仕込んでいますが、facebookの仕様が最近変更になりサムネイル画像が200×200以上になり、Open Graph Proはまだ対応してないみたいです。なのでJetpackで対応。

※これらも仕込み方など後で記事を書きたいと思います。

4,アイキャッチ画像をFlickrから探せるFlickr – Pick a Pictureを導入

最近のブログは記事の一番最初に画像を付けて、おおよそなんの記事か把握させるのが流行っているようです。もちろん関係ないのもあるけどね。飾りとして使うとか。当ブログでもそのような運用をしよと考えたところ、毎回画像を用意するのが手間になるなと予測。Flickrの画像を商用利用(CCライセンス)でも無料で簡単に仕込めるプラグインを探していたら、「Flickr – Pick a Picture」を見つけました。

Flickr - Pick a Picture

あと、今までの記事にアイキャッチ画像を仕込んでいない場合、アイキャッチ画像を自動で仕込んでくれる「Auto Post Thumbnail」というプラグインもありました。テストサイト上で試してみたところ。画像の切り抜きが発生する＆記事に投稿されている画像を使用するので画像がだぶる、などの理由で使いませんでした。

5,広告を配置

読者的にはうざいかもしれませんが、場所を決めてうざくないところに配置。サイドバー右上のレクタングルバナー、記事下に2つのレクタングルを配置。サーバー代くらいは稼ぎたいのでごめんなさい。

という感じですね。

もろもろ後で個別記事を書くかもしれまん。忘れないうちに早めに書きたいとは思います。

今回デザインは時間がかかるのであまり力を入れず、レイアウト調整と記事中のフォント調整ぐらいにとどめました。見出し、段落などメリハリつける等ですね。まあ全体的にデザインを整えていくのはちょっとずつやっていこうかなと。あと、所々英語表記なので直すかも。でも英語のままでもいいかな。まあ、あとで考える。優先順位的にカテゴリの整理が今のところ一番。過去記事含め1000記事はあるので頭がいたいです。