Geeklog にSocial buttonを追加する方法はこちら。

header.thtml:

<meta name="twitter:image:height" content="400"{xhtml}>
<meta name="twitter:image:width" content="500"{xhtml}>
<meta name="twitter:url" content="<?php echo htmlspecialchars(htmlspecialchars(COM_getCurrentURL(), ENT_QUOTES, 'UTF-8'), ENT_QUOTES, 'utf-8'); ?>"{xhtml}>

footer:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>

storytext.thtml, featuredstorytext.thtml

    <ul class="uk-subnav uk-flex-right uk-margin-remove">
      <li><g:plusone href="{site_url}/article.php/{story_id}"></g:plusone></li>
      <li><a class="twitter-share-button" data-url="{site_url}/article.php/{story_id}" href="https://twitter.com/intent/tweet?text={story_title}" data-lang="ja">Tweet</a></li>
      <li><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F{!!autotag domain: !!}%2Farticle.php%2F{story_id}&amp;width=150&amp;height=20&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;send=true&amp;appId={!!autotag conf:facebook_consumer_key !!}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:20px;" allowTransparency="true"></iframe></li>
    </ul>

see more:

https://github.com/ivywe/Default/commit/81f6c0e8e95782d916f3f2f3cfd9098d7ce55b8f
https://github.com/ivywe/Default/commit/144634e42e9c42aff1cb5bcf83f08144c73bc268

Geeklog 2.1.1 Default theme download:
https://github.com/ivywe/Default

Twitter:

https://dev.twitter.com/web/tweet-button

Autotags plugin: name domain: content example.com

ソーシャルボタンをIllustrator形式、Photoshop形式で配布。
Sensational Fix
http://sensationalfix.com/flat-social-icons-eps/
Thanks!

Hover CSS3を配布。
Hover style:
http://ianlunn.github.io/Hover/

気になるサイト
http://eonreed.com/about/why-eon-reed/

Sensational Fixで使われているWordPressのテーマ
http://sensationalfix.com/flat-social-icons-eps/

Google Developerが提供しているPageSpeed Insightsを活用してサイトの表示スピードを改善する方法を紹介します。
なお、このPageSpeed Insightsでは、改善したソースを圧縮ファイルでダウンロードするサービスまで提供しています。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

ターゲットのURLを入力して計測して改善しましょう。

主な対策を紹介します。

１．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する


２．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

Javascriptの読み込みは、ヘッダーではなく、フッターで読み込みます。

Geeklogの場合、テンプレートfooter.thtmlに記述。あるいは、functions.phpでjsファイルは、footer = 'true' にして、footerで読み込むモードにします。


３．画像を最適化する

４．CSS、JavaScript、HTML を縮小する

HTML圧縮：
Geeklogの場合は、コンフィギュレーションでHTML圧縮をONにします。ただ圧縮にCPU負荷をかけることになりますが、Googleからは褒めらるようです。試してみてください。


計測したページ向けに最適化された画像、JavaScript、CSS リソースは、ダウンロードできます。

画像、JavaScript、CSS リソース　をクリックして、圧縮ファイルをダウンロードして、サーバーのファイルと置き換えましょう。

なお、上記画像は、PageSpeed Insightsで表示された画像です。

CSSフロントエンドフレームワークについて

CSSやJavaScriptは、サイトごとに個別に開発するのではなく、フレームワークを開発してそれをすべてのWEBに最初から提供する方式が一般的になりました。WEB開発を高速化、効率化させる力強い味方になるためです。

CSSフロントエンドフレームワークは、MITなどオープンソースライセンスにて公開、開発が進んでいます。

最も有名なCSSフロントエンドフレームワークは、当初Twitterの開発者が開発したBootstrapです。

Foundationは、レスポンシブウェブデザインの機能を強化するなど、高機能さを売りにしたCSSフロントエンドフレームワークです。

対してUIkitは、軽量かつ高機能。名前空間(Namespace)の設計が秀逸で、すべての機能をバランスよく網羅して、配布サイトのドキュメントがわかりやすいのもポイントです。

UIkitに乗り換えたい７つの理由

１．名前空間（Namespace）が秀逸

UIkitでは、すべてのclass名、Javascript関数名の前置子として、UIkitを表す"uk-"が付いています。

Bootstrapなどフレームワークを追加すると起きがちなコンフリクトの心配をゼロにできることは、開発者の負担を大幅に軽減できます。

覚えやすいネーミングも、開発者のストレスを軽減できます。 styleの属性を覚えている開発者なら、UIkitのネーミングはすぐに覚えられるのではないでしょうか。

smallpdfは、PDFを変換、分割、結合などができる、スイスで開発されたウェブサービスです。

http://smallpdf.com/jp



PDFをドラッグするだけで、変換されたファイルがダウンロードできます。

提供しているサービス：
PDF 圧縮
PPT PDF 変換
PDF PPT 変換
JPEG PDF 変換
PDF JPEG 変換
Excel PDF 変換
PDF Excel 変換
Word PDF 変換
PDF Word 変換
PDF 結合
PDF 分割
PDF ロック解除

自動タグプラグイン(Autotags plugin)をインストールしたら、よくつかう自動タグを最初から用意しておくと便利です。そうすることにより、記事をテキストモードで記述しながらリッチなコンテンツを作成できます。

キャプション

caption

<div class="uk-text-bold uk-text-center">#0</div>

e.g.
[ caption:キャプション ]
Demo

テキストのセンタリング

center

<div class="uk-text-center">#0</div>

e.g. [ center:センタリングテキスト]
Demo

ドメイン

domain

www.example.com

　例) www.ivysoho.net ※Facebook widjetなどをテンプレートに記述する際に利用
e.g.
[ domain: ]

外部リンク

extlink

<a href="#1" class="ext-link" target="_blank">#2</a>

e.g.
[ extlink:http://example.com Example ]
Demo
Example

掲示板センターブロックを表示

forumcenterblock
PHPで置換にチェック

return CUSTOM_centerblock_forum ($p1);

※custom_centerblock_forum.php　を設置してください。
ダウンロード：　 GitHub
ファイル：/private/system/custom/custom_centerblock_forum.php /private/system/lib-custom.php

h2タグ

h2

<h2 class="uk-h2">#0</h2>

e.g.
[ h2:h2タグ]
Demo

h2タグ

h3タグ

h3

<h3 class="uk-h3">#0</h3>

h4タグ

h4

<h4 class="uk-h4">#0</h4>

pdf

pdfをページに展開表示

<div class="uk-margin-top uk-visible-large">
<a class="embed-large" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-medium">
<a class="embed-medium" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-small">
<a class="embed-small" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>

/vendor/jquery-gdocsviewer/に、GitHub の/vendor/jquery-gdocsviewer/以下をアップロード。
footer.thtmlに以下を追加
必ずjQuery本体をロードした後に挿入してください。

<!-- PDF { -->
<script type="text/javascript" src="{layout_url}/vendor/jquery-gdocsviewer/jquery.gdocsviewer.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
  $('a.embed-large').gdocsViewer({width: 600, height: 600});
  $('a.embed-medium').gdocsViewer({width: 500, height: 500});
  $('a.embed-small').gdocsViewer({width: 300, height: 300});
  $('a.embed-large2').gdocsViewer({width: 600, height: 600});
});
/*]]>*/
</script>

テキストの右寄せ

right

<div class="uk-text-right">#0</div>

話題へのリンク

topic
PHPで置換にチェック
コンテンツは空白。

写真や画像から簡単に各種faviconを作成してくれるWebサービスはこちら。

Favicon Generator

256ピクセル以上の正方形の画像をアップロードして作成します。

iPhoneやiPad、Androidで使われるWebクリップ用のアイコンもこれで一度で作成できて大変便利です。

zip形式でダウンロードしたファイルをサーバーにアップロード。header部分に同梱しているhtml形式のソースを張り付けるだけです。Geeklogの場合は、テーマのheader.thtmlに以下のように、{site_url}{xhtml}タグを追加します。

{# Favicons Generated with favicon.il.ly #}
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="{site_url}/favicon.ico"{xhtml}>
<!--[if IE]>
<link rel="shortcut icon" href="{site_url}/favicon.ico"{xhtml}>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-152.png"{xhtml}>
{# Optional: IE10 Tile. #}
<meta name="msapplication-TileColor" content="#FFFFFF"{xhtml}>
<meta name="msapplication-TileImage" content="{site_url}/favicon-144.png"{xhtml}>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{site_url}/favicon-152.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{site_url}/favicon-144.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{site_url}/favicon-120.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{site_url}/favicon-114.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{site_url}/favicon-72.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-57.png"{xhtml}>

なお、favicon.icoの作成だけは、以下のサイトのほうがきれいに作成できるようです。favicon.icoだけはこれに差し替えます

https://ao-system.net/favicon/

デリミタとして @ を使う場合、URL一致の正規表現は以下のようになります。

http://www.geeklog.jp　に一致する正規表現：

@^http://www\.geeklog\.jp$@

Custommenu カスタムメニュープラグインで活用できます。

フロントエンドフレームワークUIkitのAccordion(折り畳み機能)は便利です。 uk-nav-parent-iconで、折り畳みの状態を表示。

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{ multiple: true }">
	<li class="uk-parent">
		<a href="#">DEMO1</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li class="uk-parent">
		<a href="#">DEMO2</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li class="uk-parent">
		<a href="#">DEMO3</a>
		<ul class="uk-nav-sub">
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
</ul>

※Geeklogのテンプレートに記述するときは、{ の後にかならず空白を追加してください。{で囲むとテーマ変数処理をするため、その処理をしないようにする必要があります。

テンプレートに、自動タグで、静的ページの内容を読み込む場合は、以下のように記述します。

{!!autotag staticpage_content:XXXXX !!}

多言語サイトでテンプレートに記述する際に、自動タグで言語別に用意された静的ページ"XXXXX_言語ID"の内容を読み込む場合に以下のようにすると、対応した言語のコンテンツを読み込むことができます。

<?php echo PLG_replaceTags('[staticpage_content:XXXXX_'.COM_getLanguageId().']'); ?>