MTブログスタイル Jekyll用テンプレート『sakmyll』

このソフトウェアはメンテナンスを終了し、アーカイブに移動しました。

Download

CELLA.DAT内Trashboxを参照

https://radioc.web.fc2.com

特徴

2カラム、左サイドバー固定幅+右メインリキッド、Movable Typeのブログでよく見られるトラディショナルな編成、シンプルなスタイルのJekyll用テンプレートセットです。

次のテンプレートを元に改変しています。

This project is branched from Dbyll http://dbtek.github.io/dbyll/ by dbtek.

• レスポンシブ対応
• カテゴリー分類・タグ付け
• HTML5基準のコード記述(申し訳程度にIE8以前での表示を考慮)
• RSS(1.0/2.0)フィード生成
• sitemap.xml生成
• 記事見出し画像を設定可能
• Pygmentsによるソースコードのハイライト表示
• Disqusコメント欄を設置可

動作確認環境

• Windows 10 TP 9926 jpn
• Ruby 2.1.5
• Python 2.7.9
• Jekyll 3.0.0beta1
• pygments.rb 0.6.2
• Firefox 35
• Internet Explorer 11

使用方法

1. _postsディレクトリ内にMarkdown(UTF-8 BOM無し)記事ファイルを配置する。
2. _config.ymlファイルをテキストエディターで適当に書き換える。BASE_PATHにあなたのホストアドレスを記述する。
3. 付属のバッチファイルを参考にJekyll。

ライセンス

• MIT

使用外部コンポーネント

• jQuery, Bootstrap, Font Awesome(CSS) : MIT
  • jQuery
  • Bootstrap · The world’s most popular mobile-first and responsive front-end framework.
  • Font Awesome, the iconic font and CSS toolkit
• Font Awesome(Font) : SIF OFL 1.1
  • Font Awesome, the iconic font and CSS toolkit
• MathJax : Apache License
  • MathJax
• assets\ico\noimage.jpg : Public Domain
  • Image of none.svg - Wikimedia Commons
• assets\ico\feed-icon_orange-16px-.png : Unknown
  • A Nice Collection of Feed Icons - Perishable Press

公開日

• 2015/02/24:本テキスト新規作成
• 2013/12/10:テンプレート作成

開発メモ

テンプレート構成

• assets\ - 各種リソースファイル・外部コンポーネント
• includes\ - テンプレートファイル
  • default.html - 全てのページのベーステンプレート
    • sidebar.html - サイドバー部分のみのコード
  • post.html - 記事ページ用テンプレート
  • page.html - 記事以外のページ(index.html, cats.html, tags.html)用のテンプレート
• layout\ - レイアウト名とテンプレートとの関連付け
• index.html - 記事Indexページ(paginator)
• tags.html - Tagsページ
• cats.html - Categoriesページ
• feed.rdf - RSS1.0
• feed.xml - RSS2.0
• sitemap.xml - Google webmaster tool用sitemap.xml
• _config_build.yml - 設定ファイル ビルド用
• _config_prev.yml - 設定ファイル プレビュー用
• jekyll_build.bat - Jekyll実行バッチファイル ビルド用
• jekyll_prev.bat - Jekyll実行バッチファイル プレビュー用

上記以外のファイルは表示確認用のサンプルファイルです。テンプレートに含みません。

レスポンシブ対応

画面幅が768px以下の場合はサイドバーが非表示になります。スマートフォンなどの小さな画面でも記事本文を拡大することなく閲覧することができます。

カテゴリー・タグをサポート

カテゴリー・タグの分類をサポートしています。カテゴリー名はURLの問題があるので日本語に対応していませんが、タグ名については日本語も使えます。カテゴリーページ(cat.html)ではタイトルにカーソルを合わせると記事見出し画像がポップアップします。cats.html, tags.htmlは改善の余地あり。

sidebar tags catsのサイズ補正

sidebar tags.html cats.htmlについては、JavaScriptを使って表示域を表示画面に応じてサイズ補正しています。もっとスマートな方法はないだろうか。

Internet Explorer 8以前での表示

IE8以前では2カラムにならない、カテゴリー・タグページのタブが開かないという不具合があります。テンプレート(default.html)のHTMLコードでサイドバーをメインカラムより後に配置してあるのは、この問題を考慮したためです。ただ基本的に、レガシーブラウザには配慮しない方針です。

記事ファイルYAMLヘッダー独自拡張

update

記事の更新日時を指定します。これを指定すると記事下部に「Last modified on yyy-mm-dd.」という文字列が入ります。省略可能。

imgurl

画像ファイル(jpgまたはpng)へのURLを指定。記事見出し画像を指定します。これを指定すると記事ページとindexページに見出し画像を表示し、またRSS2.0フィードの該当記事にenclosureでURLを指定します。省略可能。

対応ブラウザ

以下の条件を組み合わせると、IE 9+、Firefox 4+、Chrome 6+、Safari 5+、Opera 12.1+、Android 2.3+。

New semantic elements(elements: section, article, aside, header, footer, nav, figure, figcaption, time, mark, main)

IE 9+ Firefox 4+, Chrome 6+, Safari 5+. Opera 11.1+, iOS 4.0+, Android 2.2+

CSS3 Media Queries

IE 9+, Firefox 3.5+, Chrome 4+, Safari 4+, Opera 9.5+, iOS 3.2+, Android 2.1+

Font Awesome 4.0+

IE 8+

Bootstrap

IE 8+, Firefox, Chrome, Safari

MathJax

IE 6+, Firefox 3.0+, Chrome 0.3+, Safari 2.0+, Opera 9.5+, Android 2.1+, iOS

jQuery 2.x

IE 9+, Safari 5.1+, iOS 6.1+, Android 2.3+, Opera 12.1+, Chrome Newest, Firefox Newest

レガシーブラウザの対応状況

IE4SP2 1カラム レスポンス表示NG 色指定OK Awesome Font NG ウィジェットNG タブ切替NG

IE8 1カラム レスポンス表示NG 角丸表示NG Awesome Font OK ウィジェットはZenbackのみNG タブ切替NG

Opera 8.54 2カラム レスポンス表示NG 色指定OK Awesome Font NG ウィジェットはDisqusコメント履歴のみ表示可能 タブ切替NG

Opera 9.64 レスポンス表示OK 角丸表示NG Awesome Font NG ウィジェットOK タブ切替NG

Opera 10.63 レスポンス表示OK 角丸表示OK Awesome Font OK ウィジェットOK タブ切替NG

Opera 11.52 レスポンス表示OK 角丸表示OK Awesome Font OK ウィジェットOK タブ切替NG

sakmyll - jekyll template side-article kmyll.

Copyright © 2015 akm.

=============================README.md END=============================