Geeklog

新テーマ「newspaper」は、「WAIproCSS Ver2.5.1 for Geeklog1.8.1」をベースにCSS3のMedia Queriesを使用したレスポンシブWebデザインのテーマです。PCは2カラム、iPad&iPod touchは中央ブロック1カラム&左右ブロック２カラムレイアウトになります。

テーマ「newspaper」 PC・iPad・iPod touchのキャプチャ画像です。

jQueryプラグインではlightbox, Feedback, code highlighter, CKEditorが用意されています。 それぞれコンフィギュレーションで有効に設定すると、提供されているjQueryが、Geeklogサイト内ですぐに利用できます。

特にlightboxは自動タグで簡単に記述できます。 画像のサムネイルを自動的に作成してキャッシュされ、jQueryで画像をポップアップしてくれる機能です。

自動タグの表記：

 [lightbox:画像のパス width:** height:**] 

自動タグは、記事、静的ページだけでなく、ブロックや各種テンプレートで利用できます。※

記事や静的ページでは、アドバンストエディタのモードにすると、利用できる自動タグが表示され、ヘルプも表示されます。

例）lightboxで画面キャプチャーを紹介します。

[lightbox:/images/library/Image/chips/lightbox.png width:400 height:auto]

※ヘッダ、フッタなど多くのテンプレートで自動タグが利用できます。ただし、Geeklog 1.8.1では記事の各テンプレートで自動タグが利用できませんが、Geeklog 1.9.0以降で利用可能になります。

新テーマ「sincere」は、「WAIproCSS Ver2.5.1 for Geeklog1.8.1」をベースに２カラムのエラスティックレイアウトを採用してます。

そして、このテーマはCSS3を使用し「プログレッシブ エンハンスメント」を取り入れてます。
(プログレッシブ エンハンスメントの説明は、@kaz_wuiさんのサイト「Website Usability Info」のプログレッシブエンハンスメント（Progressive Enhancement）という考えかたで詳しく説明されています。)
ですので、CSS3に対応していないブラウザでは単調なデザイン(ヘッダ等の背景のグラデーションが単色になる等)になりますが、情報は正しく得られるよう作成しております。

テーマ「sincere」 Internet Explorer7のキャプチャ画像です。

また、サイトロゴのフォントは、Google Font APIを使って表示してます。
(Google Font APIについては、@yhassyさんのサイト「could」のGoogle Font API で手軽に始めるフォント遊びで詳しく説明されてます。)

テーマ「sincere」も「WAIproCSS」と同様、アクセシビリティに配慮して作成しています。

Twitter Facebook Google+ソーシャルボタンは以下のコードを追加してください。

storytext.thtml, featuredstorytext.thtml:

<div style="clear:both" class="topsy_widget_data" style="float:left; margin-left: 0.75em;">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{site_url}/article.php/{story_id}" data-text="[Geeklogjp]{story_title} #geeklogjp" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.geeklog.jp%2Farticle.php%2F{story_id}&amp;layout=button_count&amp;show_faces=1&amp;width=90&amp;action=like&amp;colorscheme=light&amp;height=80&amp;font=verdana&amp;locale=ja_JP.UTF-8" scrolling="no" frameborder="0" style="border: none; overflow:hidden;width:120px; height:20px; margin-top:-8px" allowTransparency="true"></iframe>
<g:plusone href="{site_url}/article.php/{story_id}"></g:plusone>
</div>

Twitter用のGeeklogjp　{story_title} #geeklogjp　や　Facebookのwww.geeklog.jp の部分はサイトにあわせて修正してください。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

参考テーマ： adeliaewhite

さらに、OGPプラグインをインストールして、Facebook コメントを記事に追加、meta tag og を挿入できます。 Assistプラグイン（開発中）を追加するとどこにでもFacebookコメントや各種ソーシャルブックマークを配置できるようになる予定です。

http://geeklog.fr/article.php/googlemaps-plugin-pour-fckeditor

インストール方法：

FCKConfig.Plugins.Add( 'googlemaps', 'ja,en,de,es,fr,it,nl,no,zh') ;

FCKConfig.GoogleMaps_Key = '*****************************' ;

2007年に、Geeklogの特長および欠点と対策を記事で紹介していましたが、2011年現在、再び紹介したいとおもいます。

[staticpage:add-ons-1.8.1]