2018/01/04

fancybox 3.2.5

fancybox 3.2.5
sample
ローカル環境では、動作しない?


blogspotの中で、画像ファイルはblogger側のlightboxが優先される?

 <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>  
   
 <a data-fancybox href="https://www.youtube.com/watch?v=xxxxx" data-caption="Cat Royalty Free Stock Video Footage 1080 copy right free"><img src="https://4.bp.blogspot.com/xxxxx.jpg" width="246" height="137" /></a><br />  
 <br />  
 <br />  
 <a data-fancybox="gallery" href="https://2.bp.blogspot.com/xxxxx.jpg" ><img src="https://2.bp.blogspot.com/xxxxx.jpg" /></a>  
 <a data-fancybox="gallery" href="https://3.bp.blogspot.com/xxxxx.jpg" ><img src="https://3.bp.blogspot.com/xxxxx.jpg" /></a>  
 <a data-fancybox="gallery" href="https://1.bp.blogspot.com/xxxxx.jpeg" ><img src="https://1.bp.blogspot.com/xxxxx.jpg" /></a>  
   
 <script type="text/javascript">  
  $("[data-fancybox]").fancybox({  
  // Options will go here  
  });  
 </script>

2017/12/27

スライドショー(3) CDN,Googleフォト

Swiperが4になったので、、、CDN + Googleフォト

Swiper
CDN

スライド画像を用意、サイズを揃えて、Gooleフォトに入れておく。
Bloggerで、[画像を挿入] - [携帯電話]として、Gooleフォト、画像を選択、とりあえず貼り付ける。
[HTML]編集で、画像の 'src="https://2.bp.blogspot.com/xxxxx.jpeg" 'の部分を取り出し、
Swiperの画像ファイルに差し替える。



 <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"></link>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>  
 <div class="swiper-container">  
 <div class="swiper-wrapper">  
 <div class="swiper-slide"><img class="sp-image" src="https://2.bp.blogspot.com/xxxxx2437.jpeg" /></div>  
 <div class="swiper-slide"><img class="sp-image" src="https://1.bp.blogspot.com/xxxxx5011.jpeg" /></div>  
 <div class="swiper-slide"><img class="sp-image" src="https://1.bp.blogspot.com/xxxxx7014.jpeg" /></div>  
 </div>  
 </div>  
 <script>  
 var swiper = new Swiper('.swiper-container', {  
 speed: 2500, loop: true,
 effect: 'fade',  fadeEffect: { crossFade: true },  
 // effect: 'slide',
 // effect: 'coverflow',
 // effect: 'flip',
 // effect: 'cube',   cubeEffect: { slideShadows: false, shadow: false },
 autoplay: { delay: 2000, disableOnInteraction: false, },  
 });  
 </script>

2017/02/09

メニュー(ハンバーガー)アイコン(2)

こちらで悩んでいたこと。

他力本願で、WEBフォント font-awesomeを使うのか早いかなと。

テンプレート html
で、<head>の下に、↓コレ入れる。
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>

で、
<span class='pagelist-arrow'>の下、
&#9660;
の代わりに、
<i aria-hidden="true" class="fa fa-bars fa-2x"></i> MENU
を入れる。

こんな表示できる。
MENU

他にも、飾り
http://fontawesome.io/examples/
サイズ fa-2x ～ fa-5x
回転 fa-spin fa-pulse
使える。

<i class="fa fa-spinner fa-spin fa-3x"></i>

いろいろアイコンフォント
とか とか
http://fontawesome.io/icons/

2017/02/08

instafeed.js ハッシュタグでの取得できた。

以前に、instagram APIが厳しすぎて。とか言っていて、

その時は結局、
instafeed.js で、
自分の写真　get: 'user', は、表示できたんだけど、
ハッシュタグ　get: 'tagged', のときに、ダメダメだった。
(sandbox-modeなので、どちらにしろ20件までですが、)

久しぶりにググってみたら、
access_token　の取得のときに、
&scope=public_content　を付けるとよい。と。
(もちろん、その前にClient IDの取得(instagram api 登録)が必要です。)

要するに
https://api.instagram.com/oauth/authorize/?client_id={Client ID}&redirect_uri={Website URL}&response_type=token&scope=public_content
とする。

出てきたaccess_token　で、
ハッシュタグ get: 'tagged',　が取得できたっす。

で、独自ドメインでは、表示できたんスけど、
「blogspot.jp」ドメインで表示すんのは、難しいっス。

追記) instagram API登録のときには、サブドメイン無しで登録したほうが吉かも。
　　　× www.domain.com → ○ domain.com

追記:20180714) どうしても公式からpublic_content ができない時。
PCで、instagramにログインしてから、↓
http://axentmedia.com/instagram-access-token/


2016/03/30

Instagram のfeedを何とかする。

追記:instafeed.js、ハッシュタグ は、こちら
　　sand-boxでのaccess_tokenで、hashtagでのピックアップできました。
Instagram APIの申請が2016から、非常に厳しくなって、
(「access_token」は、取得出来ても、結局使えない。)
(ものすごく頑張れば、なんとかなるのかもだけど。)

それでも、なんとかならないかと、いろいろ試してみた。

RSS.Stagram!!!
自分で投稿した写真、フォローしているユーザーの写真なら、
こちらが良いようだ。
サムネイルのリンク先は、インスタ本家だし。
以前は広告があったけど、最近はないのかな?

websta.me
http://websta.me/tools
から簡単にブログパーツが作れる。(写真20枚まで)
(responsiveの設定があるが、スマホで崩れる。)
サムネイルのリンク先は、websta.me
feedの取得も可。(20枚まで)
http://widget.websta.me/rss/tag/60scar
feedの中に「いいね」「コメント」の数も埋まっているので、
ちょっと頑張れば、表示可能。

今回は、iconosquare.com　を使ってみた。
ハッシュタグでのfeed取得
http://iconosquare.com/tagFeed/60scar
サムネイルのリンク先は、iconosquare.com

... loading ...

以下、ソース
Google feed API利用 (非推奨=いつ動かなくなるか不明)

 <script src="https://www.google.com/jsapi" type="text/javascript"></script>  
 <script type="text/javascript">  
 google.load("feeds", "1");  
 function initialize() {  
 var feed = new google.feeds.Feed("http://iconosquare.com/tagFeed/60scar");  
 feed.setNumEntries(32);  
 feed.load(function(result) {  
 if (!result.error) {  
 var container = document.getElementById("feed");  
 var htmlstr = "";  
 for (var i = 0; i < result.feed.entries.length; i++) {  
 var entry = result.feed.entries[i];  
 var imgchk = entry.content.match(/src="(.*?)"/igm);  
 var imgsrc = imgchk[0];  
 htmlstr += '<a href="' + entry.link + '"><img width="140"' + imgsrc + '/></a>\n';  
 }  
 container.innerHTML = htmlstr;  
 } else {alert(result.error.code + ":" + result.error.message); }  
 });  
 }  
 google.setOnLoadCallback(initialize);  
 </script>  
 <br />  
 <div id="feed">  
 ... loading ...  
 </div>

2016/02/10

メニュー(ハンバーガー)アイコン

追記:こちら

Bloggerの「ページ」メニューにハンバーガーアイコン

ずいぶん前から気にはなっていた。

「ページ」メニューのモバイル表示、「▼」の文字。
分かる人にはわかるけど、気づかない人には全然見えてない。

「▼MENU」と、書いてみて、 多少の注意は引けるかもだけど、
せっかくモバイル対応なんだから、三本線メニューを出したい。

そりゃ、フルカスタムのテンプレ導入とか、
HTMLを大きく追加すれば出来るんだけど、
なんとか、お気軽にハンバーガーアイコンにならないかと、

1.「≡(&#8801;)」とか「☰(&#9776;)」とか、なんか納得いかない。

2.cssで「三本線メニュー」も作れるようで、
-------------------------
 .hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.7em;
margin-right: 0.3em;
border-top: 0.2em solid black;
border-bottom: 0.2em solid black;
}n
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.2em solid black;
}
-------------------------
▼ (&#9660;)
↓
<span class="hamburger"></span>MENU
-------------------------

3.SVGファイル作成、圧縮、Dropboxにコピー。

Inkscapeで、高さ16pxの書類作成、3本線の絵をsvgで保存。
(文字入れる時は、アウトライン化。 )

https://compressor.io/ で圧縮。
「」とか、 「」

テンプレート→HTMLで、
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.separator.color);
}
の下に、↓追加。
.pagelist-arrow:before { content: url("https://www.dropbox.com/s/xxxxx/3line-w.svg?dl=1"); margin:0 4px 0 0;
}

とりあえず、3.のコースで、

2015/11/23

Blogger + Dropbox でスライドショー(2)

スライドショー

前回のは、 レスポンシブでないので、再考。
jscript不要。

Swiper
http://www.idangero.us/swiper/



 <style>  
 .swiper-container {  
width: 100%;
max-width: 500px;
height: 100%;
margin: 20px auto;
   }  
   .swiper-slide {  
     background-position: center;  
     background-size: cover;  
   }  
   </style>  
   
 <link href="https://dl.dropboxusercontent.com/s/xxxxx/swiper.css" rel="stylesheet"></link>  
 <br />  
 <div class="swiper-container">  
 <div class="swiper-wrapper">  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/100.png" width=97% /></div>  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/101.png" width=97% /></div>  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/102.png" width=97% /></div>  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/103.png" width=97% /></div>  
 </div></div>  
 <script src="https://dl.dropboxusercontent.com/s/xxxxx/swiper.min.js"></script>  
 <script>  
 var swiper = new Swiper('.swiper-container', {  
 paginationClickable: true,  
 spaceBetween: 30,  
 centeredSlides: true,  
 autoplay: 3000,  
 speed: 3000,
 loop: true,
 autoplayDisableOnInteraction: false,  
 effect: 'fade'  
 });  
 </script>

2015/09/28

Bloggerだったら、Google Feed Api不要?(サムネイル付き) (その2)

Bloggerだったら、Google Feed Api不要?(サムネイル付き) の続き

・サムネイルのサイズの変更　("/s140-c/"の数字を変えると、いろいろできる。)
と、
・横4列
に変更してみた。
 <ul style="display: inline-block; list-style-type: none; margin: 0; padding: 0;">  
 <script type="text/javascript">   
  function mycallback(json) {   
  for (var i = 0; i < json.feed.entry.length; i++) {   
  for (var j = 0; j < json.feed.entry[i].link.length; j++) {   
  if (json.feed.entry[i].link[j].rel == 'alternate') {   
  var postUrl = json.feed.entry[i].link[j].href;  
  break;  
  }   
  }   
  var postTitle = json.feed.entry[i].title.$t;  
  var postdate = json.feed.entry[i].published.$t;  
  var pyear = postdate.substring(0,4);  
  var pmonth = postdate.substring(5,7);  
  var pday = postdate.substring(8,10);  
  var pudate = pyear + '/' + pmonth + '/' + pday + '<br />';  
  var pimgurl;  
  if (typeof(json.feed.entry[i].media$thumbnail) !== "undefined") {   
  pimgurl = json.feed.entry[i].media$thumbnail.url;  
  pimgurl = pimgurl.replace("/s72-c/","/s140-c/");  
  }else{   
  pimgurl = "http://1.bp.blogspot.com/xxxxxxxx/logo.jpg";  
  }   
  var pimg = '<img src=' + pimgurl + ' width=180>';  
  var scrw = '145px';  
  if (window.innerWidth > 320){ scrw = '195px';}  
  var item = '<li style="display:inline-block; width:' + scrw + '; text-align:center; float:left; ">';  
  item += '<a href=' + postUrl + '>' + pimg + '<br />' + pudate + postTitle + '</a></li>';  
  document.write(item);  
  }   
  }   
  </script>   
  <script src="http://xxxxxxxx.blogspot.jp/feeds/posts/summary?category=xxxxxx&amp;orderby=published&amp;max-results=30&amp;alt=json-in-script&amp;callback=mycallback"></script>   
  </ul>

赤文字は、適宜変更して下さい。

<li>を使っているので、[作成]モードで編集すると、行がズレて表示できなくなります。
そのときは、[HTML]モードで、行ズレを直して下さい。

追記:20220220 Blogger側の仕様変更で、
　　画像のURLが、「1.blogspot.com」から「googleusercontent.com」に
　　変更になった。
　　で、パラメータの書き方も、変更。
　　上記のAPIを使うのなら、
pimgurl = pimgurl.replace("/s72-c/","/s140-c/");
　　の後ろに、
pimgurl = pimgurl.replace("s72-w320-h320","s140-w140-h140-l80-c");
　　が必要。(しないとサムネがボケる)
 (画像を含まない投稿時の代替画像のURLも要変更)

2015/03/21

Google Fonts

http://www.google.com/fonts
フォントを選ぶ
[→]Quick Use
3. Add this code to your website:
[ <link href="http://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet" type="text/css"></link> ]
4. Integrate the fonts into your CSS:
[ font-family: 'Fredericka the Great', cursive; ]

Fredericka the Great

コード:

 <link href="http://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet" type="text/css"></link>  
 <span style="font-family: 'Fredericka the Great', cursive; font-size: 32pt;">  
 Fredericka the Great  
 </span>

2015/03/19

Blogger にお問い合わせフォーム

いまさらですが、Google フォーム。
前に設置したことがあったが、確認。

http://www.google.com/forms/about/
から[ Googleフォームを使う ]

[質問を編集]
□ フォームページの下部にステータスバーを表示
□ ユーザーごとに1つの回答のみ許可
□ 質問の順序を並べ替える

[ フォーム名を入力 ]　(ex.問い合わせ)
[ 質問タイトルを入力 ] (お名前)
[ 補足文入力 ]　()
[ 質問の形式 ]   [テキスト]
　[完了]は、押さない。[x]必須の質問
[ アイテムを追加 ]

[ 質問タイトルを入力 ] (メールアドレス)
[ 補足文入力 ]　()
[ 質問の形式 ]   [テキスト]
▼詳細設定
データの検証
　テキスト　メールアドレス
　[完了]は、押さない。[x]必須の質問
[ アイテムを追加 ]

[ 質問タイトルを入力 ] (問い合わせ内容)
[ 補足文入力 ]　()
[ 質問の形式 ]   [段落テキスト]
[完了]　[x]必須の質問


[確認ページ]
[ 受付メッセージ ]
□ 別の回答を・・
□ フォームの結果への・・・
□ 回答者に・・・
[フォームを送信]

フォームを送信
共有するリンク　(空)
メールでフォームを送信　(自分のメールアドレス)
件名: (受け取るメールのタイトル)
[x]メールにフォームを含める
[送信]

●新しいスプレッドシート
[フォーム名を入力]
特にスプレッドシートを作る必要がなければ、
[Google フォームでのみ回答を保存する]
を選択。

[回答]
[回答を受付中]

[ファイル]
[埋め込む...]
 HTML を貼り付けてウェブサイトに埋め込む
 [ URLをコピー ]
[完了]

Blogger側、
[ HTML ]モードで、ペースト
height="500"　→　スクロールバーが出ないように適宜調整 (ここでは、800にした。)
width="760"　→ 100% に、

フォーム動かすと、メールにも飛ぶが、
フォームフォーマット、入力されたデータ、がGoogleドライブにも保存される。
Googleフォーム内、ファイル、開く、とした後、
項目の編集、
形式を指定してダウンロード　→　CSV
フォームそのものの削除
を行うことができる。

以下、サンプル　
(実際にメールが飛んでしまうので、入力テストはしないでください。)
「Google フォームでパスワードを送信しないでください。」 とか、
Googleロゴを削除することもできるようですが、
気になるようでしたら、別のフォームサービス「BlogMail」とかを使ったほうが早いかも。

追記)もっというと、内輪で使うのなら、GoogleDocのワープロで何とかするとか、
　　第三者向けには、レンタルサーバー借りてCGI置いたほうが、、、
　　どこの誰が個人情報入力させているのかと、責任を持ったほうがよいかも。

2015/03/07

Blogger + Dropbox でスライドショー

元ネタ:bchanx/slidr

https://github.com/bchanx/slidr
こちらから、「slidr.min.js」をダウンロード。
Dropboxにコピー。URL取得。

スライドの画像をDropboxにコピー。URL取得。

下記コードをBlogger、HTMLに貼り付け、編集。



 <script src="https://www.dropbox.com/s/xxxxx/slidr.min.js?dl=1" type="text/javascript"></script>  
   
 <div id="slidr-img" style="display: block; width: 550px; height: 265px; margin-left: auto; margin-right: auto;">  
 <img data-slidr="1" src="https://www.dropbox.com/s/xxxxx/100.png?dl=1" />  
  <img data-slidr="2" src="https://www.dropbox.com/s/xxxxx/101.png?dl=1" />  
  <img data-slidr="3" src="https://www.dropbox.com/s/xxxxx/102.png?dl=1" />  
  <img data-slidr="4" src="https://www.dropbox.com/s/xxxxx/103.png?dl=1" />
 </div>  
 <script>  
 slidr.create('slidr-img', {  
  breadcrumbs: false,  
  controls: 'none',  
  direction: 'h',  
  fade: true,  
  keyboard: true,  
  overflow: true,  
  pause: false,  
  theme: '#222',  
  timing: { 'fade': '1s ease-in' },  
  touch: true,  
  transition: 'fade'  
 }).add('h', ['1', '2', '3', '4','1']).auto(4000);  
 </script>

赤字は、dropboxにファイル設置後、書きなおしてください。
「transition: 'fade'」は、スマホ表示できるけど、他は要検証。

2015/02/14

Blogger ホームページ風、おさらい

追記:簡単、無料ホームページだと、「Googleサイト」が良いです。
　　(「旧Googleサイト」は、なんともでしたが、模様が変わっていました。)
　　テンプレートは少ないけど、とりあえずでしたら、そちらかなと。
作ってみた　→  https://sites.google.com/view/pon250/
続きを読む »

2015/02/13

Blogger内にソースコード貼り付け

「SyntaxHighlighter」やら、かっこいいのは、いろいろあるのですが、
もちょっとお気楽に何とかならんかなぁ。と見つけてみた。
 ソース貼り付け、生成ボタン押して、自分のブログにコピペで完了。
飾りはないけど、コードが貼れればおっけー。という人向け。

↓こんな感じ。(Blogger feed api サムネイル付き)

 <script type="text/javascript">  
 function mycallback(json) {  
     for (var i = 0; i < json.feed.entry.length; i++) {  
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {  
         if (json.feed.entry[i].link[j].rel == 'alternate') {  
         var postUrl = json.feed.entry[i].link[j].href;  
         break;  
      }  
     }  
     var postTitle = json.feed.entry[i].title.$t;  
     var postdate = json.feed.entry[i].published.$t;  
     var pyear = postdate.substring(0,4);  
     var pmonth = postdate.substring(5,7);  
     var pday = postdate.substring(8,10);  
     var pudate = pyear + "/" + pmonth + "/" + pday + " ";  
     var pimgurl;  
     if (typeof(json.feed.entry[i].media$thumbnail) !== "undefined") {  
         pimgurl = json.feed.entry[i].media$thumbnail.url;  
     }else{  
         pimgurl = "http://2.bp.blogspot.com/xxxxx.png"; 
     }  
     var pimg = '<img src=' + pimgurl + ' height=60 align=middle>';  
     var item = '<a href=' + postUrl + '>' + pimg + '&nbsp;&nbsp;' + pudate + postTitle + '</a><br /><br />';  
     document.write(item);  
  }  
 }  
 </script>  
 <script src="http://xxxxx.blogspot.jp/feeds/posts/summary?category=xxxxx&amp;orderby=published&amp;max-results=100&amp;alt=json-in-script&amp;callback=mycallback"></script>
↑水色部分、個別に。
なをかつ、生成コードから下記赤字部分削除してます。
font-family:arial;
 font-size:12px;
 border:1px dashed #CCCCCC;
 width:99%;
 height:auto;
 overflow:auto;
 background:#f0f0f0;
 line-height:20px;

 padding:0px;
 color:#000000;
 text-align:left;
}
pre.CICodeFormatter code{
 color:#000000;
 word-wrap:normal;

Bloggerに、さくらインターネットの独自ドメインを付ける。

自分用メモ。

1.blogger ダッシュボード
　[設定][基本][公開][ブログのアドレス]
　+ ブログのサードパーティ URL を設定
　[サブドメイン入力]  (例:「m.hoge.com」)
　[保存]

　「このドメインに対する権限を確認できませんでした。エラー 12。」
　のエラーが出るが、 気にせず続行。

2.Google のウェブマスター ツールから TXT レコード

3.ドメインレジストラまたはプロバイダを選択　から、[その他]を選択。
　google-site-verification=xxxxx.....
　をコピー。

4.さくらインターネットのドメイン設定

エントリ名　(空)
種別　[TXT]
値  上記コード(google-site-verification=xxxxx.....)
新規登録。

エントリ名　サブドメイン (この場合「m」)
種別　[CNAME]
値 ghs.google.com.  (最後のドットを忘れずに。)
新規登録。

5.数時間後に、1.を再実行。エラー無しに完了。
追記(2015-7-9): さくらのDNS書き直し5分後に、1.→2.→3.の画面下、[確認]ボタンを押すと、
1.の[保存]がすぐできる。

6.さくら側(メインのホームページとして、丸投げの場合)
　.htaccess
--------------
DirectoryIndex index.html index.htm .ht
Redirect permanent /index.html http://(この場合「m.domain.com」)/
--------------

7.ブロガー側
カスタム リダイレクト　を確認しておく。

追記(2015-4-10):「www」の名前もブロガーに持ってくことが出来た。
追記2(2015-5-26):別のレジストラから、さくらにドメイン持ってくる時は[whois情報]から、DNSの書き直しも忘れずに。

2015/01/28

Bogger ホームページ風に不要なボタン

自分用メモ

blogger :ダッシュボード　テンプレート　バックアップを忘れずに。
↓この辺り、 で、リマークる。　各々数カ所あるので注意
( 「
'home-link'
'data:olderPageUrl'
'data:newerPageUrl'
'feed-link'
post-footer-line-2
↓/* */ でリマーク
.footer-outer の近くの dash

モバイル用プルダウンメニュー、'▼'だけだとわかりにくいので、
'&#9660;' → '&#8801; menu'にすると'≡ menu'とか、。

追記(2015-4-10):「HTMLの編集」をしても、特にモバイル、ボタンが外れない、
　プルダウンメニューの書き換えができない事があった。
　なぜかわからないけど、HTMLで、font一覧に「Meiryo」追加の追加をすると、
　有効になるような気がする。
　あとまた、同じタイミングで画面下部の「Simple テンプレート. 」の文字も消えるような、、、

追記(2015-6-17):モバイルでの「ホーム」ボタン、プルダウンメニューのコト。
　シンプルテンプレートをあちこち変えてみると、出たり消えたりする。
　で、あ、消えてよかったと思って、HTMLから、なにか弄ると、また出てきたり。
　どんどんわからくなってきた。

追記(2015-9-15):「HTMLの編集」画面で「書式テンプレート」を一度クリックしておくと、
　モバイル版のプルダウンメニュー修正、不要なボタンの修正が有効になる?

2015/01/26

Bloggerだったら、Google Feed Api不要?(サムネイル付き)

サムネイルの取得、画像無い時ににちょっと困った。

コード
 <script type="text/javascript">  
 function mycallback(json) {  
  for (var i = 0; i < json.feed.entry.length; i++) {  
  for (var j = 0; j < json.feed.entry[i].link.length; j++) {  
  if (json.feed.entry[i].link[j].rel == 'alternate') {  
  var postUrl = json.feed.entry[i].link[j].href;  
  break;  
  }  
  }  
  var postTitle = json.feed.entry[i].title.$t;  
  var postdate = json.feed.entry[i].published.$t;  
  var pyear = postdate.substring(0,4);  
  var pmonth = postdate.substring(5,7);  
  var pday = postdate.substring(8,10);  
  var pudate = pyear + "/" + pmonth + "/" + pday + " ";  
  var pimgurl;  
  if (typeof(json.feed.entry[i].media$thumbnail) !== "undefined") {  
  pimgurl = json.feed.entry[i].media$thumbnail.url;  
  }else{  
  pimgurl = "http://2.bp.blogspot.com/hogehoge.png";  
  }  
  var pimg = '<img src=' + pimgurl + ' height=75 align="left">&nbsp;&nbsp;';  
  var item = '<a href=' + postUrl + '>' + pimg + pudate + postTitle + '</a><br clear="all"/><br />';  
  document.write(item);  
  }  
 }  
 </script>  
 <script src="http://hogehoge.blogspot.jp/feeds/posts/summary?category=ooooooo&amp;orderby=published&amp;max-results=100&amp;alt=json-in-script&amp;callback=mycallback"></script>
http://2.bp.blogspot.com/hogehoge.png　記事内に画像無い時に、代替画像hogehoge.blogspot.jp　blogger URL
category=ooooo　カテゴリ名
max-results=100　抽出件数
json.feed.entry[i].media$thumbnail は、75ピクセル正方
(その2)に続く

2015/01/19

Blogger mobile タイトル文字の大きさ

 スマホ表示の時、標準テンプレートだと、font-size 大きすぎ。


↓htmlで、こんなコードを埋めてみた。

.mobile .Header h1 {
font-size: 24px;
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.separator.color);
}
ここに追加
]]>


でも、いろいろいじっていると(テンプレによって?)無効になる時がある。
(試してみる時には、バックアップは忘れずに。)

ちっともよくわからん。

2014/12/19

Xperia arc lockedでも、カスタムrom


用意するもの
  • Xperia Ultimate HD 3.0.2.zip
  • LT18i_4.1.B.0.587_(1254-2716).zip
  • Lt18i_4.1.A.0.562_Kernel.ftf
  • LT18i_4.1.B.0.587_Kernel Only.ftf
  • FlashTool 0.9.10.1
  • ADB環境 
  • 追記)CWM_Installer-v5.apk
  • MTLmr3m.ttf
  • POBox_5.3cwm.zip
手順
  1. SDに、 Xperia Ultimate HD 3.0.2.zipを入れておく。
  2. LT18i_4.1.B.0.587_(1254-2716).zip　を解凍。
  3. FlashTool 0.9.10.1 で、LT18i_4.1.B.0.587.ftf を焼く。
  4. 起動の後、Lt18i_4.1.A.0.562_Kernel.ftf　を焼く。
  5. 提供元不明のアプリ、USBデバッグにチェック。
  6. FlashTool 0.9.10.1のMyLT18→Root→Force Emulator、・Superuser でroot取得。
  7. すかさず、LT18i_4.1.B.0.587_Kernel Only.ftf を焼く。
  8. 追記) CWM_Installer-v5.apkでCWM Recoveryをインストール、CWMから再起動。
  9. CWM Recovery で、wipe data/Factory、wipe cache、wipe Dlvik Cache、Wipe Battery status、format /system
  10. (↑format /systemを2回実行しておくと、絡まりにくいようなきがするのは、木の精?)
  11. install ZIP→Xperia Ultimate HD 3.0.2
  12. Arc S、Locked Bootloaderを選択。
  13. 40%くらいでFinishingしてしまう時は、焼き失敗。→10
  14. 再起動後、SONYロゴで30秒以上変化なかったら、焼き失敗。→3
  15. 無事起動したら、ES ファイルエクスプローラーで、/system/fonts に、MTLmr3m.ttf をコピー

 /system に余裕ができたです。


screenshot は、電源+音量↓、だったですね。
(気がつくまでに時間がかかった。)

と、Google日本語の4.0.4問題(英字popupが変)は、いつ治るのかな?

Bloggerだったら、Google Feed Api不要?

Blogger内だったら、Google Feed Api不要?

Blogger JSON Feed APIってのがあるようだ。

元ネタ:http://www.danpros.com/2013/08/blogger-json-feed-api

DEMO↓


コード

 <script type="text/javascript">  
   function mycallback(json) {  
     for (var i = 0; i < json.feed.entry.length; i++) {  
       for (var j = 0; j < json.feed.entry[i].link.length; j++) {  
         if (json.feed.entry[i].link[j].rel == 'alternate') {  
         var postUrl = json.feed.entry[i].link[j].href;  
         break;  
       }  
     }  
     var postTitle = json.feed.entry[i].title.$t;  
     var postdate = json.feed.entry[i].published.$t;  
     var pyear = postdate.substring(0,4);  
     var pmonth = postdate.substring(5,7);  
     var pday = postdate.substring(8,10);  
     var pudate = pyear + "/" + pmonth + "/" + pday + " ";  
     var item = '・<a href=' + postUrl + '>' + pudate + postTitle + '</a><br /><br />';  
     document.write(item);  
   }
 }
 </script>  
 <script src="http://pon250-1.blogspot.jp/feeds/posts/summary?category=OSX86&orderby=published&max-results=30&alt=json-in-script&callback=mycallback"></script>
↑上記、赤文字、Blogger URL、カテゴリ名(カテゴリ指定なければ削除)を変更して下さい。
※<lt>、<div>、をブロガーのHTML編集画面に入れると、[更新]後に、余計な改行を入れられ、動作しなくなる。

Bloggerで、固定ページを優先に表示するテスト

Bloggerで、固定ページを優先に表示するテスト。

Bloggerをつかって、ホームページ風にしたいとき、
URLを入力すると、標準では、最新投稿順に表示されるけど、
それを固定ページにしたいとき。
のメモ。

1.固定ページを作って、URLを確認しておく。
例) http://pon250-1.blogger.jp/p/blog-page.html

追記)固定ページ(トップページ)を作るときに
　タイトルを「index」としておくと、ファイル名が「index.html」になる。
　見てくれ的に、こっちのほうがかっこいいかも。

2.Bloggerダッシュボード　→　設定　→　検索設定
エラーとリダイレクト　カスタムリダイレクト　編集
リダレクト元　[ / ]
リダイレクト先 [ /p/blog-page.html ]　←1.のもの
(↑フィールドが勝手に動いてしまって、非常に入力しづらい。
入力欄の右側をクリックしてするとか、工夫が必要)
永続的　[x]
保存
変更を保存

3.以上で、
http://pon250-1.blogger.jp/ として入ってきても、
http://pon250-1.blogger.jp/p/blog-page.html のページが表示される。

4.と、今度、ブログの投稿表示ができなくなってしまうので、
レイアウトから、ガジェットを追加、基本　→　ページ
[x] トップページ
+外部リンクを追加
ページタイトルを入力　[ 投稿一覧 ]　(←なんでもいい)
ウェブアドレス(URL) [ http://pon250-1.blogspot.jp/search/label/ ]
として、メニューを作っておくと、一覧表示できる。