WordPressテーマ : Celtis_s

Celtis_s テーマ

写真やギャラリー、スライド等をメインとしたブログにお勧めのテーマです

Sass

Celtis_s は、Sass ベースのレスポンシブテーマです

  • Automattic の _s をベースに公式テーマ等の標準的な構成に準拠しています
  • Sass を使用したテーマを新たに作成する場合のベースにもお勧めです

テーマのデザインは、CSSというスタイルシートの定義で行っていくわけですが、このCSSを直接記述していくというのが、融通が効かないところもあり、なかなか面倒であります。

そこで、より使いやすいようにCSSを拡張したCSSメタ言語がいろいろあるのですが、その中でもっとも普及していると思われるのが Sass です

Sassは、CSSと互換がありながらも構造的な記述や簡易プログラム的な変数、演算、関数等の機能がつかえるので全体の見通しがよく簡潔に記述できるようになります

スタイル

Celtis_s のスタイルの特徴について紹介します

  • ホームページは、ブログカードスタイルで表示しています
    • 投稿フォーマットを活用してタイプごとにアイコンや色で区別しています
    • 画像、ギャラリー、動画フォーマット時はアイキャッチを効果的に使用しています
  • 投稿ページは、右サイドバー付きの2カラム構成です
  • 固定ページは、サイドバー付きの2カラムとサイドバーなしの全幅ページが指定出来ます
  • 基本コンテンツ幅は、文章、写真、動画、スライド等が見やすい640にしています
  • 画像の添付ファイル表示は、背景画像形式で写真を大きく効果的に魅せるようにしています
  • メニューやウィジェットに透過色を使用することで、背景色により微妙に色が変化する等の効果が楽しめるようになっています

※ 必須プラグイン Celtispack の FitVids, oEmbed extend 等の機能により、写真、動画、スライド(Youtube, Vimeo, Flickr、Instgram, Vine, SlideShare, SpeakerDeck )等を見やすくレスポンシブにすることが出来ます

文章だけではどんなスタイルか判り難いので、各デバイスでのホーム、投稿記事、添付画像のサンプル画像を見て下さい

特に写真を記事内に挿入している場合は、リンク先に添付ファイルを指定していただくと写真を大きく効果的に魅せるようにしていますし、広告の表示も可能ですのでライトボックス系のプラグインで表示させるよりもお勧めです

 デスクトップ
タブレット
 スマートフォン

 

ホームページがカード形式で表示されているのが判ると思いますが、投稿フォーマットにより表示形式が変わります

  • アイキャッチがない場合は、コンテンツの抜粋を表示
  • 画像、ギャラリー、動画フォーマットは抜粋なしの 640サイズサムネイル
  • その他の投稿フォーマットは抜粋と中サイズのサムネイル

※モバイルはシュミレータでの確認で、実機ではありません

表示サンプルページ

下記リンクページからサンプル表示が確認出来ます

 

スピード対策

ホームページとサイトマップの一部分でキャッシュ処理を使用して、高速化を試みています

効果的なのがページキャッシュです。私の作成した YASAKANI Cache が手軽で簡単に使えますのでお勧めです

WordPress Plugin : YASAKANI Cache
WordPress が超高速になるシンプルで使いやすいページキャッシュプラグインを作りましたので紹介します。SQLite を活用した簡易的なアクセスログ機能もあり、キャッシュ効果を簡単に確認することができます (^^)…

また、Plugin load filter プラグインや Celtispackプラグインの Unveil lazy load 機能 を使うことで高速化対策を簡単に行うことが出来ます

WordPress Plugin : Plugin Load Filter
WordPress で沢山のプラグインを使用している場合に Plagin Load Filter プラグインを使うと、ページタイプや投稿フォーマット、カスタムポストタイプ毎に有効化するプラグインを動的に選択することが出来ます。 プラグインの読み込みを減らし、ページ表示のレスポンスを高速化する効果があります (^^)…

テーマやプラグインを使わない高速化対策として .htaccess を適切に設定する方法もあります

mod_deflate, mod_expires を使用してHTTP通信データ量を削減

 

機能

Celtis_s テーマは、必要最低限の機能は抑えつつ、出来るだけシンプルにしています

別途このテーマに最適化された Celtispack プラグインを導入することで、様々な便利機能が使用できるようになります

合わせてお使いいただくとシンプルなのに多機能というベストバランスな組み合わせとなります

テーマでサポートしている機能

  • パンくずリスト
  • ページナビゲーション
  • 背景画像サポート
  • ヘッダー画像サポート
  • サイトロゴサポート(WP4.5以降)
  • メインメニュー、フッターメニューサポート
  • カスタマイズ画面からメニュー色、リンク色を簡単に設定(透過色対応)
  • 投稿フォーマットサポート(タイプ別アイコン表示)
  • Twitter,Facebook,Google+,RSS フォローアイコン表示機能
  • Googleカスタム検索サポート
  • Google WebMaster tool の構造化データエラー対策(microformats hentry)
  • 固定ページのサイドバー有無(1カラムのページ作成対応)
  • 追尾型のサイドバーエリア
  • サイトマップ
  • 一時キャッシュを用いたトップページとサイトマップページの高速化
  • bbPress(フォーラムプラグイン)用のスタイル定義

Celtispack プラグインでサポートしている機能

  • Google アドセンス
  • Googleアナリティクストラッキングコード設置
  • ブログカード機能
  • サムネイルの再作成機能
  • アイキャッチ未設定時の代替サムネイル機能
  • jpeg 画像の画質指定
  • png画像のサムネイルを jpg形式へ変換する機能
  • 画像、埋め込みコンテンツの遅延ロード (Unveil.js) 機能
  • ギャラリーのスライダー表示機能
  • youtube 等の動画のレスポンシブ対応機能(FitVids)
  • トップへ戻る及びスクロールアップ、ダウン
  • シンタックスハイライト google-code-prettify サポート
  • 記事タイトル後、モアタグ後、コンテンツ後にウィジェットエリア設置
  • 関連記事ウィジェット(画像付)
  • 新着/更新記事ウィジェット(投稿フォーマット、カテゴリー指定対応)
  • oEmbed 埋め込み用ウィジェット
  • ページビューと人気記事ウィジェット(アナリティクスデータ使用)
  • 関連記事対象としたダイナミックタグクラウド
  • 記事の複製や予約更新機能
  • jQueryを Microsoft Ajax CDN からロード
  • description meta タグの出力(SEO)
  • スクリプトとスタイルシートの ?Ver 情報を取り除く
  • テキストウィジェットでショートコードの使用許可
  • セルフピンバックの禁止
  • 期限切れの Transient キャッシュをクリア機能

 

未実装のためプラグインでの対応を期待している機能

SNSボタンやSEO関連の機能は不足していますので、この部分はお気に入りのプラグインを使用して頂ければ良いのですが、このテーマでは JetPackプラグインとともに使用していただくことを想定しています

JetPackプラグインを導入すると、不足している機能のかなりの部分が解消されると思います

Jetpack が使えないという場合

セキュリティ対策からレンタルサーバーでポートが塞がれている場合があります

例えば、私の利用しているエックスサーバーでは、セキュリティ対策で XML-RPC API アクセス制限がかかっていて、Jetpack の認証がうまく行きません

エックスサーバーの設定パネルからこの制限を解除してしまえば使えるようにはなるのですが、XML-RPCへの不正アクセスは大変多いので解除した場合は別途何らかの対策を施す必要があります

私の場合は、Jetpack のアクセスと自分の使用しているプロバイダからのアクセスのみを許可するように .htaccess に下記記述を行っています

<FilesMatch "xmlrpc.php$">
order deny,allow
deny from all
allow from .wakwak.ne.jp
allow from 192.0.64.0/18
allow from jetpack.wordpress.com
</FilesMatch>

※wakwak.ne.jp の部分は、ブログエディタ等で xmlrpc へアクセスを許可する為に私が現在利用中のプロバイダを指定してます。xmlrpc へのアクセスが不要な場合は jetpack からのアクセスのみ許可すればOKです

※ピンバックも xmlrpc により行われていますので無効化されてしまいます

まだまだ、足りない機能もあるとは思いますので、お気に入りのプラグイン等と組み合わせて使用して頂ければと思います (^^)

ダウンロード

Celtis_s 最新版 2016/10/21 Version 1.3.0

Celtis_s Ver1.3.0 (WordPress テーマ)

Download42 downloads

 

旧バージョン  Version 1.2.0

Celtis_s Ver1.2.0 (WordPress テーマ)

Download210 downloads

 

Celtis_s をパワーアップする機能満載のプラグインパックも合わせてお試し下さい

Celtispack プラグイン のダウンロードは WordPress Plugin : Celtispack ページから行うことが出来ます

注意

動作には WordPress 4.1 以上が必要です

動作確認は、Chrome, Firefox, IE の最新版で行っています。

※IE9 以前のバージョンには対応していません

 

本ソフトウェアを使用した事による、いかなる損害も作者は一切の責任を負いませんので、自己責任の上でご使用下さい

モバイル環境の確認はシュミレータのみで実機では行っていません。実機で動作させた場合にいろいろ不具合があるかも知れませんが、使用感等を送っていただけると嬉しいです (^^)

インストール

WordPress バージョン4.1以下の場合は、先に WordPress のバージョンを上げてからインストールして下さい(WordPress4.3 以上推奨)

下記手順でテーマをインストール出来ます
また、既にインストール済みの Celtis_s テーマをバージョンアップする場合には、一度違うテーマに切り替えてから古いバージョンの Celtis_s を削除してからインストールを行う必要があります

  1. WordPress 管理画面を表示します
  2. 左側のメニューから外観のテーマを選択します
  3. 表示された画面の上部の 新規追加 をクリックします
  4. 表示された画面の上部の  テーマのアップロード をクリックします
  5. ファイルを選択 ボタンをクリックして、ダウンロードしてある Celtis_s_v1.x.x.zip ファイルを選択します
  6. 今すぐインストール ボタンをクリックするとインストールが行われます
  7. 有効化すれば、このテーマが使用できるようになります

テーマを有効化すると Celtispack プラグインがインストールされていない場合は案内メッセージが表示されますので、続けて Celtispack プラグインをインストールして下さい

※Celtispack プラグインをインストールしなくても使用することは可能ですが、便利機能満載のプラグインなのでインストールすることをお勧めします (^^)

 

初期設定

WordPress 管理画面を開いて、左側のメニューから外観のカスタマイズを選択します

ここからテーマのカスタマイズを行うことが出来ます

  • サイト基本情報
  • オプション設定
  • リンク&メニュー色
  • SNSアイコン表示
  • ヘッダー画像
  • 背景画像
  • メニュー
  • ウィジェット

詳細は下記を参照してください

Celtis_s テーマのカスタマイズ(初期設定)
WordPress の Celtis_s テーマのカスタムヘッダー、メニュー、背景の設定等についての紹介です

各機能の設定方法

Celtis_s テーマにWordPress4.5でサポートされたサイトのロゴを設置する
Celtis_s テーマに WordPress4.5 でサポートされたサイトにロゴを設置する為の手順を紹介します
簡単に出来ますので、ぜひチャレンジしてみてください…
Celtis_s テーマにGoogleカスタム検索を設置する
Celtis_s テーマに Google カスタム検索を設置する為の手順を紹介します
簡単に出来ますので、ぜひチャレンジしてみてください
Celtis_s テーマにサイトマップを設置する
Celtis_s テーマに サイトマップを設置する為の手順を紹介します
簡単に出来ますので、ぜひチャレンジしてみてください
Celtis_sテーマに SNS機能を設置
Celtis_s テーマに JetPack プラグインの共有機能を導入する手順を紹介します
パブリサイズ共有、共有ボタン, JetPackコメントの設置等SNSとの連携でアクセスを増やしましょう
Celtis_s テーマの動画等レスポンシブ対応について
Celtis_s テーマで動画やスライドを埋め込んだ時の設定について紹介しています
ブラウザのサイズをいろいろ変えてみると動画やスライドがいい感じで拡大縮小してくれるのが確認出来ます (^^)…

Sass(scss) から css ファイルへの変換方法

Sass(sccs) のコンパイルは node-sass がRuby不要でシンプルかつ高速!
Node.js の node-sass モジュールを使って Sass(scss)スタイルシートをコンパイルして css に変換する方法を紹介します。Rubyも不要だし、とても高速なのでお勧めです (^^)…
Visual Studio Code で Sass(scss)コンパイルを行うシンプルな方法
Visual Studio Code で node-sass を使い Sass(scss) コンパイルを簡単に行うことが出来るので設定方法と使い方を紹介いたします (^^)

 

まだ設定や使い方の情報が足りないかも知れませんが、不定期に追加していく予定ですので、たまにこのページを参照して更新されていないか確認してみてください (^^)

 

テーマ開発の励みにもなるので、クールなサイトが出来たら教えて下さい (^^)

Have a good fun!  ヽ(^o^)丿

 

履歴

2016/10/21 Version 1.3.0

  • bbPress (フォーラムプラグイン)用のスタイル定義追加
  • bbPress カスタムポストタイプ forum, topic, reply 時はテーマのパンくず表示を停止
  • Home, Sitemap 簡易キャッシュをデフォルト無効にする(YASAKANI Cache プラグインの使用を推奨)
  • 付属している JS ファイルのミニファイ化
  • 推奨プラグイン Celtispack の案内を 2.2 以上に変更
  • CSS調整
  • PHP Notice エラーの修正

 

2016/6/6 Version 1.2.0

  • Custom Logo サポート (WP4.5)
  • ページ分けしている場合のページネーションリンク表示位置をカテゴリー、タグ表示前に変更
  • 推奨プラグイン Celtispack の案内を 2.0 以上に変更
  • CSS調整

 

2016/3/24 Version 1.1.0

  • 投稿タイトル部への背景画像表示を追加
  • レスポンシブイメージ srcset のテーマ対応
  • 全体的なデザインの微調整

 

2016/3/2 Version 1.0.2

  • header <link rel=”profile” href=”http://gmpg.org/xfn/11″> を削除
  • 推奨プラグイン Celtispack の案内を 1.8 以上に変更
  • 開発環境の Sass(ruby) を node-sass(node.js) に変更したことに伴う修正
  • VSCode で scssファイルのカスタマイズが出来るよう tasks.json, package.json を同包

2015/11/24 Version 1.0.1
CSS調整と Celtispack プラグイン Ver1.70 対応

2015/10/23 Version 1.0.0
公開

 

WordPressテーマ : Celtis_s” への2件のコメント

  1. 初めまして。今日ダウンロードさせて頂き設定等していますが、カスタマイズのところではサイドバータイトルの色設定が出来ないようなのですが、CSSで変更するのでしょうか?

    1. カスタマイズからの色設定はメニューとリンク色関連しかサポートしていませんので、それ以外のカスタマイズに関しては、Sass で行うようになります。
      Sassを使用するには、環境を構築しなければならないので最初はちょっと面倒かも知れませんが、一度環境を作ってしまえば後は css を記述するより楽なのでチャレンジしてみてください。

      Sass の環境構築は、私の場合 Netbeans というIDEを使っています。 http://celtislab.net/archives/20140806/netbeans-scss-compass-install/  に構築手順を紹介していますので参考にしてみてください

      ちなみにサイドバーウィジェットのタイトル色は celtis_s/sass/variables-site/_variables-site.scss ファイルの91行目 $color__text-widget-title で指定しています

コメントを残す