最新記事

2015年10月4日



 とつぜんですが、Hタグをすこし飾り付けしてみようと思いましてアイコンフォントのfontawesoneを設定しました。

fontawesone


 設定方法は、「超」がつくほど簡単と言いたいところですがテンプレートをゴソゴソ変更しているとそう簡単にはうまく行かないこともありますよね。

設定方法は、英語の練習くらいに考えてオリジナルサイトを読んでみると良いんじゃなかしら。

リンク: Font Awesone

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

1行追加するだけなので変更自体は簡単ですけど、うまく行かない時が大変なんですよねぇ。

うまく行かない時は


<head>セクションにlinkをコピペしてね・・・と書いてあるのですけど、</head>の直前にいれると動かないこともありました。


<head>直後に入れると確実に動作するとおもいますが、表示速度に影響があるかもしれないので、読み込みテストをするかGoogle Page SpeedやGTmetrixでチェックするといいと思います。

ただし、bloggerですのであまり速度は気にしないほうがいいと思いかも。

<i class="fa fa-flag"></i>

アイコンは、上記のタグで確認ができますので、<link>が読み込まれているかどうかをチェックできると思います。


サンプル


ところで、たくさんアイコンをちりばめるとザワザワした感じになりますので、シンプルにH3とH4タグにだけアイコンフォントをつけました。

H3の例


チェックマークのアイコンフォントをボーダーに換えて配置してみました、色味は朱色っぽく。

H4の例


H4はブルーで鉛筆マークで・・・あわないかも。。。



 とつぜんですが、Hタグをすこし飾り付けしてみようと思いましてアイコンフォントのfontawesoneを設定しました。 fontawesone  設定方法は、「超」がつくほど簡単と言いたいところですがテンプレートをゴソゴソ変更しているとそう簡単にはうまく行かない...
記事を読む »

2015年7月14日



 少し難しいかもしれませんが、美術館の学芸員さんのようなスタイルでブログを作っている人を「キュレーター」や「キュレーションサイト」と呼びます。

情報の収拾や分析、展示する人


 インターネットの普及によって情報が非常に多くなったことで、求めている情報へたどり着くことがますます難しくなってきました。 

膨大な情報の中から、「有用」「面白い」などの情報を集めて紹介したり、展示する人の事を「キュレーター」と呼ぶようになっています。

キュレーターとは


 「キュレーター」というのは、博物館や美術館、図書館などの専門職や学芸員、管理職の事です。 英語圏でこのような仕事をしている人を「キュレーター」と読んでいます。

キュレーターは、何らかのテーマに沿った資料の収拾や分析、調査、そして展示方法などを考えて展示します。

これと同じように、ブログやニュースや画像、映像などを「テーマ」に沿って収拾、調査、分析、展示する事を行う人を「コンテンツキュレーター」と呼ぶようになりました。

コンテンツを探して展示するキュレーションサイト


 キュレーションを紹介する「例え」ですが、グーグル検索によって表示されるコンテンツとそうでないコンテンツがあります。 

グーグルなどの検索サイト(または、検索エンジン)は、プログラムによって世界中のコンテンツを収拾して分析して検索キーワードに関連する記事や画像・映像を示してくれます。

コンテンツ収拾や分析をプログラムで行っています、そのため、コンテンツが検索エンジンの分析方法とあっていない場合やテキストが少ない場合には、検索した時のキーワードに関連して表示されない事が起こります。

例えば、キーワードによっては数10万件ものリストになる事がありますので、多くの人がアクセスするコンテンツは上位の100件くらいではないでしょうか。

シンプルに言うと、

膨大な情報の中から、自分のサイトや記事のテーマに沿ったコンテンツを探して紹介する事を、キュレーションだったりキュレーションサイトと呼びます。

キュレーションサイトを美術館とすると


テーマは、◯×美術館の「◯◯展」という例がわかりやすいでしょうか。

シンプルなテーマは「◯◯」でしょう。 


美術館が収拾している作品は、ひとつだけではありませんね。 

例えば、ピカソを代表とする「キュビスム」作品だったり、モネのような「印象派」作品だったりと・・・分類の大きさも様々あります。

ブログサイトで考えてみますと、サイト全体は美術館のように大きばテーマを取り扱って、個々の展示は絞ったテーマを取り扱いうような方法で展示すると考えると良いかも。

  • テーマ
  • 作品(記事、画像、動画など)の収拾
  • 分析・分類
  • 調査・研究
  • 展示
行うことは結構たくさんあります。

キュレーション記事の例


「まとめ記事」は、最もシンプルなキュレーションの一つの形です。

「◯◯のまとめ」などとタイトルが付いている記事が多いのではないでしょうか。

テーマに沿ってコンテンツを収拾して、それを発信していくブログのスタイル(形式)にする事もできます。

一貫したテーマで「まとめ記事」や「紹介記事」などを作成していると、ブログ全体がキュレーションブログになっていきますよね。

「まとめ記事」は、一つのスタイルですから、より良い展示方法を考える事もキュレーターの役目です。


コンテンツキュレーター


キュレーションするとは自分の興味があることに関してコンテンツを収拾して分析していきます。

そして、そのコンテンツを展示(発信)するためには記事を作成しますからインプットとアウトプットによって知識として記憶に残りやすくなるでしょう。

アウトプットした記事の評価には、例えば「いいね」や「リツイート」などです。

そしてその「いいね」や「リツイート」が増える事で信用が向上するという事があります。

これは、「ソーシャルプルーフ」と呼んでいて、たくさんの「いいね」「リツイート」を集めると信頼性を持つようになることです。

それぞれの記事の信頼が高まってくると、そのサイトのキュレータの信用も上がるということにつながってきます。

「あの人が、あのサイト で、オススメしているのでいいんだろう」と言われるようなブログを作れるようになりたいですね。


 少し難しいかもしれませんが、美術館の学芸員さんのようなスタイルでブログを作っている人を「キュレーター」や「キュレーションサイト」と呼びます。 情報の収拾や分析、展示する人  インターネットの普及によって情報が非常に多くなったことで、求めている情報へたどり着くこ...
記事を読む »

2015年7月13日


 「バズ部」というサイトがあります、ここはブログマーケティングと呼ぶ方法を提供している会社で「どのようにすると、多くのアクセスを集めることができるか」を提供しています。

私たちのブログサイトは、商品を販売したり、サービスを提供するブログではありませんがブログを作る以上は少しでも多くの人にアクセスをしてもらったほうが嬉しいと思いませんか。

そこで、「バズ部」さんの記事「月15万PVを生むブログをデザインした時に徹底した7つの要素」を参照して今作っているブログにたりない要素や変更を確認してみたいと思います。

参照記事:月15万PVを生むブログをデザインしたときに徹底した7つの要素

タイトルに書かれているキーワードは、2つあります。

一つは、「デザインの要素」は7つあります。

もう一つのタイトルに埋め込まれたキーワード「アクセス数」は、月間15万PV(ページビュー:ページが表示された回数)ですので、1ヶ月を30日とすると1日5000PVとなりますね。

7つの要素


記事に使われている用語が大人向けとなっていますので、少し書き換えて7つの要素を箇条書きにします:

  1. 覚えやすいブログのタイトル
  2. 使いやすいナビゲーション・メニュー
  3. 整理されたサイドバー
  4. ソーシャル・ネットワーク・サービスへのボタン
  5. 質の高い記事
  6. 見に来た人に行って欲しい行動
  7. フッター

一つづつ見ていきましょう:

1. 覚えやすいブログのタイトル


 ブログのタイトルとはどういう役目をするのかとということで、「自己紹介」と「得意分野」をお知らせすることがブログのタイトルではとても大切ということです。

この記事の中にあるように、「◯◯の日記」はアイドルや芸能人でない限り見る人は少ないということです。

タイトルで重要なポイントは次の2点と行っています:

・何者かを一言で伝える
・何ができるかを一言で伝える

「バズ部」さんのブログサイトを見ると、タイトルは”バズ部”ですね。 次の「何ができるか」ですが「ソーシャル・メディア・マーケティング」となっています。

カタカナ用語ですので小中学生にはよくわかりませんね。 

「ソーシャル・メディア」というのは、LINEやFacebookやツイッターやYouTubeのような「友達の輪」などを利用した「つながり」を使ったアプリケーションやサービス(どれもインターネットを利用しています)のことです。

マーケーティングは、たくさんの人にアクセスしてもらう方法を調査したり分析して提供することです。

その「ソーシャル・メディア・マーケティング」はどこに書いてあるのかというと、メニューの最初に書いておくことで得意なことを伝えています。

具体的にすると、タイトルはbloggerの設定メニューで設定しますが、得意なことはメニューの一番初めに書いておくことで「私の得意なことはこれです!」と宣言していいるんですね。

メニューの部分には、カテゴリ(分類)やラベルで一番たくさんの記事が書いてあるものを一番初め(左より?)に並べておきましょうということになります。

このようにすることで、「得意なこと」を見に来た人にはっきりとさせることができますね。


2. 使いやすいナビゲーション・メニュー


ナビゲーション・メニューに必要な項目には、「自己紹介」と「問い合わせ先」の2つは必ず書きましょうということです。

それと合わせて、上の「得意なこと」を並べておくことです。

この「自己紹介」には、”どのように役に立てるか”を記載するところで名前や住所は重要ではありません。 お仕事をしている人の場合には、会社の名前や自分の名前を公開しますが、架空の名前でいいです。

問い合わせ先も同じように、お仕事する人にはとても重要ですが小中学生にはそれほど重要ではないと思います。


3. 整理されたサイドバー


サイドバーには、「何を」表示すると良いのかということですが、

メルマガ登録


ブログをお仕事で利用する場合には、メールアドレスの集まり(これらをメールリストと呼びます)は名刺をもらうことと同じくらい重要となりました。 

しかし、今の私たちにはまだ重要ではありませんね。

つながりの仕組み


ツイッターのフォローボタン、Facebookページ(個人のページではありません)などを使った「つながり」を作る仕組みをつけます。 これらは「定期的に読んでもらう」ための仕組みとなります。

ソーシャル・プルーフ


たくさん「いいね」をもらったり「リツイート」してもらうと信用が向上するという研究から賛同を得る仕組みをつけます。

おすすめ記事と関連記事


記事をたくさん読んでもらうための仕組みとして「おすすめ記事」と「関連記事」を入れておくと読んでもらえる記事が増えます。

自己紹介


顔写真などを表示しておくと「信用度」が向上しますが、小中高生ですと顔を表示するのはアイドルくらいでしょう。 それ以外は、「お父さんやお母さん」がオッケーを出してくれたら顔を出してもいいと思います。

広告


多くのブログを見ると、広告が表示されていることがとても多いのです。 ただし、18歳未満ですと広告サービスへの加入はできないので「お父さんやお母さん」の賛同・了承が得られた場合には掲載しても良いでしょう。


これまでに、「おすすめ記事」や「関連記事」を表示する仕組みは組み込んできました。 また、「広告の枠」は用意しましたね。

「メールマガジン登録フォーム」は今は必要ありません。


4. ソーシャル・ネットワーク・サービスへのボタン


 ソーシャル・サービスの共有ボタンの設置は、良い記事を読むと「共有」したいと思ってくれるのでこれらもつけておきましょう。

今までは、ブログ内でできることを中心に行ってきましたのでツイッターやFacebook関連の外のサービスとは連携していません。 

これらの足りないところ、「ツイッターのフォロー」や「Facebookページへの参加」などのボタン、それから「いいね」「リツイート」ボタンでしょう。

Facebookページとツイッターを開設してこれらのボタンを設置するようにしてみましょうか。

5. 質の高い記事


ブログで最も重要な部分です。

記事はとても重要になります、「良質なコンテンツ」と言われるのですが「良質な」という部分でとても難しいと思います。

記事のポイントは箇条書きされている通り:


  • 解決したいと思っている問題点は何?
  • 解決するために何を伝えると役に立つ?
  • 読者目線で書いてあるか?


このように列記するととても難しいように思いますが、自分が読者ならどのような情報が嬉しいかを考えて記事を作成すると良いと思います。

文字で「伝える」ことはとても難しいため、伝わる文章を書く練習が必要だと思います。


6. 見に来た人に行って欲しい行動


ブログを読んでくれた読者に行って欲しい事は何でしょう?

「広告のクリック」ではありませんね、
「商品の紹介」はしていませんし、
「Facebook」や「ツイッター」でフォローして欲しい?

そうですねぇ・・・・
私たちの場合は、「いいね」と「リツイート」でしょうか?


7. フッター


フッターというと、

問い合わせフォーム、コピーライト情報、会社概要、商品取引法に基づく表記などがありますがどれも私たちには関係が薄いですね。

フッターはなくても良いのではないでしょうか。


これから行う事


アクセスしてもらうための最低限必要な要素をみながら、今の私たちのブログをチェックしてみました。

不足している要素としては、Facebookやツイッターとの連携する「いいね」「リツイート」などのボタンとFacebookページとツイッターのアカウントの設置でしょう。

行う事を箇条書きにしてみます:

  • Facebookページの作成方法
  • ツイッターアカウントの設定方法
  • 「いいね」「ツイッター」ボタンの設置
  • Facebookフォローボタン、ツイッターフォローボタンの設置

これからは、この4つをbloggerに追加してみたいと思います。



 「バズ部」というサイトがあります、ここはブログマーケティングと呼ぶ方法を提供している会社で「どのようにすると、多くのアクセスを集めることができるか」を提供しています。 私たちのブログサイトは、商品を販売したり、サービスを提供するブログではありませんがブログを作る以上は...
記事を読む »

2015年7月9日


 Bloggerを使ってブログを作る方法を紹介します、内容的には小学校高学年〜中学生程度を想定しています。

「ブログの作り方」について


はじめに


 このブログは、中学生の子供が夏休みの期間中にインターネットやホームページ、ブログとは何かを理解する手助けとなるよう、実際にブログを作成してみることで体験できるようにするためのメモです。

 2015年の夏休み期間中にインターネットの一部でも感じ取れると良いかなと考えて作成しています。

 文面はすこし馴れ馴れしかったり、上目線なこともありますが何卒ご了承ください。

 有償サービスを使わずにブログサイトの作成や記事を作成できるような内容にしたいと思い作成しております。

 大人な方々にはちょっと「つまらない」と思いますがご理解を賜れれば幸いです。


「ブログの作り方」について


 Bloggerを使った「ブログの作り方」に関連するメモ・ノートのようなブログです。

基本的にはBloggerのアカウントの開設方法からテンプレートのカスタマイズ、テンプレート作成までの範囲を考えています。

ただ、明らかに子供ができそうに無いことも思いつきで記事にすることもあると思います。

また、記事に沿って行った場合に子供らが分からなかったり、混乱するようなことがあればちょこちょこ変更しますので、ブログ記事は変わってることがあるかもしれません。 

何卒ご理解くだされば幸いです。


作成日:2015年6月1日
更新日:2015年7月9日
 Bloggerを使ってブログを作る方法を紹介します、内容的には小学校高学年〜中学生程度を想定しています。 「ブログの作り方」について はじめに  このブログは、中学生の子供が夏休みの期間中にインターネットやホームページ、ブログとは何かを理解する手助けとな...
記事を読む »

2015年7月8日


 テンプレートをちょっと修正しようとしたところ、抜粋表示がなかなか気に入らないのでいろいろとテストしました。

 今日は、Bloggerの使い方というよりも、javascriptの試行錯誤の記録です。

トップページの「抜粋」を変更したいです

Bloggerで抜粋を表示させるには、<data:post.sinppet>が一番簡単な方法ですが140文字固定というのがちっと使いにくいと思いますので程よく表示できるように試行錯誤していました。

Bloggerのトップページに抜粋表示で出来たこと


 どうやっても完璧な文字数カウントが動かないため「記事の抜粋」は記事によって多少の差がでてしまいます。


「記事の抜粋」を追加した

どのように行ったかというと

「記事の抜粋」は、javascriptをつかって<data:post.snippet>を短くするようにしています。 同時に同じ方法でアイキャッチ画像も大きめにしました。

文字数を切り詰めるスクリプト

function truncate(str, size, suffix) {
 if (!str) str = '';
 if (!size) size = 53;
 if (!suffix) suffix = '...';
 var b = 0;
 for (var i = 0;  i < str.length; i++) {
   b += str.charCodeAt(i) <= 255 ? 1 : 2;
   if (b > size) {
     return str.substr(0, i) + suffix;
   }
 }
 return str;
}

substrを使って文字数を切り詰めていますが、ドキュメントによるとsubstringの方が良いようでしたのでテストしてみたところ切り詰められた文字数がかなり変化してしまったので、substrのままとしました。


テキスト切り詰め処理を細工してみた


function createSummary(pID){
 var div = document.getElementById(pID);
 var summ = summary_noimg;
 var index = div.innerHTML.indexOf('。');
 /* var summary =  '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; */
 var summary =  '<div>' + truncate(div.innerHTML, index, '....') + '</div>'

 div.innerHTML = summary;
}

最初に見つかった「。」を抜粋に表示する区切りとしたかったです。 そこで、indexOfを使い位置を検出してから切り詰めしたところ、テキストによっては位置が合なかったりします。

HTMLコード:


<div class='topIndexSnippet'>
<div expr:id='&quot;summary&quot; + data:post.id'>  <data:post.snippet/></div>
<script type='text/javascript'>createSummary(&#39;summary<data:post.id/>&#39;);
</script>
<span class='jump-link' style='float:right;padding-top:20px;'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></span>
</div>

HTMLコードは、<data:post.snippet>を表示させ、javascriptで表示させたい文字数分だけ切り出ししています。

入力テキストに<data:post.body>と使用する方法を元記事の著者は使用していたが、アイキャッチ画像の生成と抜粋の2回処理を行うと読み込みが少し遅くなりましたので「抜粋」を生成する部分はsnippetから生成させています。


the_exruptなどで簡単に取り出せるWordPressとかですともっと簡単なんですが。。。


 テンプレートをちょっと修正しようとしたところ、抜粋表示がなかなか気に入らないのでいろいろとテストしました。  今日は、Bloggerの使い方というよりも、javascriptの試行錯誤の記録です。 トップページの「抜粋」を変更したいです Bloggerで抜粋を...
記事を読む »

2015年7月7日


 小・中学生ネタではないですけれど、bloggerに独自ドメイン(カスタム・ドメイン)を設定する方法を紹介します。

独自ドメイン(カスタム・ドメイン)について


 例えば、ヤフーはyahoo.co.jpなどのような名前でアクセスできると思います。 この名前の部分(yahoo.co.jp)をドメイン名と言います。

このドメイン名は申請によって取得することが可能で、AKBがCMしていた.tokyo(ドットトーキョー)や.yokohama(ドットヨコハマ)、.com(ドットコム)、.net(ドットネット)などをトップレベルドメインと呼びます。

日本のトップレベルドメインは、.jp(ドットジェーピー)で、企業向けに設定された.co.jp、やネットワークサービス向けの.ne.jpなどがあります。 他にも、xxxxx.jp(xxxは3文字以上)を申請することができます。

独自ドメインを使う 理由

独自ドメイン(カスタムドメイン)を使う理由としては、bloggerで利用できるドメインがとても長くなってしまうことだと思います。

例えば、blog.xxxやblooger.xxxなどのキーワードなどは既に他の利用者がいますのでブログのドメイン名が長くなってしまいます。

そこで独自ドメイン(カスタムドメイン)を設定するとことでブログのドメインを変わりやすくすることができるようになります。

広報やブランド名などの面もありますが、bloggerを使うユーザの場合は私的な利用の方が多いと思います。

Bloggerは独自ドメイン(カスタムドメイン)を無料で設定可能


 Bloggerで作成したブログには独自ドメイン(カスタムドメイン)を設定できます。 無料のブログサイトによっては独自ドメインの設定は有料であるケースもありますが、bloggerでは無料です。

ここは、「blog.tukurikata.net」としてホスト名(blog).ドメイン名(tukurikata.net)の割り当てをしています。

ドメイン名(tukurikata.net)の部分を「ネイキッド・ドメイン」と呼びそのアドレスへのブログを割り当てしたり転送(リダイレクト)することも可能です。


独自ドメイン(カスタムドメイン)の取得方法


 独自ドメイン(カスタムドメイン)の取得方法は、ドメイン名を取り扱いしているレジストラやレジストリというところに申請することで取得(空きがあればです)できます。

例えばですが、
AKB48がCMに出演している「お名前.COM」などは記憶があるかもしれません。



ドメイン名を検索してみて、利用者がいなければそのドメイン名は利用可能ですので利用料を払い登録することが可能です。


ネームサーバの設定


ドメイン名を取得した場合、bloggerとのつながりの設定が必要です。

アマゾンのAWS(アマゾン・ウェブ・サービス)のRoute53のサービスを使っている場合は、レコードセットを追加作成して、

Type:CNAME
Value:ghs.google.com

を設定します。

認証ようのホストレコードが必要な場合には、
レコードセットを追加して同様にCNAMEで設定します。

独自ドメイン(カスタムドメイン)の設定方法

bloggerで独自ドメイン(カスタムドメイン)を設定する方法は簡単で、設定メニューで行えます。

設定→基本メニューの「ブログのサードパーティURLを設定」をクリックします。


ウィンドウ内に設定したいドメイン名を入力して保存します。


もしネームサービスの設定をしていない場合には、エラーメッセージが表示されますのでメッセージに従ってネームサービス(DNS)に設定を追加します。


ネームサービスへの設定から反映は利用するサービス次第で24時間以内ですが、お名前.COMの場合は、数分から1時間程度ではアップデートされると思います。


 小・中学生ネタではないですけれど、bloggerに独自ドメイン(カスタム・ドメイン)を設定する方法を紹介します。 独自ドメイン(カスタム・ドメイン)について  例えば、ヤフーはyahoo.co.jpなどのような名前でアクセスできると思います。 この名前の部分(y...
記事を読む »

2015年7月6日


 海外のBloggerテンプレートをテストしてみたら、レイアウトが使えなかったためシンプルテンプレートにプルダウンとスライダーを設置してにたようにしてみました。

海外テンプレートの分析


 昨日テストしたBTemplatesの「Sevim」テンプレートは、レイアウトが使いにくかったです。



そこで、テンプレートに使われている目立った機能を調べてみると(テンプレートをみるだけです):
  • プルダウンメニュー:menuMatics
  • スライダー:jdgallery

これらで構成されていることがわかります。

レイアウトが使えるように、シンプル・テンプレートをカスタマイズしてSevimテンプレートと同じような構成にできるか確認してみました。

menuMaticsの設置


menuMaticsを単体でレイアウトのHTML/Javascriptガジェットに設定すると動作するようにできます。


これですべてうまくいけば問題ないのですが・・・

jdgalleryの実験


テンプレートをカスタマイズする際には、テンプレート・コードは短い方が扱いやすいとおもいます。

Sevimテンプレートのスライダーはjdgalleryをjavascriptとcssを全てテンプレートに組み込んでいるのですが、コードが非常に長くなり可読性がよくありません。

Javascript類をgoogledriveへ出してみましたら、読み込みにとても時間がかかるようになってしまい実用的(表示されるまでにかなり待ち時間ができます)でなくなりました。

そこで、JQueryを使ったスライダーをガジェットに使ってみたところ、menuMaticsのプルダウンメニューが表示されなくなっちゃいました!

JQueryのプルダウン・メニューとスライダー


それなら、

JQueryスライダーと相性の良いJQueryを使ったプルダウン・メニューをテストしたところ、スライダーとメニューともに動作します。



ただ、このスライダーメニューは、「孫カテゴリ」まではできません。 親と子だけのシンプルなプルダウン・メニューであれば使えるとおもいます。

このときのレイアウトメニューはこうなっています:



メニューもスライダーもガジェットにコードを貼り付けして使えると、レイアウトやガジェットの内容などをちょっと変更する場合になどには手軽だとおもいます。


そのスライダーとプルダウン・メニューの設置方法

コピペで使えるスライダーとメニュー

スライダー


ガジェットにコピペするだけで使えるスライダーです:




 ここで配布しているコードをガジェットにコピペするだけで動作するスライダーを設置可能です。
 
 画像(img行)とリンク(a)を変更するとイメージ・スライダーを簡単に設置することができます。

<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides, .flexslider .slides img, .flex-direction-nav { margin: 0 !important; padding: 0 !important; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; }
.flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.5; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.5; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
</style>
    <!-- SLIDER HTML -->
      <div id="flex-isfb">
        <!-- Preloader -->
        <div id="preloader"></div>
        <style>
        /* Preloader */
        #preloader {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:#fff; /* change if the mask should have another color then white */
            z-index:999999999999; /* makes sure it stays on top */
        }
                </style>
        <div class="flexslider">
          <ul class="slides">
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/2.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                <img src="http://project.dimpost.com/flexslider-basic/img/3.jpg" />
                </a>
            </li>
          </ul>
        </div>
      </div>

<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
  animation: "slide",
  controlNav: true,
   directionNav: true,
  easing: "swing",
  slideshowSpeed: 3000,
             animationSpeed: 600,
       });
    });
    //<![CDATA[
        $(window).load(function() {
             $('#preloader').delay(350).fadeOut('slow');
         })
    //]]> 


 CSSを少し追加すると文字を表示したりできますね。



プルダウン・メニュー


プルダウン・ メニューの設置は、テンプレートにCSSとjavascriptをコピペする必要ですの一発で完了とはいきませんが簡単に設置できると思います。

参照:A Beatiful jQuery Drop-Down Menu For Blogger Blogspot


設定手順は、

1)CSSのコピペ


テンプレートを「HTMLの編集」で開き、"]]></bskin>"の直前にCSSをコピペします。

※ 最後の行が"}]]></b:skin>”となっていることがありますので、そのときには、”}”の後ろで改行してからペーストします。

そのままですと、メニューの項目が枠付きとなりますので、装飾している部分をコメントアウトしたり、カラーを変更して自分のレイアウトの合うように変更します。

2)Javascriptのコピペ


続けて、</head>の上にjavascriptをペーストします。


3)メニューをガジェットにコピペ


メニューはUL /LI行で作成しますので下記を参考にメニューを作成してガジェットに貼り付けします。


 <ul id="jsddm">
  <li><a href="#">ホーム</a>
  <li><a href="#">親メニュー</a>
  <ul>
  <li><a href="#">子メニュー1</a></li>
  <li><a href="#">子メニュー2</a></li>
  <li><a href="#">子メニュー3</a></li>
  </ul>
  </li>
 <li><a href="#">Link 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  </li></ul>


このように設定しておくと、メニューの変更やスライダーの変更の際にテンプレートを変更しなくても良くなりますのでブログの運用しながら改変も手軽に行えると思います。


 海外のBloggerテンプレートをテストしてみたら、レイアウトが使えなかったためシンプルテンプレートにプルダウンとスライダーを設置してにたようにしてみました。 海外テンプレートの分析  昨日テストしたBTemplatesの「Sevim」テンプレートは、レイアウト...
記事を読む »

2015年7月5日


  海外で配布されている、Blogger用テンプレートを実際に使ってみたらちょっとつかいずらい。

Blogger用テンプレート

Blogger用のテンプレートを配布しているサイト(BTemplate)のテンプレートでダウンロード数が一番多い(人気がある?)テンプレートを使ってみたら、ちょっとつかいずらかった。

Blogger Templateなどのキーワードでググると出て来るサイトで上位に出てきたのがこちら「BTemplates」です。

とってもこなれたテンプレートだろうと思っていましたので、テンプレート・カスタマイズの参考にでもできればと思いダウンロードしてテストサイトに適用してみました。


ダウンロードしたテンプレート

 今回ダウンロードしたテンプレートは、ダウンロード数が多いテンプレートの「Sevim」というテンプレート。

 ダウンロードしたテンプレートを軽く日本語に変更したところ:


 テンプレートで最初に「???」だったのは、抜粋(data:post.snippet)が全文を出してしまっているところ。

 これまでに、シンプル・テンプレートをカスタマイズしてきたところでは多少不具合はあっても全文が表示されることはありませんでした。 なぜでしょう?

次に「おや?」と思ったところ

 レイアウトの表示がガタガタしているんです。


結果よければとも思いましたが、ちょっと変更した場合でもテンプレートを変更することになります。

「これ、つかいにくくない?」

例えば、headerdescにガジェットを追加してみると、下に表示されないので削除や変更したりできないんです。

これはやっぱり使いにくいとおもいます。


すこし変更しようとおもいます。


  海外で配布されている、Blogger用テンプレートを実際に使ってみたらちょっとつかいずらい。 Blogger用テンプレート Blogger用のテンプレートを配布しているサイト(BTemplate)のテンプレートでダウンロード数が一番多い(人気がある?)テンプレ...
記事を読む »