スタイルシートを学ぼう|FC2ブログ・プチカスタマイズ

  このページはFC2ブログ・プチカスタマイズの スタイルシートを学ぼう に関する情報を紹介しています。
  FC2ブログ・プチカスタマイズは、FC2ブログをちょっとだけ改造して、使い易くします。  FC2ブログの魅力は、初心者は初心者なりに、上級者は上級者なりにテンプレートやスタイルシートを改造して色々と変えることができるところ。 このブログでは、初心者から中級者向けのFC2ブログカスタマイズ法をあれこれご紹介。  FC2ブログを楽しみましょう。

 



FC2ブログ・プチカスタマイズの最新記事

独自ドメインどこで取ったらいい? (11/18)

ムームードメインで独自ドメインを収得したので独自ドメイン収得の流れをご紹介するよ (11/15)

独自ドメインどれをとればいい? (11/07)

FC2ブログから独自ドメインWordPressへの引越し手順概要 (11/02)

やつパリ独自ドメインにはメリットがある (10/24)

FC2ブログからワードプレスへメリットデメリット (10/23)

FC2ブログで障害多発・ほんとにただの障害? (10/07)

Google AnalyticsをFC2ブログに設置 (09/25)

Googlr Analyticsにサイトを登録しよう (09/20)

FC2ブログにファビコンをつけてみよう (08/14)

行間line-heightとpやdiv,ulスペース(領域)指定 (08/08)

HTMLのdiv、p、br、spanの使い方 (08/08)

FC2ブログの有料版メリット・デメリット (06/16)

GooglePageSpeed Insightsのユーザー エクスペリエンスを改善する (06/11)

FC2ブログ・有料化について思うこと (06/10)

関連記事リストにカテゴリ名と記事の投稿日時を表示する (06/10)

個別記事のタイトルは<%sub_title>≒<%topentry_title> (06/07)

サイトに戻るためのリンクをGoogleアドセンスの検索結果表示ページにつける (06/05)

Google『PageSpeed Insights』でスマートフォンサイトの読み込み速度を測定 (06/03)

FC2ブログの記事下や記事の真ん中に広告・ランキング・定型文を表示する方法 (06/02)

記事に直接Googleアドセンスのコードを入れ込むと後々苦労する (05/30)

TwitterボタンのHTMLタグを手に入れよう (05/28)

ブログの変更したい部分をソースで見てみるとスタイルシートの指定場所がわかる (05/25)

JavaScriptをインライン化・スマートフォンサイトの表示時間を早くするテンプレートカスタマイズ (05/21)

プラグイン3を位置変更してページ別に表示されるようにしてみた (05/18)

シーサーブログのサイドカラムを片側に寄せる (05/17)

検索エンジンの検索結果ページに投稿時間を表示する・SEO検索エンジン最適化対策 (05/14)

meta descriptionで記事要約を検索結果ページに表示する (05/13)

FC2ブログの記事の下に広告やランキングを表示させる方法 (05/10)

FC2ブログの関連記事リストを任意の場所に表示する (05/09)

リンクボタンを作ってみよう (05/08)

FC2拍手とFC2ブログ拍手違いを体感してみてね (05/05)

FC2拍手・タグの収得・FC2ブログのプラグインへの設置 (05/03)

FC2拍手のお礼ページを作ろう (04/30)

『拍手』ボタンを設置しよう・登録方法 (04/26)

禁則処理の方法・word-breakで改行の処理を指定するスタイルシート (04/25)

FC2ブログの表示が崩れる原因 (04/20)

ボーダーライン・スタイルの種類 (04/19)

ブラウザ別webページのソースを見る方法 (04/17)

シーサーブログの『過去ログ』リストを横表示にする方法 (04/16)

スタイルシートを使って文字を斜めにする (04/08)

HTMLで文字を斜めに表示する方法 (04/05)

スタイルシートでGoogleアドセンスのコードを横に並べて配置することもできる (04/03)

ヘッダーの行間・行の高さを調整する (04/02)

3カラムテンプレートの構成はどうして決まる? (03/21)

メインカラム左側、サイドカラム二つを右に配置するFC2ブログカスタマイズ・『96_seo_pink-3ca』の場合 (03/21)

FC2総合インフォメーション 【ブログ】「FC2ブログ」をオープンソースで公開!より自由にカスタマイズ可能! (03/19)

『ちょっとしたお小遣いに!ブロマガ記事を投稿しませんか?』といわれても (03/14)

禁則処理・line-break:で禁則処理をするスタイルシート (03/14)

FC2ブログのバックアップ・インポート(復元)で復元できる項目 (03/03)

総記事数:

 
 
Top Page > スタイルシートを学ぼう
【スタイルシートを学ぼうページ】



⇒この記事をもっと読みたい人はこちらの『スポンサーサイト』をクリック

 黒い背景に、白い文字はご用心!  黒い背景に、白い文字、クールな感じで、管理人は好きですが、これ、ちょっと要注意の組み合わせなのだそうです。  印刷されたときに、黒の背景で、白い文字だと、簡単に印刷できないんだそうですよ。 【スタイルシートの記述例】 COLOR: #ffffff; BACKGROUND-COLOR: #000000; または background-color:#000000; color:#ffffff;  プ...

⇒この記事をもっと読みたい人はこちらの『背景と文字の組み合わせにはご注意を!』をクリック

ブログのリンクの色を変えます。 1、FC2ブログの【設定】⇒【テンプレートの管理】をクリックして、テンプレートの編集画面を出します。 2、今使っているテンプレートを【複製】をクリックして、コピーします。 3、リンク設定のスタイルシートの記述の中から、a { またはa:link{ を探します。    ブログ全体のスタイルは【スタイルシート】の上のほうにあります。 例) a {   text-decoration...

⇒この記事をもっと読みたい人はこちらの『リンクの色を変える』をクリック

 ブログの文字の大きさ(フォントサイズ)の指定の単位は、たくさんあるが、PXとかは避けたほうがいいらしい。  pxでフォントサイズを指定すると、ブラウザの文字の大きさを変える機能を使っても、文字サイズが変わらなくなってしまう。  目の悪い人などは、大きい文字で無いと見えにくいということもある。  でも、以外に共有テンプレートはpxによるフォントサイズの指定が多い。  このブログもスタイルシートを見ると、...

⇒この記事をもっと読みたい人はこちらの『スタイルシートのフォントサイズを%による指定に変えよう!』をクリック

 ブログの文字のサイズの指定の仕方もいろいろ。    %による指定やPXによる指定以外にもたくさんフォントサイズの指定の仕方がある。  今回は、文字サイズの指定の単位の種類についてのお話を。 FCブログのスタイルシートの文字の大きさの指定 1、実数で指定する  px・em・ex・in・cm・mm・pt・pcなどの単位で指定する。   数字が小さくなれば、文字が小さくなり、大きくなると文字が大きくなる。 &nb...

⇒この記事をもっと読みたい人はこちらの『文字サイズの指定いろいろ』をクリック

 FC2ブログの記事の中で見出しを使った場合に見出しのフォントサイズをいちいち指定するのも面倒。  スタイルシートを使えば、記事中の見出しのフォントの大きさもブログのテンプレートで一括で指定できる。    h1,h2,h3はもともとのテンプレートで使う場所を指定されてる場合が多く、フォントサイズも指定されている場合が多いので割愛する。    h4からh6までのフォントサイズをテンプレートの中で一括して指...

⇒この記事をもっと読みたい人はこちらの『スタイルシートで、見出しのフォントサイズを一括指定しよう』をクリック

 ブログやサイトの行間を決めるのは、スタイルシートのline-height。  単位(PXなど)でも指定できるし、%でも指定できる。 ブログテンプレートのスタイルシートの指定の仕方  ブログのテンプレートの場合、指定の仕方は↓のような感じになる。 {  line-height: 120%; }   投稿記事内で使う場合の指定 <p style="Z-INDEX: 0; LINE-HEIGHT: 120%">投稿記事内で&nbsp;line-heightを使う場合&l...

⇒この記事をもっと読みたい人はこちらの『行間の指定をするスタイルシート・ line-height』をクリック

 文頭などにスタイルシートで装飾してみよう。  見出しなどに使うと、他の文章と区別がついて読みやすいかも。  例えば、↓見たいな感じ。 見出し装飾の例 二重線・太い線・線の色#808080 で装飾した見出しだよ <h3 style="Z-INDEX: 0; BORDER-LEFT: #808080 thick double">二重線・太い線・線の色#808080 で装飾した見出しだよ</h3>   二重線・太い線・線の色#808080 ・背景色#c4ffc4で装飾した...

⇒この記事をもっと読みたい人はこちらの『文頭に装飾をつけてみよう』をクリック

 FC2ブログのHTMLとスタイルシートはそれぞれ別のボックスに記載されている。  まず、HTMLの記載があって、それを外部スタイルシートとして指定している形。  で、HTMLの中で多用されているのが『div』という記載。  それと『div id』、『div class』。    では、『div』、『div id』、『div class』はどう違う?   『div』、『div id』、『div class』はどう違う?  divとは『<div>~</div>の間にあ...

⇒この記事をもっと読みたい人はこちらの『div、div id、div classとスタイルシートの指定』をクリック

 このブログのH3見出しのスタイルシートは下のようになっている。 /* h3,h4,h5,h6             */h3{ BORDER-BOTTOM: #ea0075 1px dotted;BORDER-LEFT: #ea0075 15px ridge;        font-size: 112%;        }    以前から、この記載だったんだけど、なぜか、スタイルシー...

⇒この記事をもっと読みたい人はこちらの『スタイルシートの指定の文頭に空間があると反映されないかも』をクリック

 禁則処理をしてブログの文章を読みやすくしよう。 禁則処理というのは、「文頭に句読点などが入らないようにする」処理のこと。 厳密に言えば、句読点だけでないのだが、今回は、「、」や「。」などが文頭に来ないようにする方法。 スタイルシートで禁則処理・「、」「。」が文頭に来ないようにする。 「、」「。」が文頭に来ないようにするスタイルシートは『line-break: normal;』。 『normal』は厳密な禁則処理では...

⇒この記事をもっと読みたい人はこちらの『禁則処理・line-break:で禁則処理をするスタイルシート』をクリック

 Googleアドセンスの横に並べて配置する方法。  いや、Googleアドセンスでなくてもだけど。  何らかの要素を横に並べるにはどうしたらいい?  画像は割りと簡単に横並べにできるんだけど、他のコードなんかはどうするんだろう。   Googleアドセンスの広告を横へ並べる方法 <div class="oya"> <div style="float:left;"> Googleアドセンスのコード </div> <div style="float:left;">...

⇒この記事をもっと読みたい人はこちらの『スタイルシートでGoogleアドセンスのコードを横に並べて配置することもできる』をクリック

 スタイルシートで文字を斜めに表示してみよう。  文字を斜めにするには、HTMLで斜め文字にする方法以外に、スタイルシートを使って斜めにする方法もある。 *HTMLを使って、文字を斜めに表示する方法はこちら。   スタイルシート italicを使って文字を斜めにする <body>~</body>に直接記入する場合 <p style="font-style:italic;">・イタリック体・文字を斜めにする</p> <div styl...

⇒この記事をもっと読みたい人はこちらの『スタイルシートを使って文字を斜めにする』をクリック

 スタイルシートで背景を指定する場合、ボーダーラインのスタイルの種類を知っておくと便利だ。   ボーダーライン・スタイルの種類 solid ⇒1本線で表示。 solid ⇒1本線で表示 double ⇒2本線で表示。 double ⇒2本線で表示。 groove ⇒立体的に窪んだ線で表示。 groove ⇒立体的に窪んだ線で表示。 ridge ⇒立体的に隆起した線で表示。 ridge ⇒立体的に隆起した線で表示。 inset ⇒上と左...

⇒この記事をもっと読みたい人はこちらの『ボーダーライン・スタイルの種類』をクリック

 禁則処理をするには、word-break を使うこともできる。  というより、word-break のほうが使い勝手が良いかもしれない。  word-break は行の改行方法を指定する。  この改行方法の指定によって、結果的に禁則処理がされる。   word-break の種類 word-break:normal ⇒中国語(Chinese)、日本語(Japanese)、韓国語(Korean)は厳格に改行制限(禁則処理)される。 ⇒中国語(Chinese)、日本語(Japanese)、韓国語(Korean...

⇒この記事をもっと読みたい人はこちらの『禁則処理の方法・word-breakで改行の処理を指定するスタイルシート 』をクリック

 ブラウザによって違うのかもしれないが、管理人の使っているFirefoxというブラウザはwebページの一部分を範囲指定してそのソースを見ることができる。  ソースを見ると、ブログのテンプレートを改造するのに役立つヒントが見つかるかもしれない。    たとえば、このブログのヘッダー部分を範囲指定して、ソースを見てみると下のようになる。   <div id="headBlock"> <div class="BlogName">&...

⇒この記事をもっと読みたい人はこちらの『ブログの変更したい部分をソースで見てみるとスタイルシートの指定場所がわかる』をクリック

 p、brの違いとスタイルシートの指定についてメモしておこうと思う。  PとBRの行間、段落間のスペースの指定でいまさらながらやっとぴんときたのでいまさらながらメモって置こうと思うのだ。 pは段落、brは改行  pは段落を意味する。  brは改行のタグ。 行間をスタイルシートで指定するには?  行間をスタイルシートで指定するには、 line-height: で指定する。 例) p { line-height: 5; } あるいは <p style="...

⇒この記事をもっと読みたい人はこちらの『行間line-heightとpやdiv,ulスペース(領域)指定』をクリック

 | FC2ブログ・プチカスタマイズ | 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。