あっという間にできる？ココログカスタマイズ！！
まずはじめに、参考にさせて頂いたサイトに敬意を表すると共に、心より感謝致します。ありがとうございます。
さて、小生の「ココログプロ（TypePad系）」でカスタマイズした箇所の「Tips」を書き記したいと思います。
なるべくわかりやすく、そして簡単に書く予定ですが、わかりにくい場合はご自分で調べて下さいね。
☆パソコンを使用する上でのTips☆
１．読みたい「サイト」を別画面で「開く」方法。
飛びたい「Link」先の「URL」上で「キーボード」の
「Shift」を押しながら「マウス」で「左クリック」をする。
２．キーボードで「ペースト（貼り付け）」する方法
「Ctrl」を押しながら「V」
☆カスタマイズする前に便利なTips☆
１．「自己責任」において行って下さい。
２．カスタマイズを行いたい「テンプレート」の複製を作っておくと、
「カスタマイズ」する前の「ソース」を参照できるので、便利です。
３．カスタマイズしたい「項目」の「ソース」を書き換える前に、
カスタマイズ「項目」の「ソース」をメモ帳に「コピペ」しておくと、
間違えた際に、「コピペしたソース」を再度張り直すことができるので、
やり直しが簡単になります。
４．自分で「追加」したい「ソース」の「最初」に
＜!– 管理用 ここから –＞
「最後」に
＜!– 管理用 ここまで –＞を
記しておくと、手を加えた「場所」がわかるので便利です。
☆ココログの「設定」に関するＴips☆
１．「画像」および「ファイル」のアップロード方法。
「ココログ」にログイン→「ウェブログ」→「記事の作成」→
「タイトル カテゴリ」の下にある、丸く色で囲んでいるボタン
（テキストを装飾したりするボタン）の
一番右にある「ファイルの挿入」→「小窓」が開くので、
希望の「画像」や「ファイル」を選択して「アップロード」をすると、
アップロードした「画像」や「ファイル」のアドレスが「本文」に
「表示」されます。
それを、使用したい場所に「コピペ」。
使用した後は、その画面を消してしまっても大丈夫です。
２．テンプレート編集項目の説明
・Archive Index Template（archives.html）
「サイドバー」内にある「バックナンバー」と
書かれている「リンク」で
「表示」したときのテンプレート。
・Atom Template（atom.xml）
「Atomフィード」のXMLテンプレート。
（各テンプレートのヘッダーでリンクされている）
・Main Index Template（index.html）
「メインページ」のテンプレート。
・RSS Template（index.rdf）
「RSS（このサイトと連携する (XML) のリンク）」の
XMLテンプレート。
・Stylesheet（styles.css）
「全て」の「テンプレート」がこの「スタイルシート」の
「記述」通りに動いています。
・Sidebar（sidebar.inc）
サイドバーの「HTML」。
・Category Archives
「カテゴリー別リンク」で「表示」した時のテンプレート。
・DateBased Archives
「日別・週別・月別のリンク」で「表示」したときのテンプレート。
・Individual Archives
「固定リンク・コメント・トラックバックなどのリンク」で
「表示」したときのテンプレート。
☆カスタマイズ☆
１．「アクセス」ログを取る。
小生は「有料版」を使用しているのですが、「無料」でも十分ですので、
小生が使用している「忍者システムズ」を例に書きます。
参考にさせて頂いたサイト：なし
ソースを記述する場所場所：Main Index Template（index.html）の「body」タグ内。
小生は一番下にある
＜/body＞
＜/html＞
の上に書いています。
書き加えるソース：「忍者システムズ」に従う。
２．「スクロールバー」を変更する。
本来は「CSS」で書くはずなのですが、「ココログ」では「html」で書くようです。
参考にさせて頂いたサイト：なし
ソースを記述する場所：Stylesheet（styles.css）
小生は「一番上」に書いています。
書き加えるソース：
html{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #feec4b;
SCROLLBAR-ARROW-COLOR: #fb9204;
SCROLLBAR-BASE-COLOR: #ffffff;
SCROLLBAR-3D-LIGHT-COLOR: #feec4b
}
※＃？？？？？？をかえて下さい。
３．「続きを読む。。。〜」を変更する。
小生は「続きを読む。。。＋タイトル」と言うのがうっとうしいので、
「＞＞続きを読むぞ！」という風に「変更」しました。
参考にさせて頂いたサイト：なし
ソースを記述する場所：Main Index Template（index.html）内の
＜MTEntryIfExtended＞
＜div class=”entry-more”＞
＜p class=”extended”＞＜a href=”＜$MTEntryPermalink$＞#more”＞続きを読む… “＜$MTEntryTitle$＞”＜/a＞＜/p＞
＜/div＞
＜/MTEntryIfExtended＞
にある、
“＜$MTEntryPermalink$>#more”＞続きを読む… “＜$MTEntryTitle$＞”＜/a＞＜/p＞
を
＜p class=”extended”＞＜FONT color=”#f0640f”>＞＞＜/FONT＞＜a href=”＜$MTEntryPermalink$＞#more”＞続きを読むぞ！＜/a＞＜/p＞
に変更。
※ちなみに、「続きを読む。。。〜」を表示させる方法は、
「ココログ」にログイン→「ウェブログ」→「記事の作成」→
ページ下にある「この編集画面の表示設定を変更する」→
「カスタム」から変更。
＜＞が全角になっているところがありますので、半角に置き換えて下さい。
４．「BlogPeople」のリンク欄に「スクロールバー」を付ける。
参考にさせて頂いたサイト：「Piroblog」さんの ここ。
ソースを記述する場所：Stylesheet（styles.css）
小生は「スクロールバー（メインの）」のソースを
記述した下に書き加えました。
書き加えるソース：
.blogpeople-main { overflow: auto; height: 111px; }
※「height」？？？pixの「？？？」にお好きな数字を入れることで、大きさを変更可能。
＜＞が全角になっているところがありますので、半角に置き換えて下さい。
５．「BlogPeople」のリンク欄を「階層」表示する。
参考にさせて頂いたサイト：「ふろむにぅじぃ」さんの ここ。
ソースを記述する場所：Stylesheet（styles.css）
書き加えるソース：「ふろむにぅじぃ」のサイトを読めば一目瞭然！
小生が書くことは全くありません。
６．「サイドバー」内の長すぎる項目（例 「最近の記事」）にスクロールバーを追加する。
参考にさせて頂いたサイト：なし（上記４が参考になったかな）
ソースを記述する場所：Stylesheet（styles.css） と
Sidebar（sidebar.inc）
書き加えるソース：Stylesheet（styles.css）に
.overflow{ overflow: auto; height: 111px; }
Sidebar2（sidebar2.inc）に
＜div class=”overflow”＞＜/div＞
なのですが、これではわかりにくいので（例 「最近の記事」）で言えば、
＜MTBlogIfArchives＞
＜div id=”recent-entries” class=”module”＞
＜h2>最近の記事
＜div class=”overflow”＞
＜ul＞
＜MTEntries lastn=”10″＞
＜li＞
＜a href=”＜$MTEntryPermalink$＞”＞＜$MTEntryTitle remove_html=”1″ generate=”1″$＞＜/a＞＜/li＞
＜/MTEntries＞
＜/ul＞
＜/div＞
＜div class=”module-bottom”＞＜/div＞
＜/div＞
＜/div＞
＜/br＞
の「太字」になっている所です。
※上記最後に「＜/br＞」が追記されておりますが、これは、＜div class=”overflow”＞＜/div＞だけでは、「スクロールバー」を取り付けた「下にある項目のタイトル」とくっついてしまいますので「＜/br＞」を入れることで「改行」させてひっつかないようにしています。
＜＞が全角になっているところがありますので、半角に置き換えて下さい。
※blogpeople関連とスクロールバー関連のソース
＜!– 管理用ここから –＞
html{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #feec4b;
SCROLLBAR-ARROW-COLOR: #fb9204;
SCROLLBAR-BASE-COLOR: #ffffff;
SCROLLBAR-3D-LIGHT-COLOR: #feec4b
}
div.blogpeople-main ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
}
div.blogpeople-main ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
font-size: 100%;
background-repeat: no-repeat;
}
div.blogpeople-main ul.tree li.end {
}
.blogpeople-main { overflow: auto; height: 111px; }
.overflow{ overflow: auto; height: 111px; }
＜!– 管理用ここまで –＞
７．プロフィール（左サイド写真の下にある）の上もしくは下に「メインサイトのリンク」のリンクを張る。
小生のように、メインサイトの「日記」がわりに
「Blog」をしている方もいらっしゃると思います。そこで直接「Blog」に
来た方をメインサイトに「誘導」してあげるために「Link」を付けました。
参考にさせて頂いたサイト：なし
ソースを記述する場所：Sidebar（sidebar.inc）
書き加えるソース：太字の部分
＜/MTUserIfPhoto＞
＜div id=”profile” class=”module”＞
＜div class=”link-note”＞
＜a href=”https://motomichi.jp/”＞＜B＞≫Motomichi’sRoom!（有名サイト!?）＜/B＞＜/a＞
＜BR＞
＜a href=”＜$MTUserSiteURL$＞about.html”＞≫プロフィール＜/a＞
＜/div＞
＜/div＞
＜div class=”list module”＞
※＜＞が全角になっているところがありますので、半角に置き換えて下さい。
８．「投稿記事」の「タイトル」に「画像」を付ける方法。
参考にさせて頂いたサイト：「野宿は楽し雨もまた良し」さんの ここ。
ソースを記述する場所：Stylesheet（styles.css）内の「.content h3 」。
書き加えるソース：
.content h3 {
padding-left: 30px;
background: #fff url(画像のURL) no-repeat left top;
}
小生の場合ですと、
.content h3 {
padding-left: 19px;
background: #FFFFFF url(画像のURL) no-repeat left top;
color: #FF9922;
font-family: ‘MS Gothic’, ‘OsakaMono’, Osaka, sans-serif;
font-size: medium;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}
の「太字」部分です。
※「padding-left: 19px;」の「数字」をかえて「調節」して下さい。
小生が使用している「画像」は「PePPeR」さんから「お借り」しています。
＜＞が全角になっているところがありますので、半角に置き換えて下さい。
９．「引用文」に「アクセント」をつける。
小生の「引用文」は「背景」に「色」を付け、「点線」で囲っております。
その方法を紹介します。
参考にさせて頂いたサイト：「Mervury in the Air」さんの ここ。
「つぶやき小屋」さんの ここ。
ソースを記述する場所：Stylesheet（styles.css）内の「.content blockquote 」。
書き加えるソース：
.content blockquote {
color: #777777; /*文字の色*/
background:#FFFFFC; /*背景色*/
margin:10px 25px 10px 25px; /*余白 上 右 下 左 */
font-size:small; /*文字の大きさ*/
font-weight:normal; /*文字の太さ*/
line-height:135%; /*行間*/
padding: 9px; /*テキストと罫線間の余白*/
border: 1px dotted #3399EF; /*枠の太さ、種類、色*/
width: auto ; /*幅 自動調整*/
}
１０．「続きを読む〜」を押した後の「本文」下に「広告」を「表示」する。
googleの「ads」やAmazonの「ads」を表示する方法。
参考にさせて頂いたサイト：なし
ソースを記述する場所：Individual Archives
書き加えるソース：googleの「ads」やAmazonの「ads（小生は「drk.7jp」さんのを使用しております。
※参考に小生のソース（太字部分）
＜p class=”posted”＞
＜span class=”post-footers”＞投稿:by ＜$MTEntryAuthor$＞ ＜$MTEntryDate format=”%Y %m %d”$＞ ＜$MTEntryDate format=”%I:%M %p”$＞ ＜MTEntryIfCategories＞[＜MTEntryCategories glue=”, “＞＜MTBlogIfArchives archive_type=”Category”＞＜a href=”＜$MTCategoryArchiveLink$＞”＞＜$MTCategoryLabel$＞＜/a＞＜MTElse＞＜$MTCategoryLabel$＞＜/MTElse＞＜/MTBlogIfArchives＞＜/MTEntryCategories＞]＜/MTEntryIfCategories＞ ＜/span＞＜span class=”separator”＞|＜/span＞ ＜a class=”permalink” href=”＜$MTEntryPermalink$＞”＞固定リンク＜/a＞
＜/p＞
＜!– 管理用ここから –＞
＜br /＞＜br /＞
＜p＞＜script type=”text/javascript”＞＜!–
google_ad_client = “”;
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = “250x250_as”;
google_ad_channel =””;
google_color_border = “FF9933”;
google_color_bg = “FFFFFF”;
google_color_link = “000000”;
google_color_url = “336699”;
google_color_text = “333333”;
//–＞＜/script＞
＜script type=”text/javascript”
src=”http://pagead2.
googlesyndication.com/
pagead/show_ads.js”＞
＜/script＞＜/P＞
＜br /＞＜br /＞
＜P＞＜script language=”JavaScript” src=”http://app.drk7.jp/
AmazonSimilarity.cgi?dev-t=
DAB7UJEE24RXR&url=
＜$MTEntryPermalink encode_url=”1″$＞
&n=5&ie=utf8&oe=utf8&style
=heavy&tl=15&cl
=15&t=ID&idx=
Book|Electronics|
Kitchen&force=1″＞
＜/script＞＜/P＞
＜!– 管理用ここまで –＞
※ ＜＞が全角になっているところがありますので、半角に置き換えて下さい。
１１．「検索」の付け方（小生のページ内「SEARCH」全て）。
参考にさせて頂いたサイト：「いかんともしがたい」さんの ここ。
ソースを記述する場所：「Sidebar2（sidebar2.inc）」内の好きな位置。
書き加えるソース：太字
＜!– 管理用はじめ –＞
＜h2＞SEARCH＜/h2＞
＜div class=”linktext”＞
＜ul＞
＜li＞
＜script language=”JavaScript” src=”http://www.nifty.com/
search/s_form/js/s_form_shun_u.js”＞＜/script＞
＜/li＞
＜li＞
＜!– sitesearch google –＞
＜form action=”http://www.google.co.jp/
search” target=”_blank”＞
＜div style=”background-color:#FFFFFF; font-size: small;”＞
＜input type=”text” name=”q” size=”15″ maxlength=”255″ value=”” /＞
＜input type=”hidden” name=”hl” value=”ja” /＞
＜input type=”hidden” name=”ie” value=”utf-8″ /＞
＜input type=”submit” name=”btnG” value=”Google検索” style=”border-style:solid; border-width:1px; border-color#0099FF; background:#CCFFFF; font-size:10pt; color:#0066FF” /＞＜br /＞
＜input type=”radio” name=”q” value=”” /＞ウェブ全体から検索＜br /＞
＜input type=”radio” name=”q” value='”app.cocolog-nifty.com”‘ /＞ココログ全体から検索＜br /＞
＜input type=”radio” name=”q” value=”site:自分のURL” checked=”checked” /＞ぼしょぼしょ内を検索＜br /＞＜/div＞＜/form＞
＜!– sitesearch google –＞
＜/li＞
＜/ul＞
＜/div＞
＜!– 管理用ここまで –＞
１２．「Link」されている「テキスト」の「アンダーライン」を消す。
参考にさせて頂いたサイト：なし
ソースを記述する場所：Stylesheet（styles.css）
書き加えるソース：太字部分
body {
margin: 0px 0px 20px 0px;
background-color: #FFFFFF;
text-align: center;
}
a {
text-decoration: underline; ここ「underline」を「none」に
font-weight: bold;
}
a:link {
color: #6699CC;
}
☆その他 参考にさせて頂いたサイト☆
・「真・テスターの倉庫」さん
・「Blog＊Break！」
・「KOROPPYさんの本棚」さんの ここ。
・「もじかきわーるど♪」さんの ここ。
以上。
最後に・・・
参考にさせて頂いたサイトの管理人さんは、きっと莫大な時間を費やして「Tips」を作成するまでに至っているはずです。小生は特に知識不足ですので、たった「１行のソース」を記述するにしても「辞書」を片手に数時間考えた事もあります。「貼り付ける」事は簡単ですが、参考にさせて頂いた「サイト」様には決して「迷惑」をかけることのないようにお願いします。貼り付ける際には参考にさせて頂いた「サイト」様に「感謝」しながら貼り付けて下さい（別に小生には感謝しなくて良いです（爆））。あえて、小生が「ソース」全文を記載しているのは、その「ソース」を参考にすれば、他のことにも「応用」がきくようになり、「脱 教えて君」になれるようにです。
参考（使わせて頂いた）にさせて頂きました「サイト様」、有り難うございました。
心より御礼申し上げます。
今後とも宜しくお願い申し上げます。
