カレンダーのデザイン(1)

カレンダーのデザインはCSSで指定されています。 今日は、そのCSSを読み解いてみます。 私もCSSをきちんと理解してない初心者ですが、頑張って頭を使ってみました。(`・ω・´)っ ページデザインごとに違うので、一例としてテンプレート「light pole」のCSSを見てみます。 これが「light pole」のカレンダーのデザイン。 シンプルで見やすいから、私…

続きを読む

画像の横にも文章を(4) CSSで指定

画像回り込みシリーズも今回が4回目となりました。 画像の横にも文章を(1) 画像の横にも文章を(2) 余白を調整 画像の横にも文章を(3) 崩れた?! 一応、前回で完結しているんですけど、今回は他の方法を紹介します。 CSS(スタイルシート)で指定する方法です。 CSSの設定するページは、「文字の設定(7)ちょっと動くリンク」などで説明しているので参考にしてください。 開きま…

続きを読む

画像の横にも文章を(3) 崩れた?!

[追記] 2013.02.05  全面改稿 * * * 「画像の横にも文章を」シリーズも今回で3回目になりました。 いきなりここからご覧になると「何のこっちゃっ?」ってコトになるかと思いますので、ぜひ前の回から読んでみてくださいね。 画像の横にも文章を(1) 画像の横にも文章を(2) 余白を調整 前回の記事で、画像を右に寄せたり左に寄せたり、本文との間に余白を入れる方法を説…

続きを読む

画像の横にも文章を(2) 余白を調整

前回、画像の横に文章を回しこむ方法を紹介しました。 画像の横にも文章を(1) 今回は、もうちょっと自分でいじれる部分が増やせるように配置する方法です。 もっとスマートな方法があるかもしれないけど、私がやってる方法を紹介します。 まず、ファイルマネージャーを使って、自分のブログのスペースに画像をアップします。方法は前回のページを見てくださいね。 一覧が表示されているウイ…

続きを読む

画像の横にも文章を(1)

「画像に文章が回り込む」って言い方が正確なのかな。 でも、初心者だと「回り込むって何?」と思うのではないかと…。私がそうだったし。 ここは初心者によるブログカスタマイズ初心者のためのブログですから、専門用語(?)を使わずに平易な言葉を使うように心掛けてますので~。 画像と文章を混在させるコンテンツ(ブログでもサイトでもね)の場合、画像の横にも文章を配置したいことありますよね。 私…

続きを読む

文字の設定(7)ちょっと動くリンク

ホームページでもブログでも、リンクスタイルの初期設定は下線付きです。 これを消す方法は以前にこちら↓でご紹介しました。   文字の設定(6)リンク下の下線を消す 今回は、マウスを乗せるとちょっと動く設定をご紹介します。 では、CSSを設定するページを開きます。   マイ・ブログ > デザイン > デザイン一覧 ページの真ん中より下の表に現在登録しているC…

続きを読む

フィードアイコン(RSSアイコン)

更新が久しぶりになってしまいました。 何度も見に来て、「まだ更新されてない」って思ってくれた皆さん、すみませんでした。 RSSリーダーでチェックしてくれてる人もいるみたいですね。 RSSリーダーなら、更新がリアルタイムにチェックできるから便利ですね。 更新されてないサイトに何度も行かなくても済むし(ああ、自虐的な…)。 そんなわけで、今日の話題はRSSのアイコンについてです。 …

続きを読む

カーソルを乗せると画像が変わる-ロールオーバー

いつもクリックしてくれてありがとう。 何度か来てくれている人にはお馴染みのこれ↓ですが、初めて見る人はボタンにカーソルを乗せてみてね。 マウスを乗せると画像が変わるでしょう? ロールオーバーと言います。 クリックしてくれる人にお礼が言いたくて、「ありがとう」の言葉が出るようにしました。 ボタンとして機能しますので、クリックすると、人気ブログランキングへ飛びます。ク…

続きを読む

見出しのデザイン

前回の引用の書式を書いたときに、「これは見出しの書式にも共通することだな」と思いました。 ブログでも、ホームページでも使えると思うので、参考にしてみてくださいね。勉強中の身なので、絶対正しくシンプルなタグかって言われると、自信はありませんけど…。 見出し…という言葉は今まで使ってませんでした。 タイトルというと、ブログのタイトルとか、記事のタイトルみたいなので、あえて違う言葉を使い…

続きを読む

引用(blockquote)の書式

引用の書式は、スタイルシートで設定しています。  マイ・ブログ > デザイン > デザイン一覧 と進んで、タイトルから現在使用しているスタイルシートを選びます。 スタイルシートを開いたら、blockquoteを探します。ここが引用の書式を指定しているところです。 次の例を見てください。 ▼例1 blockquote{ margin:10px; padd…

続きを読む