Tuesday, March 19 2024 @ 08:54 PM JST

ソーシャルボタンをGeeklogに追加する

  • Thursday, December 31 2015 @ 10:11 AM JST
  • 投稿者:
  • 表示回数 3,903
Geeklog

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

social button etc.

  • Thursday, December 31 2015 @ 02:50 AM JST
  • 投稿者:
  • 表示回数 2,092
Geeklog ソーシャルボタンを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/

PageSpeed Insightsを活用してサイトの表示スピードを改善する

  • Wednesday, December 02 2015 @ 11:19 PM JST
  • 投稿者:
  • 表示回数 2,666
Geeklog

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

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

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

主な対策を紹介します。

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


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

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

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


3.画像を最適化する

4.CSS、JavaScript、HTML を縮小する

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


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

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

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

BootstrapからUIkitに乗り換えたい7つの理由

  • Thursday, November 19 2015 @ 04:26 PM JST
  • 投稿者:
  • 表示回数 30,127
Geeklog [h2:CSSフロントエンドフレームワークについて]

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

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

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

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

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

[h2:UIkitに乗り換えたい7つの理由] [h2:1.名前空間(Namespace)が秀逸]

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

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

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

PDF各種変換、結合などのクラウドサービスサイト「smallpdf」

  • Thursday, November 19 2015 @ 03:53 PM JST
  • 投稿者:
  • 表示回数 3,232
Geeklog 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 ロック解除

UIkitのユーザーグループ"UIkit Japan"をFacebook上で作成

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

Geeklogで初期設定しておきたい自動タグプラグインの便利な使い方

  • Tuesday, October 13 2015 @ 09:44 AM JST
  • 投稿者:
  • 表示回数 3,228
Geeklog

自動タグプラグイン(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 自動作成サービスサイト

  • Tuesday, September 22 2015 @ 06:59 PM JST
  • 投稿者:
  • 表示回数 7,047
Geeklog

写真や画像から簡単に各種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/

ページナビゲーション