Search

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/11

WEB上のファイル置き場ならOneDriverが良いかも:18GBも使えてた

最近はファイル同期にDropboxばっか使ってます。
無料の割には何かと便利です。
個人的には、無料のファイル同期ならDropboxがオススメです。
難しい設定とか無いので。

でも、WEB上のファイル置き場としては、OneDriveをオススメします。
いつのまにか15GBに増えてました。
で、スマホのカメラと同期させると3GB増量。
実質18GBからすぐに使えます。
無料のファイル容量だけならGoogleを超えてた。

まだWEBのファイル置き場としてしか使っていませんが、結構便利です。
OneNoteも使えるし、Excelも使える。
メールのOutlook.comはイマイチなので、Googleとは違う感じですごく便利。
でも、OneDriveもOneNoteも便利。マイクロソフトすごい!

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 */