ナガブロ・ブロホ講座（上）告知と情報まとめサイト

アレが3倍加速する!? ナガブロ・ブログ講座(ブロホ講座)

上級講座でやること。


ナガブロのテンプレートは素人には手が出せない、
テンプレートの呪文のような文字を見るだけで
じんましんが出るなど好評です！
そこで、この講座が生まれました！
大きな目的は、
ブログのヘッダ部分を少し変える（カスタマイズ）方法を
ワークショップ形式で学ぶこと！
さらにっ！
最近の傾向で、どんな画像や色でカスタマイズするのがイイ感じなのかをお話します！
この講座は少し条件があります。
  1. なにより、ナガブロを使っていること！
  2. デジカメ（スマホ可）が使えること
  3. パソコンを使える（キーボードが打てる）こと
ナガブロの管理画面で行う操作と、
そのための知識の講座です！

テンプレート編集が
何でもできるのはナガブロの利点！

この告知ブログもそうですが、
がっつりカスタマイズすると
PR専門サイトとして使うこともできちゃいます。
また、ナガブロの中で作ることの
大きなメリットについてもお教えします！
ちなみに、今回お教えするのは「CSS」。
その中でも「background」というプロパティ。
CSSと「セレクタ」の関係がわかればいろいろ応用が利きます！

準備しておいて欲しいもの



なにより、このGoogleChromeブラウザがあるといろいろ便利なのです。
これを機会に、ご自分のPCに是非インストールしておいて下さい！
※須坂会場、松本会場とも会場備え付けのPCを使うことになります。
　当日はフリー素材の写真を使いますが、使用したい画像があればUSBメモリで持ってきてください。
　スマホ内の画像を使用する場合、PCへうまくコピーできないと思いますので、
　あらかじめそのままの大きさでブログにアップしておく等の工夫が必要です。
テスト用にご自分のナガブロ会員IDで
ブログを１本作っておいて下さい。
  1. テンプレートは「No Images」
  2. 「ブログ環境設定」→「表示内容の設定」→「ナガブロの「新着記事」に載せない」

SNSとブログの蜜月な関係

fbやTwitterとブログの棲み分け。SNSの特徴。
このイメージキャプチャーは何を意味するのか？！
全力で活用・運用することで、信じられないコスパで広報できる。
かもな事を話す予定(・∀・)

画像編集（トリミングと大きさ変更）


オンライン：Photoshop.com「オンラインツール」⇒「Photoshop Express Editor」
オンライン：画像サイズ変更ツール(JPEG用）

インストール型なら「Picasa」というソフトもオススメ！

参考Link

泉工業株式会社
京都府城陽町の後染ラメ糸メーカーのブログ。fbページ。
CSS3 Generatorグラデ−ションや角丸をCSS3で作成。
コードをコピペするだけで扱える便利サイト。

お申し込み

お申し込みは、ナガブロ・ブロホ講座のフォームよりお願いします
６月は須坂と松本の２会場です。
ナガブロテンプレート置換タグ一覧掲載しました。

セレクタのメモ

「#banner」、「.blogtitle」、「.description」それぞれのプロパティを変更。CSSプロパティの意味を当日説明します。



#banner, #subbanner {

padding: 40px 10px 10px 15px;

height: 100px;

}

.blogtitle {

font-size: 120%;

font-weight: bold;

padding: 20px 0px 0px 0px;

text-align: left;

}

.description {

color: rgb(51, 51, 51);

font-size: 70%;

padding: 4px 0px 0px 0px;

text-align: left;

}

メモ 2013.5.1
掲載データ：2013年04月24日に記載

このサイトのテンプレート

参考までに、このサイトのTOPページテンプレートを掲載しておきます。
案外シンプルに仕上がっているんですよ。


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset=utf-8">

<link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.css">

<link rel="stylesheet" href="<%CSSUrl%>">

<title><%BlogTitle%></title>

<meta name="description" content="<%BlogDescription%>">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!--[if gte IE 9]>

  <style>

    body {

       filter: none;

    }

  </style>

<![endif]-->

<script>

;(function () {

$(function(){



$('.main img').each(function(){

if ($(this).width() > 450 ) {

$(this).wrapAll('<div style="text-align:center;width:100%;margin:6px"></div>'); }

});





// a link animete

$('a').mouseover(function(){

$(this).css('opacity', '0.4');

$(this).css('filter', 'alpha(opacity=40)');

$(this).fadeTo('slow', 1.0);});



$('.toTop').click(function() {

$('html, body').animate({scrollTop:0}, 600, 'swing');

return false;});



});

}());

</script>

</head>

<body>

<!-- HEADER -->



<header id="top">

<h1 class="blogtitle"><a href="<%BlogUrl%>"><%BlogTitle%></a></h1>

<p class="description"><%BlogDescription%></p>

</header>



<section class="main">



<!-- Loop Start -->

<IndexEntrysLoop>

	<h2 class="title <%EntryId%>"><%EntryTitle%></h2>

	<%EntryBody%>

	<div class="date">掲載データ：<%EntryDate%>に記載</div>

</IndexEntrysLoop>

<!-- Loop End -->

<aside class="menu"

><IfPrevPage>[<a class="amenu" href="<%PrevPage%>">前のページ</a>]

</IfPrevPage>

<a class="toTop" href="#top">このページの上へ▲</a>

<IfNextPage>

[<a class="amenu" href="<%NextPage%>">次のページ</a>]

</IfNextPage>

</aside>

</section><!-- main -->



<div id="links">

<%PluginList%>

</div>



<footer>

<p class="copyright">Copyright(C)<%Year%>/<%BlogTitle%> ALL Rights Reserved</p>

</footer>

</body>

</html>
掲載データ：2013年04月25日に記載

ナガブロテンプレート置換タグ

テンプレートの中で書かれている置換タグ一覧です。

掲載データ：2013年04月25日に記載

講座で使う写真


ナガブロテンプレートカスタマイズ上級講座で使う画像です。
（ご自分の画像を使う場合は必要ありません）
.
掲載データ：2013年05月01日に記載

テンプレートのタグ解説入りソース


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　↑　ブラウザに表示モードを設定させるスイッチ

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">　←HTML宣言はここから

↓ここから下は表示されないが、スタイルを読み込んだり、JavaScriptの記述に関係する部分

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　　　　　スタイルシートの読み込みURLに変換される
　　　　　　　　　　　　　　　　　　↓
<link rel="stylesheet" href="<%CSSUrl%>" type="text/css" />
　　　　　　　　　　　　　　　　　　　　　　　　　　RSSの配信URLに変換される
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%RDFUrl%>" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%RSDUrl%>" />
　　　検索エンジンロボット用にサイトマップを提供するURLに変換される
　　　　　　　　　　　　　　　　　↓
<link rel="contents" href="<%SiteMapUrl%>" />



ブログ環境設定　→　ブログのタイトル部分が反映
ブラウザのタイトルバー（またはタブ）部分に表示される
　　　　　　↓
<title><%BlogTitle%></title>


　　ブログ環境設定　→　ブログの説明文が反映
　　　　　　　　　　　　　　　　　　　　　　　　　↓
<meta name="description" content="<%BlogDescription%>" />
　　　　　　　　　　　　　検索エンジン用のメタタグ
　　　　　　　　　　　　　　　　　　　　　　↓
<meta name="keywords" content="<%BlogTitle%>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link href="05.css" rel="stylesheet" type="text/css" />
<link href="mono.css" rel="stylesheet" type="text/css" />
</head>

↑ここから上の部分は表示されない

<body>　←　ブラウザに表示される部分はここから
<!-- HEADER -->

<a name="top"></a>　←「TOPへもどる」の戻り先
<div id="container">　←　レイアウトのためのdivタグ（実は作り方が古いです）
<div id="banner">　←　ブログヘッダー部分を作っているdivタグ

　　　　　　　　　　　　　　　　ブログ環境設定　→　ブログのタイトル　が反映（headと同じ）
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
　　　　　　　　　　　　　　　　　　↑このブログのTOP（HOME）ページURLに変換

　　　　　　　　　　　　　　　↓ブログ環境設定　→　ブログの説明文が反映（headと同じ）
<div class="description"><%BlogDescription%></div>

</div>　←ブログヘッダー部分「banner」はここまで

<div id="content">　←　ブログコンテンツ（本文表示）を作っているdivタグ
<div class="blog">　←　レイアウトのためのdivタグ



ブログ環境設定　→　記事の最大表示数　→　トップページで表示される記事数　で設定した回数だけループ開始
<!-- Loop Start -->
<IndexEntrysLoop>

<%TrackBackAutoDiscovery%>　←　TrackBack自動検出タグ（削除しても良いと思う）



　　　　　　　記事投稿「タイトル」が反映
　　　　　　　　　　　　↓
<h2 class="title"><%EntryTitle%></h2>

<div class="blogbody">　←　レイアウトのためのdivタグ
<a name="<%EntryId%>"></a>　←　記事のIDが自動的に入る
<div class="main">　←　レイアウトのためのdivタグ



記事投稿「本文」が反映
　　　↓　　　　　　　　　　　　　　　　↓記事投稿で「追記」を書いた場合、これ以降の記述が表示される
<%EntryBody%>&nbsp;&nbsp;<IfEntryBodyMore>
<span class="main-continues">
　　　　　　　　　　　　　　　　↓個別記事へのリンクが自動的に入る
<a class="acontinues" href="<%EntryPermalink%>">続きを読む</a>
</span>

　　　　↓ここまでの区間が「追記」を書いた場合表示される
</IfEntryBodyMore>
</div><br clear="all" />　←　レイアウトのためのdivタグクラス「main」はここまで

<div class="posted">　←　レイアウトのためのdivタグ


<IfDateChanged>　←　記事投稿　→　オプション設定「投稿日時」が設定されていた場合、以下の記述が表示
　　　　　　　　　　　※この記述が無い場合、オプション設定で指定した日にちではなく、記事を「書いた」日にちが表示される

<h3 class="date"><　←　本来ここは「H3」では文法上おかしい。修正できる人は直した方が良い。

　　　↓　投稿日時または記事を書いた日が反映
<%EntryDate%> Posted by <%EntryAuthor%> at
　　　　　　　　ニックネームが反映　↑


　　　　　　　　　　　　　　　　↓個別記事表示へのリンクが自動的に入る
<a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>
　　　　　　　　　　　　　　　　　　　　　　　　　　　↑投稿時または記事を書いた時間が反映

<IfEntryAllowComment>　←　ここからコメントがあった場合に表示される

　　　　　　　　　　　　　　　　　↓コメントのあった個別記事ページのURLが自動的に入る　
│<a class="aposted" href="<%EntryPermalink%>#comments">Comments(<%EntryCommentCount%>)</a>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑　コメントの数が反映

</IfEntryAllowComment>　←　ここまでがコメントがあった場合に表示される

<IfEntryAllowPing>　←　ここからトラックバックがあった場合に表示される

　　　　　　　　　　　　　　　　　↓トラックバックのあった個別記事のURLが自動的に入る
│<a class="aposted" href="<%EntryPermalink%>#trackback">TrackBack(<%EntryPingCount%>)</a>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑　トラックバック数が反映
※トラックバックは削除しても良いかもしれません
</IfEntryAllowPing>　←ここまでがトラックバックがあった場合表示される

<IfEntryCategory>　←　ここからカテゴリに属していた場合に表示される

　　　　　　　　　　　　　　　　　↓カテゴリ一覧のアーカイブページURLが自動的に入る
│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑　所属カテゴリ名が反映

</IfEntryCategory>　←ここまでがカテゴリに属していた場合に表示される

</h3>　←　データ関連表示の閉じタグ
</IfDateChanged>　←　ここまでがオプション設定「投稿日時」の影響範囲
</div>　←　レイアウトのためのタグクラス「posted」はここまで
</div>　←　レイアウトのためのタグクラス「blogbody」はここまで

</IndexEntrysLoop>
<!-- Loop End -->
↑　ここまでがループされる　

<div class="menu">　←レイアウトのためのタグ
<IfPrevPage>　←　これよりこのページよりも前に記事がある場合に表示される
　　　　　　　　　　　　　　↓これより前のページのURLが自動的に入る
[<a class="amenu" href="<%PrevPage%>">前のページ</a>]
</IfPrevPage>　←　ここまでこのページよりも前に記事がある場合に表示される

<IfNextPage>　←　これよりこのページよりも後に記事がある場合に表示される
　　　　　　　　　　　　　　↓これより後のページのURLが自動的に入る
[<a class="amenu" href="<%NextPage%>">次のページ</a>]
</IfNextPage>　←　ここまでこのページよりも後に記事がある場合に表示される
</div>　←　レイアウトのためのタグ「menu」はここまで

<div class="pagetop">　←　レイアウトのためのdivタグ
<a class="aposted" href="#top">このページの上へ▲</a>
</div>　←　レイアウトのためのタグ「pagetop」はここまで
</div>　←　レイアウトのためのタグ「blog」はここまで
</div>　←　レイアウトのためのタグ「contents」はここまで

<div id="links">　←　レイアウトのためのタグ
<%PluginList%>　←　サイドバーが反映

</div>　←　レイアウトのためのタグ「links」はここまで

<div id="footer">　←　レイアウトのためのタグ

<div id="copyright">　←　レイアウトのためのタグ
　　　　　　　　↓西暦　↓ブログタイトルが反映
Copyright(C)<%Year%>/<%BlogTitle%> ALL Rights Reserved
</div>　←　レイアウトのためのタグ「copyright」はここまで
</div>　←　レイアウトのためのタグ「footer」はここまで
</div>　←　レイアウトのためのタブ「container」はここまで
</body>　←　ブラウザに表示される部分はここまで
</html>　←　HTML宣言はここまで
掲載データ：2013年05月06日に記載

フォローアップ


スライド

講座を受けた人用に、スライドを作成しました。（受講していない人には流れがわからないと思います）
これを見てもう一度思い出してもらえるといいですね。



PDF

講座の時に使ったPDFです。無くしてしまったり、復習に使いたい場合にどうぞ。

b_kouza2013.pdf (PDF: 257KB)


参考書籍


スタイルシートを扱う上で持っていると便利な書籍です。
・知識として知っているとカスタマイズがガンガンできる参考書籍
　　12歳からはじめるＨＴＭＬ5とCSS3

・スタイルシートをもっと使いこなしたいと思ったときの参考書籍
　　すべての人に知っておいてほしいスタイルシートデザインの基本原則

・プロの入門書ともいうべき参考書籍
　　すべての人に知っておいてほしいHTML5 & CSS3 の基本原則

・さらにプロ並みの知識をつけたい時の参考書籍
　　CSS3デザインブック　仕事で絶対に使うプロのテクニック

・本当に基礎から勉強してみようと言う方にオススメの参考書籍
　　基礎から覚える、深く理解できる。Webデザインの新しい教科書

Yahoo!　リアルタイム検索

話ができなかった会場もありましたが、リアルタイムに現在どんなキーワードがTwitterやFacebook上などで話題になっているのかを調査するツールのアドレスはこちらです。

http://search.yahoo.co.jp/realtime

グラフは調査対象のキーワードがいつ頃から何人くらいにつぶやかれているのかを表しています。

これからつぶやかれる（であろう）キーワードをブログに書いていたり、書いた記事がドンピシャだったときの拡散度は大きいと思われます。（確立は低いですが）
ちなみに少し本題からずれますが、少しおすすめの本「普通の人たちを予言者に変える　「予測市場」という新戦略」です。


掲載データ：2013年05月13日に記載