Ivy SOHO.net

フラットアイコンダウンロードサイト
http://www.flaticon.com/

有料会員登録すればcreditを外すことも可能です。

動画や画像にかぶせるドットパタンを作成する便利なサイト
http://www.patternify.com/

Base64 CodeやPNG形式をダウンロードできます。

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/p.../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で表示された画像です。

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

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

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

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

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

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

[h2:UIkitに乗り換えたい７つの理由] [h2:１．名前空間（Namespace）が秀逸]

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

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

覚えやすいネーミングも、開発者のストレスを軽減できます。 styleの属性を覚えている開発者なら、[tag: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 ロック解除

[tag:UIkit]のユーザーグループ"UIkit Japan"をFacebook上で作成しました。
https://www.facebook.com/groups/uikit.japan/
UIkitは、ビデオによるチュートリアルのページも追加され、WordPressのテーマも増えてきました。
軽量でオブジェクティブな[tag:UIkit]は今後益々活用していきたいフレームワークなので、日本語での情報交換の場としてFacebookでグループを作成しました。
どうぞご参加ください。

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

[h3:キャプション] caption

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

e.g.
[ caption:キャプション ]
Demo
[caption:キャプション] [h3:テキストのセンタリング] center

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

e.g. [ center:センタリングテキスト]
Demo
[center:センタリングテキスト]
[h3:ドメイン] domain

www.example.com

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

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

e.g.
[ extlink:http://example.com Example ]
Demo
[extlink:http://example.com Example] [h3:掲示板センターブロックを表示] forumcenterblock
PHPで置換にチェック

return CUSTOM_centerblock_forum ($p1);

※custom_centerblock_forum.php　を設置してください。
ダウンロード：　 [extlink:https://github.com/ivywe/geeklog-ivywe/ GitHub]
ファイル：/private/system/custom/custom_centerblock_forum.php /private/system/lib-custom.php [h3:h2タグ] h2

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

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

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

[h3:h4タグ] h4

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

[h3: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/に、[extlink:https://github.com/ivywe/geeklog-ivywe/ 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>

[h3:テキストの右寄せ] right

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

[h3:話題へのリンク] topic
PHPで置換にチェック
コンテンツは空白。

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

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

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

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

<meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"{xhtml}>
<meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"{xhtml}>
<meta name="msapplication-wide310x150logo" content="/site-tile-310x150.png"{xhtml}>
<meta name="msapplication-square310x310logo" content="/site-tile-310x310.png"{xhtml}>
<meta name="msapplication-TileColor" content="#0078d7"{xhtml}>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico"{xhtml}>
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"{xhtml}>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"{xhtml}>
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"{xhtml}>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"{xhtml}>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"{xhtml}>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"{xhtml}>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"{xhtml}>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"{xhtml}>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"{xhtml}>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"{xhtml}>
<link rel="icon" type="image/png" sizes="36x36" href="/android-chrome-36x36.png"{xhtml}>
<link rel="icon" type="image/png" sizes="48x48" href="/android-chrome-48x48.png"{xhtml}>
<link rel="icon" type="image/png" sizes="72x72" href="/android-chrome-72x72.png"{xhtml}>
<link rel="icon" type="image/png" sizes="96x96" href="/android-chrome-96x96.png"{xhtml}>
<link rel="icon" type="image/png" sizes="128x128" href="/android-chrome-128x128.png"{xhtml}>
<link rel="icon" type="image/png" sizes="144x144" href="/android-chrome-144x144.png"{xhtml}>
<link rel="icon" type="image/png" sizes="152x152" href="/android-chrome-152x152.png"{xhtml}>
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"{xhtml}>
<link rel="icon" type="image/png" sizes="256x256" href="/android-chrome-256x256.png"{xhtml}>
<link rel="icon" type="image/png" sizes="384x384" href="/android-chrome-384x384.png"{xhtml}>
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"{xhtml}>
<link rel="icon" type="image/png" sizes="36x36" href="/icon-36x36.png"{xhtml}>
<link rel="icon" type="image/png" sizes="48x48" href="/icon-48x48.png"{xhtml}>
<link rel="icon" type="image/png" sizes="72x72" href="/icon-72x72.png"{xhtml}>
<link rel="icon" type="image/png" sizes="96x96" href="/icon-96x96.png"{xhtml}>
<link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png"{xhtml}>
<link rel="icon" type="image/png" sizes="144x144" href="/icon-144x144.png"{xhtml}>
<link rel="icon" type="image/png" sizes="152x152" href="/icon-152x152.png"{xhtml}>
<link rel="icon" type="image/png" sizes="160x160" href="/icon-160x160.png"{xhtml}>
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png"{xhtml}>
<link rel="icon" type="image/png" sizes="196x196" href="/icon-196x196.png"{xhtml}>
<link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png"{xhtml}>
<link rel="icon" type="image/png" sizes="384x384" href="/icon-384x384.png"{xhtml}>
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png"{xhtml}>
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png"{xhtml}>
<link rel="icon" type="image/png" sizes="24x24" href="/icon-24x24.png"{xhtml}>
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png"{xhtml}>
<link rel="manifest" href="/manifest.json"{xhtml}>

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

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