Search

ラベル blogger の投稿を表示しています。 すべての投稿を表示
ラベル blogger の投稿を表示しています。 すべての投稿を表示

2019/01/16

GoogleFontでfont-display: swap;を指定。WEBフォント読み込み時間の改善:javascriptで読む

PageSpeed Insights でこのブログを測定するとすごく遅い。
GoogleFontが原因っぽい。
そりゃフォントをダウンロードするんだから遅いよね・・・
詳細をクリックするとWEBフォント「@font-face」をしようね!とある。
でも、GoogleFontではその指定ができない。


しらべてJavascriptでfont-display: swap;する方法があった。
これをhead内に書いておく。
ひとまず早くなったのでOKとしておく。
でもInssightsのスコアは変わらず・・・。


CSS Tricksより
Google Fonts and font-display
https://css-tricks.com/google-fonts-and-font-display/


<script type="text/javascript">
<!--
const loadFont = (url) => {
  // the 'fetch' equivalent has caching issues
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let css = xhr.responseText;
      css = css.replace(/}/g, 'font-display: swap; }');

      const head = document.getElementsByTagName('head')[0];
      const style = document.createElement('style');
      style.appendChild(document.createTextNode(css));
      head.appendChild(style);
    }
  };
  xhr.send();
}

loadFont('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
-->
</script>




2018/12/01

bloggerのcss_bundle_v2.cssを消す方法

詳しくまとめてあるのを見つけました。
すばらしい!!
Bloggerの表示速度を高速化するためbundle.cssを内部化してみた
日々のメモ帖 by holidaybuggy1980 様

-----下記よまなくてよいかも。

こちらです。
やる前にcss_bundle_v2.cssを保存した方がいいですよ。
How to eliminate render blocking CSS bundle Files from Blogger Theme?
https://www.bloggerspice.com/2018/07/render-blocking-css-file.html


htmlタグにb:css="false"を追加するとcss_bundle_v2.cssが無くなる。

でも、無くなるとアーカイブとかラベルのcssが消えるので
ウィジェットの表示がズレる。
なので、css_bundle_v2.cssの内容を手動でコピペでhead内のstyleに書く。
さらに、$startSideとかblogger変数があったので、コレも削除した。
変数は人によると思います。



bloggerにはこういう自動インクルードが過去にも何度かあったみたい。
HTMLの素のままのソースで使うには、WEBサーバーを借りた方がいいみたいだ。

bloggerのホームのリンクをタグで書く、ラベルリンクをつなげる、ナビトップ固定


expr:href='data:blog.homepageUrl' がホームのリンクになる。
<a expr:href='data:blog.homepageUrl' >home</a>みたいに書く。

あと、ラベルのリンクをexprで接続するとき。
こんな感じでつなげることができる。
<a expr:href='data:blog.homepageUrl + &quot;search/label/powershell&quot;' >powershell</a>

参照リンク)
Blogger - ラベル別のフィード配信


ナビゲーションをトップ固定はstickyでいいと思う

.navigation{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:9999;
}

2018/06/09

BloggerのシンプルテンプレートからBootstrap対応にする

元ネタはこちらです!
Using Bootstrap with Blogger Templates by Don James

手順を簡単に書いてみます。
やればそれっぽくできました。

Bootstrap以外の何かをインクルードしていいかも。
mini.cssでもいいかも。

2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ コリスさん
https://coliss.com/articles/build-websites/operation/css/lightweight-css-frameworks.html



簡単に書いてみた手順 
※動作確認していないので自己責任でお願いします!

【準備】
■新しいブログを作る
■シンプルを選ぶ、白いのを選ぶ
■テーマ>カスタマイズからレイアウトを変更
本文:左上、フッター:一番右
【コードの変更】
テーマ>HTML編集に入る
■<b:skin>の中身を削除
<b:skin>から<Variable name="body.text.color" ・・・  </Group>まで残す。
<Variable name="body.text.color" ・・・  </Group>のすぐ下の行から
]]></b:skin>のすぐ上までを削除。
500行くらいを削除すると思います。


■<b:template-skin> の中の<![CDATA[ から ]]> を削除
<b:template-skin>の左の三角形のアイコンをクリックして展開。
<![CDATA[ から ・・・]]>を全部削除。

■widgetのbloggerタグの内部に入っていないdivタグの削除
ここがすごく大変でよく間違う・・・。
3回くらい失敗しました。
widgetに入ってるのは残します。
<div class='body-fauxcolumns'>のタグから初めて一個ずつ手作業で。
すごくたくさん削除します。
タグのデバッグ機能があるので、2、3個ずつ消して保存、の繰り返しで。








■これで完了!


【Bootstrapコードの貼り付け】
■</body>の直前にjqueryなど貼り付け

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin='anonymous' integrity='sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>


■<head>の直後にはりつけ

    <meta charset='utf-8'/>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <!-- The above 3 meta tags *must* come first in the head; any
other head content must come *after* these tags -->

■<head>の中のどこかに貼り付け
<title>の直下あたりに貼り付けでいいと思う。

<!-- Bootstrap -->

<!-- <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/> -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

■bootstrapのcssを貼り付け
bloggerの特殊タグのnavbarと同名なので、navbar2へ置換する。
・下記のcssをテキストエディターに貼り付け
・navbar > navbar2 に文字置換
・<b:skin><![CDATA[/* のどこかに貼り付け
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css


■試しにnavbarを使ってみる!
<!-- Bootstrap navbar -->
      <nav class='navbar2 navbar2-default'>
        <div class='container-fluid'>
          <div class='navbar2-header'>
            <button aria-controls='navbar2' aria-expanded='false'
class='navbar2-toggle collapsed' data-target='#navbar2'
data-toggle='collapse' type='button'>
              <span class='sr-only'>Toggle navigation</span>
              <span class='icon-bar'/>
              <span class='icon-bar'/>
              <span class='icon-bar'/>
            </button>
            <a class='navbar2-brand' href='#'>Project name</a>
          </div>
          <div class='navbar2-collapse collapse' id='navbar2'>
            <ul class='nav navbar2-nav'>
              <li class='active'><a href='#'>Home</a></li>
              <li><a href='#'>About</a></li>
              <li><a href='#'>Contact</a></li>
              <li class='dropdown'>
                <a aria-expanded='false' aria-haspopup='true'
class='dropdown-toggle' data-toggle='dropdown' href='#'
role='button'>Dropdown <span class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='#'>Action</a></li>
                  <li><a href='#'>Another action</a></li>
                  <li><a href='#'>Something else here</a></li>
                  <li class='divider' role='separator'/>
                  <li class='dropdown-header'>Nav header</li>
                  <li><a href='#'>Separated link</a></li>
                  <li><a href='#'>One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class='nav navbar2-nav navbar2-right'>
              <li class='active'><a href='./'>Default <span
class='sr-only'>(current)</span></a></li>
              <li><a href='../navbar-static-top/'>Static top</a></li>
              <li><a href='../navbar-fixed-top/'>Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>


何かそれっぽくはなってる気がする!
使えるかどうかわからないけどテンプレートデータはこれ。
https://drive.google.com/file/d/1vI83j9YH3pMorxtrec5Q5sEdDaa_K1Ky/view?usp=sharing






2017/03/22

Bloggerのテーマに新しいの増えてた

テーマが増えた。
レスポンシブ対応だった。
とりあえずこれを使ってみよう。
使いやすそうで、カスタマイズも簡単だ。

2016/05/12

簡単でてきとうなBloggerのテンプレをいちから書いてみる:その1

Bloggerのテンプレートのカスタマイズをしたい。
というか、タグやら命令が分からいないので、簡単でてきとなテンプレをいちから書いてみる

英語の情報が多いが日本語は少ない。
下記のブログがまとまっていて分かりやすい。
加えて、足りない情報は英語サイトで読む。


Google Bloggerのテンプレートを自作する ちーた様
http://cheetahs-blog.blogspot.jp/2014/04/google-blogger.html

Bloggerのテンプレートをいじる Aragger様
http://aragger.blogspot.jp/2012/04/blogger.html

簡単でてきとうでシンプルなテンプレ。
やりようによっては使えるのかも?


<html>
  <head>
  <head>
  <head>
<b:skin><![CDATA[
body{font-size:1.0em;}
]]></b:skin>
  </head>
  </head>
</head>
  <body>
    <h1><data:blog.pageTitle/></h1>
    <b:section id='main'>
      <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1' visible='true'>
        <b:includable id='main'>
          <b:loop values='data:posts' var='post'>
            <h2><data:post.title/></h2>
            <p><data:post.body/></p>
          </b:loop>
        </b:includable>
      </b:widget>
    </b:section>
  </body>
</html>



こちらのページのようになります。
http://nihongokantanburogatenpure.blogspot.jp/





ページャーのように前の投稿のリンク表示は、下記のようにloopの終端に'nextprev'を置く。
    <b:loop values='data:posts' var='post'>
    ・・・
    </b:loop>
    <!-- navigation -->
    <b:include name='nextprev'/>




日付はこの命令を書けば良さそう。
<data:post.timestampISO8601/>


1)タイトル
2)日付
3)内容
の順番で繰り返し。

<h2><data:post.title/></h2>
<p><data:post.body/></p>
<small><data:post.timestampISO8601/></small>


あとは、下記のようにsectionを追加すれば、bloggerのレイアウトから
各種ガジェットを追加できる。
ラベルとか月ごとアーカイブはこれで追加可能。
    <b:section id='sidebar'>    </b:section>



ここまでできれば、それっぽくなりそうだ。
あとは、bootstrapを適用すれば、何かができるのではないかと思う。



テンプレのxmlはこれです。
これから徐々にアップデータするはず。
やたらと長いのは、自動生成で追加された部分です。
実際に書いたのは20行程度
https://drive.google.com/file/d/0B18k-I2MKH8PZmRzazN5T2FsTWM/view?usp=sharing



時間があれば少しずつ作ってみよう。
「要件」
■すっごいシンプルにする。
■レイアウトや表示はbootstarpで管理して、レスポンシブにする。
■見た目はcssで整える。
■使わないかもしれないがjQueryもインクルードしておく。
■ホームページは、画像サムネイルと本文スニペットを表示。
■ホームページと個別の投稿のみ対応。静的ページは無視。
■日本語の表示が問題ないように。
■とにかくシンプル。



細かいことをやろうとすると、cond if の条件分をやたらと使う。
下記にメモ。
bloggerのページの種類は主に3つ
■index:ホームページ
■item:個別の投稿ページ
■static_page:静的ページ

下記のような感じ。
<b:if cond='data:blog.pageType == "item"'>
○○する。
</b:if>

ORとかANDの条件も使えます。

Using OR, AND, NOT Logic Operators in Blogspot Template Layouts
http://www.mybloggertricks.com/2015/07/blogger-template-logic-operators.html

2015/08/09

文字だけ表示の勝手にオススメのbloggerテンプレート

これです。すごいシンプル。タイトルと日付だけ。ライセンスはCC3です。

Simple Blogger Template - SimpleBT Responsive
http://www.weblogtemplates.net/2014/05/simple-blogger-template-simplebt.html



もしくはこれ。
MaterialBT
http://www.weblogtemplates.net/2015/05/materialbt-material-design-blogger.html

タイトル+概要+サムネイル。必要最低限にちょっと付け足し。

配色とかを少し変更すればあなた好みになるかも。
WeblogTemplates様に感謝。

2014/08/21

bloggerであるURLの投稿やページだけウィジェットに条件を付ける「フルパスURLの修正」

下記の写真一覧のときに、いろんなウィジェットを消したくなるときもある。
http://nokoshitamono.blogspot.jp/2014/08/blogger.html

そういうときはcond ifを使うと良い。
基本は下記のような感じ。

<b:if cond='data:blog.url != "http://からのフルパスのURL"'>
ウィジェットの実行コード
</b:if>

たとえば、この投稿だけ、あるスクリプトを実行したいなら下記のような感じ。
※.jpではなく、.comなところに注意。

<b:if cond='data:blog.url != "http://nokoshitamono.blogspot.com/2014/08/bloggerurl.html">
ウィジェットやjavascriptやHTMLのコード
<img scr="http://testtesttest.com/test.jpg" /> 単なる条件なのでHTMLもOKです。


</b:if>

コード実行のelseをしたいときは下記。
※else ifは無いらしいでの、工夫して実装。

<b:if cond='data:blog.url == "http://からのフルパスのURL"'>
何か実行したいコード
<b: else/>
ウィジェットの実行コード
</b:if>

詳しくは下記を参照。

Conditional Tags for Blogger Page Types  techinfoknow.comさん
http://www.techinfoknow.com/2014/01/blogger-page-type-conditional-tag.html

「フルパスURLの修正」
フルパスのURLについて。
この投稿だと下記になるが、このまま指定してもif分岐がtrueにならない。
http://nokoshitamono.blogspot.jp/2014/08/bloggerurl.html
下記のようにドメインの最後をjp>comに変更したらtrueになった。
http://nokoshitamono.blogspot.com/2014/08/bloggerurl.html
数年前にblogspotのcom表記が国に変更された。
しかし、内部的には転送しているだけらしい。
そのため、元のURLのcomをif文で使わないとダメらしい。
なお、独自ドメインに変更している場合は、そのままでOKだった。



-------------下記は上手くいかなかったので参考--------------
しかしコピペして動作しないときもある。
原因不明だった。
ところが、下記のように変更したら実行できた。

&lt;b:if cond=&#39;data:blog.url == &quot;http://のフルURL&quot;&#39;&gt;
ウィジェットの実行コード
&lt;/b:if&gt;

そう、HTMLの特殊文字でタグを表記する。
何か違和感を感じるがそうなってしまう。
ほかの部分は普通に<b:if とか書かれているのに、追加したとこだけ&lt;b:if とかになってしまう。
可読性は良くないけど、動作しないと困る。
bloggerのレイアウト変更は難しいです・・・。

2014/08/07

Googleドライブにcssとかjsとかhtmlを置いて公開する:新しいGoogleドライブのアプリEditeryが便利

ホスティング機能は2016/8/31に終了しました。
-------
 Googleドライブでcssとかjsとか、外部ファイルをホスティングできるらしい。
でも、googleのヘルプ見てもわからず・・・。
たき備忘録様のブログを参考にさせて頂きました。

ドライブでウェブページをホストする
https://support.google.com/drive/answer/2881970?hl=ja

GoogleドライブにBloggerで使う外部CSSをホスティングさせてみる たき備忘録様
http://blogger.weblix.net/2013/02/google-drive-css-hosting.html


上記に従って、ローカルでindex.htmlを作成してGoogleドライブにアップ。
公開設定を一般公開して、プレビューすると下記のようなURL見えると思います。
https://drive.google.com/?tab=mo&authuser=0#folders/aaabbb-MMM66666VVVVVV

folders/以下の文字列をコピーして、下記のhost/xxxのxxxに置き換える。
aaabbb-MMM66666VVVVVV 
https://www.googledrive.com/host/xxx

これでアクセスすると、ソースコードのままアクセスできます。
https://www.googledrive.com/host/aaabbb-MMM66666VVVVVV
※index.htmlが無いと、何かフォルダ的なものがみえます。

これがwwwディレクトへのアクセスみたいになりますので、img01.jpgとかあれば下記になります。
https://www.googledrive.com/host/aaabbb-MMM66666VVVVVV/img01.jpg

で、これを使えばbloggerにjqueryを組み込んだりできるし。
何となくHTMLで公開したいときに使えたりします。
画像とかのいろんなファイルも参照できると思います。
しかし。レスポンスは遅いです。
と言っても、無料のレンタルサーバー使うよりも便利だと思います。



それよりも、新しいGoogleドライブを試すと、「Editery」というアプリでhtmlやcssが編集できるみたいです。
jpgなんかは、Pixlr Expressで編集できたりします。
はじめて知ったけど、何かコレ便利かも。

2014/08/03

Bloggerで投稿した写真のギャラリーとか写真の一覧表示

Googleアカウントにくっついてる感じのBloggerだが、使いこなせば面白いのかも?
そんな感じでBloggerの使えそうなことを考えてみる。
写真ギャラリーなんてのは?

もちろんすでにガジェットにはあるが、RSSを読んできて表示するようなのはないかと探す。
そのままのがありました。
rssを読んできて表示する感じのものです。

Recent Posts Image Gallery For Blogger Greenlavaさん
http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html


新しいページでタイトルを「gallery」にして、
HTMLにコピペして、テンプレートのHTML編集でCSSもこコピペ。
するとこんなんができます。
http://nokoshitamono.blogspot.jp/p/gallery.html



なんも考えずにできました。Greenlavaさんありがとう!
あとはCSSをお好みに変更すればいろいろとつかえると思います。

haya-noteさんの情報もすごく勉強になりました。ありがとうございます!

記事一覧ページを作成する haya-noteさん
http://haya-note.blogspot.jp/2013/02/blog-post_8.html


「BloggerのページのURLを指定出来る方法?」
 BloggerのページのURLは、半角のタイトルである程度決められるみたいです。
最初にページを作ったときにタイトルを「aaa」にすれば、下記のようになると思います。
あとで編集してもURLはそのまま変わらないと思います。
http://あなたのURL/p/aaa.html
なんとなく、連想しやすそうなキーワードにすると良いのかも?
不確定情報で、すみません。
-----

ライセンス的にはFree to use or shareですが、コメントのnoticeはそのまま掲載すること。


ソース1
下記をHTMLにコピペ

投稿に画像が無いときの代用: var orgImgUr
サムネイルのサイズ:  var bsrpg_thumbSize = 150;
タイトル表示する/しない:  var bsrpg_showTitle = true;
最新から8件表示: /feeds/posts/summary?max-results=8
最新から30件表示: /feeds/posts/summary?max-results=30

-----
<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html 
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63h5hceJSsI11aUZ8rtho9oa0oz2wNrbmniYddTVdDHFA9DvEntP5xAH4OIpwyra7fGmasUypcLVRyyQ6zI1zfVidIemmE0uFakZwwY9Jju48bvFV1iUluDROjJFWKpqHNn3Vi0iE_XTa/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">', item, '</div>');
    }
    html.push('</div>');
    document.write(html.join(""));
}
//]]>
</script>

<script>
  var bsrpg_thumbSize = 150; 
  var bsrpg_showTitle = true; 
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>




-----
ソース2
CSSのどこでもいいのでコピペ


/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */

2014/07/03

GoogleのブログサービスBloggerをレスポンシブWEBデザインで使う

スマホの普及でGoogleのGmailは当たり前だけど、それ以外のサービスはあんまり使ってないと思う。
Google+の写真くらい?
個人的には、写真の保存に「Picasaウェブアルバム」、ブックマークには「Googleブックマーク」を使っています。
ファイルの保存にGoogleドキュメントは、Gmailとシームレスっぽくなったので意識せず使ってます。

Picasaウェブアルバム
https://picasaweb.google.com/home?hl=JA
Googleブックマーク
https://www.google.co.jp/bookmarks/?hl=ja

Picasaウェブアルバムはなかなか便利だが、アイコンリンクが見つからないので寂しい限りです。



 そして、Googleと切っても切れないブログサービスBloggerもあります。
詳しくはクリボウさんのブログを参考にしてください。
使い方さえ覚えれば便利なブログサービスです。

クリボウの Blogger Tips  クリボウさん
http://www.kuribo.info/

で、bloggerはスニペット表示とかレスポンシブなテンプレートを使うと
今どきなブログになるのでお試ししてみてください。

50+ Free Blogger Templates 2014
http://www.freshdesignweb.com/free-blogger-templates-2014.html


日本では全然はやっていないBloggerですが、googleアカウントがあれば
すぐに使えるので便利だと思います。

・・・と、上記ではテンプレート変更した方がいいよ!みたいなこと言ってますが、
ずっと使っているとデフォルトのが良かったりします。
Bloggerの仕様変更が多いので、不具合発生がたびたび起こるので
使えなくなることが多いです。
そのため、デフォルトがいい!と思って、結局はそのまんまです。

スニペットくらいは使った方が良いかも?
面倒だけど、やればできるはず!
このスニペット機能を標準で付ければすっごい普及すると思う。

bloggerで投稿の要約(snippet)を表示して、readmoreリンクをつける
http://nokoshitamono.blogspot.jp/2013/04/bloggersnippetreadmore.html


というわけで、東北の小さな町より日本語のBloggerサイトを応援し続けます!
がんばれBlogger!
それよりも、Picasaウェブアルバムは無くならないでください!マジで。

2014/02/15

Blogger API v3を有効にしようとする>5営業日かかります・・・。

Blogger API v3を使ってみたい。
まずはAPIを有効にする必要がある。
下記にアクセス。
https://developers.google.com/?hl=ja
ページの下の方の「デベロッパーツール」>「API Console」をクリック。
DevelopersConsoleのAPIsからBlogger v3をONにしたい。
OFFボタンをクリック。

この画面になる。
Blogger API v3 Quota Request なるフォーム。
理由とか一日のquotaの必要量などを記入して送信。
Thanks!とともに下記の画面。
5営業日以内にメールを送ります。そんなにかかるのか・・・。
使うのを断念した。もういいです。


2014/01/24

picasaウェブアルバムで白が灰色になる:自動補正をオフにする

picasaウェブアルバムは、いつのまにか2048pix以下は無制限になってました。
便利!
しかし、白い画像をアップすると勝手に補正がかかります。
ひだりが元画像。右がアップした画像。白が灰色ですね・・・。


Google+にアップグレードすればアカウント設定から変更できます。
しかし、Google+には参加したくない。というか参加する意識が無い。
となると、補正OFFにできないのか?

というわけで、Google+に入る>補正オフ>Google+を辞める をやってみました。

まずはGoogle+へアップグレード。
アカウントで下記の自動補正をオフにする

すぐに、最下段の無効の「こちら」をクリック。
いろいろと聞かれますが、Google+を辞めます。


もう一回 同じ画像をアップ。
今度は白くなった!設定は保存されるみたいです。


Googleは無料サービスで使っているので、仕様の変更は受け入れるのが当りまえ。
それでも、何とかする選択肢があるのは助かります。

Google+の写真の画面では、下記のように自動補正を設定できます。
便利なのかな?

2013/07/16

Blogger用のTIPSを紹介する海外サイト

いろいろなbloggerのテンプレートのカスタマイズを紹介している。
ウィジェットのカスタマイズが多いかも。
スライドショーもあり。
MKR-site
http://mkr-site.blogspot.jp/

・・・が、インドネシア語らしく読めません。
しかし、コードは理解できるので、使えると思います。

下記のようなcoinsliderも面白そうです。


2013/04/12

bloggerで投稿の要約(snippet)を表示して、readmoreリンクをつける

bloggerは、ホーム画面でも投稿記事の全文が表示されます。
できれば、ホームでは、本文は100文字だけ表示して、
ReadMore とか もっと読む をクリックして、全文を読めるようにしたい。
そんな衝動も駆られました。
今回みたいな長文を書くと、その分だけ表示が遅くなるのは残念なので・・・。


以前は、javascriptでこのような機能を実装可能でした。
今も可能ですが、もっと簡単に行う方法があるようです。
それが、data:post.snippet です。
本文の140文字くらいを、要約として表示するもののようです。
詳細は不明。

Nasuさん、Amanda Kennedyさんの下記の記事を参考にさせていただきました。

■Blogger 自動ReadMoreを使いつつページサイズを改善する方法
http://nasunoblog.blogspot.jp/2012/03/blogger-readmore.html
■Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!
http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html

方法は、全文表示の命令<data:post.body/>を、要約表示の命令<data:post.snippet/>に
変更するだけです。
でも、投稿を単独でみるときは、全文表示にしたいので、場合分けが必要になります。
また、bloggerのテンプレートによって、細かい変更が必要になってくるみたいです。
必ずしも、コピペだけで正常に動作するわけでは無いので、ご注意下さい。



で、このブログでやってみました。
1)まずは<data:post.body/>を探す!
テンプレートのHTMLの編集をクリック。
あれ?何か画面が大幅に変更されている!何とかやってみよう。
Ctrl+Fで検索すると、3箇所に<data:post.body/>がありました。
どれなの?

2)該当の<data:post.body/>を調べる。
1300、1428、1433行目のそれぞれをコメントアウトして動作を確かめてみる。
1300:何も変わらない???
1428:本文が消えた!タイトルのみ。
1433:何も変わらない???
たぶん、1428行目が該当のものだと判断します。

3)コードを入れ替える
<data:post.body/>をコメントアウトし、Amanda Kennedyさんのコードに変更。

※2015/02/20にのコードの条件変更
前の条件:投稿以外のページ => 新しい条件:トップページのみ
<b:if cond='data:blog.pageType != "item"'> => <b:if cond='data:blog.url == data:blog.homepageUrl'>
条件についての参考リンク
Blogger: Globally conditional data tags for all page types  oliverdoetsch様
https://gist.github.com/oliverdoetsch/153334604fdda9fe9191
GoogleブログBlogger: 特定ページのみにhtmlソースコードを記述する方法  リーマン様
http://salaryman-life.blogspot.jp/2010/05/googleblogger-html.html


<!-- begin snippet -->
   <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 15/02/20トップページに変更。 -->
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>


<!-- end snippet -->



4)ブログを見て確認する。
できた!下記のような見え方になります。
data:post.thumbnailUrl の画像が何か小さすぎる!
・・・と感じたので、Nasuさんのスクリプトを追加します。
参照元がPicasaアルバムなので、画像URLの「s72-c」の箇所を変更すれば、
サイズ変更が可能です。


5)画像のスクリプトを追加
Nasuさんのをほぼそのまま。
var image_sizeをテキストにして、PicasaのAPIを使うようにしました。
下記の投稿のように、s200、w300、s300-c とかを指定すると、表示サイズを指定できます。
http://nokoshitamono.blogspot.jp/2012/10/picasaweburl.html


<!-- begin snippet -->
   <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 15/02/20トップページに変更。 -->
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
   <!-- begin image-size dcript -->        
   <script type='text/javascript'>
       //<![CDATA[
       function bp_thumbnail_resize(image_url,post_title)
       {
        var image_size="s200";
        var show_default_thumbnail=true;
        var default_thumbnail='';
        if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
        image_tag='<img src="'+image_url.replace('/s72-c/','/'+image_size+'/')+'" class="postthumb" alt="'+post_title+'"/>';
        if(image_url!="") return image_tag; else return "";
       }
       //]]>
      </script>
      <script type='text/javascript'>
       document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
      </script>
   <!-- end image-size dcript -->
            </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>
<!-- end snippet -->


6)再度確認。
それっぽくできた!
でもこれって、画像の横に文章を置きたいな、と思う。

7)cssの.thumbを追加
文章を画像の横に置くべく、Amanda KennedyさんのCSSを追加


.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}
<b:skin>は畳まれているので、クリックして展開する。
上記の.thumbのコードを<b:skin>の直下に追加。

8)また確認してみる。
できた!
こんな感じで、画像の横に文章を置くと、コンパクトでいいです!
要約文だけなので、ロード時間も早くなりました。
イイですね!便利!
要約の文字数を設定できればもっと可用性が上がりそうですね。
現在は、snippetタグの解説をGoogleがしてくれていないので、残念。
http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270


というか、bloggerの設定画面に「ホームでは要約を表示する」機能を実装して欲しい。
Googleのサービスは高機能だけど、プログラミングを理解できない人には
ちょっと難しいと思います。
でも、便利!