サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
10plate.blog44.fc2.com
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ プラグインはリストで書かれていることが多いのですが、リストだと文頭に「・」を表示します。 この「・」を消す方法を紹介します。 スタイルシートの末尾に次の記述を加えてください。 li { margin-left:0px; list-style-type: none; } 赤い数値は左側の余白の値です。お好みの余白になるように適当な数値を入れてください。 関連記事 不要なカテゴリを消す (2007/02/13) 同窓で開くリンクと別窓で開くリンク (2007/02/13) ナビゲーション付きブログサイトマップ (2007/02/13) リストの「・」を消す (2007/02/12) 文字と絵文字画像を揃える (2007/02/08) 記事の行間を変える (2007/0
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ ページが縦に長い場合、下からまたスクロールして上へ戻るのは少々面倒です。 このようなとき、同じページのトップに移動するリンクがあれば便利です。 同じページのトップに移動するリンクの設定方法を紹介します。 HTMLの<body>に、次のように赤い記述を加えてください。 <body id="top"> 【2009/09/03 追記】以前は<body>の直下に<a name="top" id="top"></a>を設定する方法を紹介していましたが、空タグが出来てしまうので上記の方法に修正しました。 次にページトップへ戻るリンクを表示したい所に次のタグを加えてください。 <a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a> 青い
当サイトが配布する共有テンプレートの一覧です。 lightframe シリーズ 読み込んだところから順次表示されるので待たされる感が少なくて済みます。 表示は速いですが、大きすぎる画像の掲載や文法ミスをすると崩れやすいです。
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 文字の大きさを変える方法を紹介します。 スタイルシートの次の変数が文字の大きさに対応しています。 /* サイトタイトル */ h1 { ～ font-size: 1.2em; /* タイトルの大きさ */ ～ } /* サブタイトル(サイト説明) */ h2 { ～ font-size: 0.8em; /* サブタイトルの大きさ */ ～ } /* エントリー（記事）タイトル */ h3 { ～ font-size: 0.8em; /* 記事タイトル文字の大きさ */ ～ } /* エントリー(記事)スタイル */ .article { ～ font-size: 75%; /* エントリー(記事)の文字の大きさ */ ～ } /* メニュータイトル */ .men
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ Hello World Animalsを運営するgallianoさんが、新着記事にサムネイル画像を表示する方法を教えてくださったので紹介します。 gallianoさんのHello World Animalsには、新着記事「New Entry」に画像が表示されています。 記事の度に画像を用意する必要がありますが、視覚的に目に付きやすくなり、自サイトへの有効なリンクになりそうです。 各記事にはそれぞれ記事番号があります。個別記事ページのURLを見れば、その記事の番号が解ります。 ～/blog-entry-○○○.html ○○○の部分がその記事の番号です。 その記事のサムネイルとしたい画像のファイルネームを次のようにしてアップロードしてください。 entry_img_
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 各カテゴリページの上部に、そのカテゴリ専用のフリーエリアを表示する方法を紹介します。 各カテゴリに異なる専用のフリーエリアがあれば、それぞれのカテゴリをアピールするのに役立ちそうです。 HTMLの<head>～</head>の間に、以下を加えてください。 FC2変数を利用するため、スタイルシートではなくHTMLのheadタグ内に書く必要があります。 <style type="text/css"><!-- .c { display: none; } .cn<%cno> { display: block; } --></style> 次に、当サイトが公開している共有テンプレートであれば カテゴリ別フリーエリアの表示位置を 便利ナビゲーションの上に表示したければ <!-
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 以前に紹介した「背景を半透明にする（RGBa）」方法は、IE8ではまだ対応していませんでした。 今回は半透明画像（透過png）を使って、IEでも半透明を実現する方法を紹介します。 まず背景画像として使用する透過pngが必要です。 いくつかサンプルを用意しました。自分のファイル置き場にアップロードしてご自由にお使いください。 半透明にしたい要素の背景にこの透過pngを設定することで、半透明化を実現します。 当サイトが公開している共有テンプレートであれば、スタイルシートの末尾に以下を加えると、記事等の背景を半透明にしてbodyに設定した背景画像が透けて見えるようになります。 【standardの場合】 /* コンテンツ内側背景の半透明化 */ #main_body {
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 背景を半透明にする（透過png）ために、透過pngのサンプルを用意しました。 不透明度は４段階作りました。（より透明 ← 20, 40, 60, 80 → より不透明） #000000 black #808080 gray #C0C0C0 silver #FFFFFF white #FF0000 red #FFFF00 yellow #00FF00 lime #00FFFF aqua #0000FF blue #FF00FF fuchsia #800000 maroon #808000 olive #008000 green #008080 teal #000080 navy #800080 purple サーバ負荷分散のため直リンクはご遠慮ください。一度ダウンロ
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ Googleの検索結果ページ末尾には 前へ 1 2 3 4 5 6 7 8 9 10 次へ というようなページ送りナビゲーションがあります。 空があんなに高いのどんぱんさんが公開されている共有プラグイン「ページナビ」が、この機能を実現してくれています。 このコードを用いてページ送りナビゲーションをテンプレートの任意の箇所に表示させる方法を紹介します。 【参考記事】 空があんなに高い: ページ移動スクリプト FC2変数を利用しているスクリプトの外部ファイル化 - hatena chips HTMLの<head>～</head>内に以下を加えてください。 または外部ファイル化する場合は、赤い箇所以外を外部ファイルに加えてください。 【2009/07/12 追記】 申し
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ FC2の親子カテゴリ機能の追加により、「親カテゴリ」と「子カテゴリ」の設定が可能になりました。 「親カテゴリ」をクリックすることにより「子カテゴリ」が表示（非表示）される、折りたたみ可能な親子カテゴリを紹介します。 HTMLの<head>～</head>の間に、次の記述を加えてください。外部ファイル化するとコンパクトになります。 <script type="text/javascript"> <!-- function showCategory(idno){ cn = ('CategoryNum' + (idno)); if( document.getElementById(cn).style.display == "none" ) { document.getE
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 別枠で違うリンク集が欲しいと思ったことはありませんか？ 残念ながらFC2は管理画面で手軽に編集できるリンク集は一つしか用意されていません。 しかしフリーエリアを利用して作ることはできます。 次のように直接HTMLを書いてください。 <ul> <li &align><a href="http://yahoo.co.jp" title="ヤフー" target="_blank">ヤフー</a></li> <li &align><a href="http://www.google.co.jp/" title="グーグル" target="_blank">グーグル</a></li> </ul> 赤い部分のURLとサイト名を任意のサイトに編集してください。 少し面倒かも知れ
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ はてなブックマークされたFC2ブログの記事に、「○○users」を表示する方法を紹介します。 【参考記事】 自分のブログに「○○users」を表示する はてなブックマークアイコン15色 キイタ？オクサン アラヤダワァ 【各記事に表示する】 HTMLを編集します。表示したい箇所に以下を挿入してください。 <a href="http://b.hatena.ne.jp/entry/<%topentry_link>" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/<%topentry_link>" alt="このエントリーのはてなブックマーク数" /></a> 【プラグイン「最新記事」に表示する】
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 全体を半透明にして背景画像を表示するカスタマイズを紹介します。 スタイルシートの末尾に以下を加えてください。 【standardシリーズの場合】 .base_table { filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; } 【lightframeシリーズの場合】 #outline { filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; } 各数値はお好みに合わせて調整してください。 filter:alpha 0（透明）～100（不透明） -moz-opacity opacity 0.0（透明）～1.0（不透明） これでbodyに
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 以前にタイトル画像をランダムに変える方法を紹介しました。 しかしこの方法は、h1タグ内にJavaScriptを挿入するため、SEO的には良くありませんでした。 いままでのタイトル画像を透明な画像（透過gif）に置き換えて、その背景をランダムに変えるようにすれば、SEOに有効なランダム画像を実現できます。 SEOを考慮するならば、まずjavaScriptの外部ファイル化をするべきです。 【2012/01/14 追記】この外部javascriptへのリンクはcssへのリンクよりも下に挿入してください。 そしてJSファイルの末尾に次の記述を加えてください。 var wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] =
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ グローバルナビゲーションとして、ブログタイトル下に横メニューバーを表示するカスタマイズを紹介します。 キイタ？オクサン アラヤダワァを運営するちゃんさんの「横メニューの設置」を参考にさせていただきました。 次の記述をHTMLに追加します。 赤い箇所は各自希望のURL、リンク名に変えてください。 ここでは例として７件のメニュー項目がありますが、希望にあわせて増減してください。 <!--▼ メニューバー ▼--> <ul id="menu_bar"> <li><a href="<%url>">トップページ</a></li> <li><a href="<%url>archives.html">サイトマップ</a></li> <li><a href="<%url>blog
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 検索エンジンはページ上部にあるキーワードほど重要視するといわれています。 一番上のブログタイトル部分を記事タイトルにすることによって、より各記事にウエイトを置いたSEOが望めるかも知れません。 HTMLを編集します。 私のテンプレートの場合、次のような箇所があるはずです。 【light_frameの場合】 <!--▼▼ ヘッダー ▼▼--> <div id="header_outline"> <div id="header_body"> <h1><a href="<%url>" title="<%blog_name> トップページへ"><%blog_name></a></h1> <div class="intro"><%introduction></div> </
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ サイト背景やタイトル背景等の画像をランダムに変えるカスタマイズを紹介します。 次の記述をHTMLの</head>のすぐ上に貼ります。 <script language="JavaScript"><!-- var wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] = "画像１のURL"; wall[1] = "画像２のURL"; wall[2] = "画像３のURL"; var rnd = Math.floor((Math.random() * 100)) % wall.length; document.write('<style type="text/css">body { background-image:ur
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 【2009/04/26 追記】 よりSEOを考慮した記事を掲載したのでこちらを推奨します。 SEOを考慮したランダムなタイトル画像 以前に背景画像をランダムに変える方法を紹介しましたが今回は背景ではなく、タイトル画像自体を変える方法を紹介します。 HTMLを編集します。 <h1>～</h1>で囲まれている部分を下記記述に置き換えてください。 <h1> <script language="JavaScript"> var images = new Array(); /* 使用するタイトル画像を好きなだけ記述 */ images[0] = "画像１のURL"; images[1] = "画像２のURL"; images[2] = "画像３のURL"; var rnd
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 私のテンプレートは「続きを読む」をクリックしたときに個別記事へ遷移せず、同一ページに展開されるようになっています。 しかし個別記事に遷移させたい方もいると思うので、そのカスタマイズ方法を紹介します。 HTMLを編集します。 まず次のような箇所を見つけてください。 <!--▼ エントリー（記事）▼--> ～ <!--more_link--> <div id="varP<%topentry_no>"> ～ <!--more--> <%topentry_more><!--/more--> ～ <!--▲ エントリー（記事）▲--> この部分を下記記述に書き換えます。 <!--▼ エントリー（記事）▼--> ～ <!--more_link--> <div class="r
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 個別に折りたたむことが出来るプラグインを共有プラグインに登録しました。 以前に紹介した折りたたみ方法は非常に大変でお薦めできるものではありませんでしたが、今回ご紹介するものは折りたたみたいものだけ設定すれば良いので簡単でお薦めです。 この共有プラグインを一つだけ使うならそのまま使用できますが、複数使う場合は少し編集が必要です。 プラグインHTMLを編集します。 <script type="text/javascript"> <!-- function showPlagin(idno){ pc = ('PlagClose' + (idno)); po = ('PlagOpen' + (idno)); if( document.getElementById(pc).s
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 記事投稿アイコンに[Q]というものがあります。これはある文章を引用するときに用います。このアイコンを使うと次のようなタグで囲まれます。 <blockquote><p> 引用部分 <p></blockquote> このタグで囲まれた部分をデザインしてみましょう。 スタイルシートの何処でもいいので次の記述を加えてください。 blockquote { margin:2px; padding:5px; background:#f0f0f0; /* 背景 */ border:#cccccc 1px solid; /* 枠線 */ border-left:#cccccc 5px solid; /* 枠線(左) */ } これで引用部分が解かりやすく表示されると思います。 背景
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ このリンクを各記事に貼っておけば、管理者はこのリンクを使ってすぐにその記事の編集画面を表示できるので便利です。 HTMLのリンクを入れたい場所に次の記述を挿入します。 【画像使用】 <!--▼記事編集▼--> <a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank"><img src="画像URL" style="vertical-align:middle;" border="0" alt="管理者用記事編集" /></a> <!--▲記事編集▲--> 【画像不使用(テキストリンク)】 <!--▼記事編集▼--> <a href="<
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 以前に記事文末にランキング投票や広告等を入れる カスタマイズを紹介しましたが、これはトップページなどでも表示されるものでした。 今回は個別の記事ページのみに表示させる方法を紹介します。 HTMLを編集します。 <!--▼ エントリー（記事）▼--> ～ <!--more--><%topentry_more><!--/more--> <!--permanent_area--> <br /> ここを表示させたいものに置き換えてください。 <br /> <!--/permanent_area--> 赤い部分を加えてください。これで記事ページのみに表示させることができます。 【関連記事】 記事文末にランキング投票や広告等を入れる記事先頭にランキング投票や広告等を入れる記事
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 記事の投稿日時を表示させない方法を紹介します。 ブログをブログとして見せたくない方には有効な方法かも知れません。 HTMLを編集します。 <!--▼ エントリー（記事）▼--> ～ [ <%topentry_year>/<%topentry_month>/<%topentry_day> <%topentry_hour>:<%topentry_minute> ] <a href="<%topentry_category_link>" title="カテゴリを参照"><%topentry_category></a> | <!--allow_tb--> <a href="<%topentry_link>#trackback" title="この記事のトラックバックを参照
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ プラグインカテゴリ３はトップページのみ表示されるようになっていますが、これをトップページ以外でも常に表示されるようにする方法を紹介します。 HTMLを編集します。 <!--▼▼ プラグイン カテゴリー３ ▼▼--> <!--index_area--> <!--plugin--> ～ <!--/plugin--> <!--/index_area--> <!--▲▲ プラグイン カテゴリー３ ▲▲--> 赤い部分を削除してください。これでどのページでもプラグインカテゴリ３が表示されるようになります。 関連記事 背景画像をランダムに変える (2006/10/08) 「管理者ページ」を移動する (2006/09/28) 字体（フォント）を変える (2006/06/24)
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 記事文末にランキング投票や広告等を入れる方法を紹介します。 下記HTMLの箇所に好きな文言や画像、タグ等を挿入してください。 【standardの場合】 <!--▼ エントリー（記事）▼--> ～ <!--more--> <%topentry_more><!--/more--> <br /> ここにランキングや広告等を挿入 <div class="bottom_navi"> ～ <!--▲ エントリー（記事）▲--> 【lightframeの場合】 <!--▼ エントリー（記事）▼--> ～ <!--more--><%topentry_more><!--/more--> <br /> ここにランキングや広告等を挿入 </div><!--/ently_text-->
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 以前にカテゴリーのツリー化をする方法として、FCafeのdanielさんが作成した共有プラグインTree-CATEGORYを紹介しました。これを参考に各カテゴリごとにアイコンを表示できる『アイコン付きツリー化カテゴリー』を作成して共有プラグインに登録したのでこれを紹介します。 プラグインのHTMLは次のようになっています。 <style type="text/css" media="all"> <!-- #ICA p { margin: 4px 0 2px; } #ICA ul { margin:2px 0 4px; padding:0; } #ICA li { background-repeat: no-repeat; list-style-type:none;
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 今やカテゴリーのツリー化は様々な方法が存在しますが、その中でも特に簡単でお薦めの方法を紹介します。 以前はカテゴリー等をツリー化する方法としてJUGEMカスタマイズ講座のtakkyunさんが紹介しているスクリプトを利用した方法が有名でした。 (ワンダと巨像と土と空のNICOさんがカテゴリーのツリー化の手順を解説されています) しかしこの方法は全ての記事のカテゴリーを編集し直す必要があり、既に記事を沢山書いている方にとっては敷居が高いカスタマイズでした。 今現在で私が知る最も簡単にツリー化できる方法は、FCafeのdanielさんが紹介している共有プラグインTree-CATEGORYを使う方法です。 【Tree-CATEGORY】 まず共有プラグインからTree-C
次のページ
このページを最初にブックマークしてみませんか？
『FC2ブログのテンプレート工房』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
