Picture

Hi, I'm ogaclejapan.

Android Software Engineer at AbemaTV

Bootstrap臭のする静的サイトが作れるJekyllテンプレ

新年あけましておめでとうございます。 彡^・∋★A Happy New Year★∈・^ミ

以前使っていたJekyllテンプレートのデザインに飽きたので、
【難しく考えすぎ!?】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
を横目にBootstrap臭のするお洒落じゃないレスポンシブなテンプレを自分で作ってみました。

ス、スミマセン…、CSSへの理解が足りないエンジニアの自分にはBootstrapのオイニーがとれない(´;ω;`)ブワッ

Jekyllstrap - (Source Code)
Image

主な機能

このサイトのデザインを刷新する目的で作ったので、ブログ向けの実装がメインになってます。

また、広告とか設置する予定がなかったのでPC向けのレイアウトでよく見かける一般的なサイド領域は無視しました。

実装したもの

  • アーカイブ、カテゴリー、タグ一覧

    一年毎の投稿一覧、カテゴリー毎(投稿が多い順)の投稿一覧、タグ毎(投稿が多い順)の投稿一覧を生成します。

  • インデックス一覧のページング

    _config.ymlで5件毎のページング処理を有効にして、ページネーションをインデックスページに追加しました。

  • ATOMフィード

    一応ブログなのでRSS的な配信ができるようにatom.xmlを生成します。

  • SEO対策

    Google先生がインデックスし易いようにsitemap.xmlrobots.txtを生成します。

  • Google Analytics対応

    サイト計測用にGoogleアナリティクスのjsを各ページに埋め込んでます。
    _config.ymlに取得したトラッキングコードを定義するだけで機能が有効になります。

      google_analytics :
        tracking_id : 'UA-XXXXXXXX-X'
    
  • AddThis対応

    投稿ページの共有用と記事レコメンド用にAddThisのjsを埋め込んでます。
    Analyticsと同様に_config.ymlに取得したコードを定義するだけで機能が有効になります。

      addthis:
        pub_id: 'ra-XXXXXXXXXXXX'
    
  • レスポンシブ画像対応

    Bootstrap3からレスポンシブ画像に対応したようなので、対応したimgタグを生成できるように簡単なJekyllプラグイン作りました。
    ※Markdownの画像指定![image](hogehoge.jpeg)ではレスポンシブになりません

      e.g. {% image hogehoge.jpeg %}
      ビルドすると、↓こうなります
      <img src="hogehoge.jpeg" class="img-responsive">
    

今後実装したいもの

  • SEO強化([schema.org][schema-org]の構造化データ対応) 最近記事でちょいちょい見かけるやつ。全然理解してないのでSEO勉強がてら実装してみたい。

    (1/14追記) スキーマ(Schema.org) 入門編を参考に実装してみました。

  • テーブル構造のレスポンシブ対応

    Bootstrap自体はtableタグのレスポンシブに対応してるんですが、どうもdivタグでtableタグを囲むと定義した部分より1つ前の部分に記載されたMarkdown構文が解釈されず、そのまま出力されるという現象に悩まされてます。
    Markdownの仕様なのか、パーサーで使用しているredcarpetの仕様なのか、もしくは不具合なのか原因不明ですが、なんとかしたいデス。。

まとめ

Bootstrap臭でよかったら使ってやってください。

Jekyllstrap - (Source Code)

もっとJekyllについて詳しく知りたい方はこの辺のサイトを参考にすると分かりやすいでしょう。

Gruntを組み込んで使ってる方もいるようです。

会社でもGHEが導入されたのでプライベートリポジトリで社内用メモ帳として使ってみるかな〜
|゚Д゚)))コソーリ!!!!

Back to Top