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

カレンダーのデザインはCSSで指定されています。 今日は、そのCSSを読み解いてみます。 私もCSSをきちんと理解してない初心者ですが、頑張って頭を使ってみました。(`・ω・´)っ ページデザインごとに違うので、一例としてテンプレート「light pole」のCSSを見てみます。 これが「light pole」のカレンダーのデザイン。 シンプルで見やすいから、私のお気に入り♪ 私の好みはおいといて(笑)。 カレンダーに関する部分は8項目ありますね。 似たような名前で混乱しそうですが、1つずつ落ち着いて見てみましょう。 (と自分に言い聞かせてます^^;) では、まず、CSSの中のカレンダーに関する部分は次のところ。 #calendar { margin-top:0px; margin-bottom:30px; font-size:12px; padding:5px; border:1px solid #C6C6C6; width:228px; } #calendar table { width:100%; background-color:#F2F2F2; } #calendar th { background-color:#E1E1E1; border-right:2px solid #F2F2F2; font-weight:bold; } .calendarhead { padding:4px 0p…

続きを読む

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

画像回り込みシリーズも今回が4回目となりました。 画像の横にも文章を(1) 画像の横にも文章を(2) 余白を調整 画像の横にも文章を(3) 崩れた?! 一応、前回で完結しているんですけど、今回は他の方法を紹介します。 CSS(スタイルシート)で指定する方法です。 CSSの設定するページは、「文字の設定(7)ちょっと動くリンク」などで説明しているので参考にしてください。 開きました? それでは、いきましょう。(^-^)ノ 場所はどこでもいいんじゃないかと思うので(根拠はありません…^^;)、一番下のところに次のタグを入れましょう。 そのままコピー&ペーストすればOKです。 画像の横の余白を10pxにしてあります。ご自分の好みで調節してください。 /* 画像右寄せ */ img.right { float: right; margin-left: 10px } /* 画像左寄せ */ img.left { float: left; margin-right: 10px} [スタイルシートを変更する]ボタンを押します。画面の上部に、オレンジ色で「設定を変更し、CSSをビルドしました。」という文字が出ましたね。 CSSの設定はこれで終わりです。 次は、本文を書きます。 画像のアップロードの仕方は、「画像の横にも文章を(2) 余白を調整」を見てくださいね。 で、画像を本文中に挿入したところで、さっき書いたCSSを効かせます。 んー、…

続きを読む

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

[追記] 2013.02.05  全面改稿 * * * 「画像の横にも文章を」シリーズも今回で3回目になりました。 いきなりここからご覧になると「何のこっちゃっ?」ってコトになるかと思いますので、ぜひ前の回から読んでみてくださいね。 画像の横にも文章を(1) 画像の横にも文章を(2) 余白を調整 前回の記事で、画像を右に寄せたり左に寄せたり、本文との間に余白を入れる方法を説明しました。 レイアウトの自由度が上がったでしょ? やってみると楽しかったでしょ? ちょっと技が光るページに見えるようになったでしょ? 「うん!」という答えが聞こえたこととして…(笑)。 なのに、まだ続くには理由があるんです。 次のサンプルを見てください。 (スマホからだと崩れて表示されていないので、サンプルはこちらを見てね) バレンタインは元々キリスト教に由来する祝日で、世界的には男女問わず贈り物やカードを贈る日となっています。日本では女性から男性へチョコレートを贈る行事として独自の発展を遂げました。形はいろいろあれど、バレンタインは大切な人へ気持ちを伝える大切な行事の1つですね♪ 日本でも女友達に贈る「友チョコ」は以前からありましたが、言葉ができたことで市民権を得た気がします。カラフルでかわいいチョコレシピもたくさんの人が紹介されています。今日はそんなオススメの友チョコレシピをご紹介します♪ レイアウトが崩れてる! 思い通りにいってない! ということが…

続きを読む

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

前回、画像の横に文章を回しこむ方法を紹介しました。 画像の横にも文章を(1) 今回は、もうちょっと自分でいじれる部分が増やせるように配置する方法です。 もっとスマートな方法があるかもしれないけど、私がやってる方法を紹介します。 まず、ファイルマネージャーを使って、自分のブログのスペースに画像をアップします。方法は前回のページを見てくださいね。 一覧が表示されているウインドウで、「元画」ボタンをクリックします。 それでは、文章を画像の周りに流し込む呪文をいれましょう♪ イメージタグの中に回し込みを指定するfloatタグを入れます。 画像左寄せなら、 style="float:left" 画像右寄せなら、 style="float:right" です。 <img src="http://☆" style="float:left" > という感じですね。☆のところは自分の画像のURLを入れてください。 imgタグの中身は、srcの後ろにalt="◎"やwidht="◎"、height="◎"、border="0"が来てます。◎はそれぞれ違う値が入ります。 Seesaaブログではこうなってますが、使ってるブログによって多少違うかもしれません。 最後の>の前にでもstyle="float:left"を入れてください。 それじゃ、左寄せのタグを入れた見本を挙げます。 加湿器Ver3 アロマポット付 オレンジ (±0)…

続きを読む

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

「画像に文章が回り込む」って言い方が正確なのかな。 でも、初心者だと「回り込むって何?」と思うのではないかと…。私がそうだったし。 ここは初心者によるブログカスタマイズ初心者のためのブログですから、専門用語(?)を使わずに平易な言葉を使うように心掛けてますので~。 画像と文章を混在させるコンテンツ(ブログでもサイトでもね)の場合、画像の横にも文章を配置したいことありますよね。 私がブログを始めたての頃、これがしたいのに方法がわからなくて困ってました。 他のブログ、例えばJUGEMなんかは機能が付いてて、HTMLタグがわからなくてもできたんですよ。 その頃Seesaaブログには機能がなかったけれど、今ではできるようになりました。 今日は、「横に文章を配置できるように画像を入れる方法-その1-」を紹介します。 Seesaaヘルプでも解説してはあるんですよ。 それをご覧になりたい方は、「ブログ・ヘルプ:画像のアップロード方法について」をご覧くださいね。 実は私はこの方法↑が好きでなくて~。 理由は、アップロードするフォルダを選べないからなんです。 「フォルダは1個しかないよ」という方は全然問題ないので、というか一番簡単な方法なので、上記ヘルプで紹介している方法でやってみてください。 というわけで、アップするフォルダが複数あって指定したい方は、これから紹介する方法がありますので、参考にしてくださいね。 まず、記事投稿の画面を開きます。 文字…

続きを読む

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

ホームページでもブログでも、リンクスタイルの初期設定は下線付きです。 これを消す方法は以前にこちら↓でご紹介しました。   文字の設定(6)リンク下の下線を消す 今回は、マウスを乗せるとちょっと動く設定をご紹介します。 では、CSSを設定するページを開きます。   マイ・ブログ > デザイン > デザイン一覧 ページの真ん中より下の表に現在登録しているCSSの一覧が表示されています。 例えば、「light pole(右サイドバー)」というデザインでは、 a{ color:#36C; text-decoration:none; } となっています。 これを、マウスを乗せたときに   ・1px下に動く   ・色が変わる   ・下線が付く という設定に変えてみます。 a{ color:#36C; text-decoration:none; } という箇所を下記に書き換えます。 a { text-decoration: none } a:link { color: #36c } a:hover { color: #cc0000; text-decoration: underline; position: relative; top: 1px;} hoverというのが、リンクにマウスを乗せたときの設定を書いている部分です。 一つひとつ解説しますね。 color: #cc0000   …> 濃い目の…

続きを読む

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

更新が久しぶりになってしまいました。 何度も見に来て、「まだ更新されてない」って思ってくれた皆さん、すみませんでした。 RSSリーダーでチェックしてくれてる人もいるみたいですね。 RSSリーダーなら、更新がリアルタイムにチェックできるから便利ですね。 更新されてないサイトに何度も行かなくても済むし(ああ、自虐的な…)。 そんなわけで、今日の話題はRSSのアイコンについてです。 こんなのを最近よく見かけますよね。 この「フィードアイコン」 (別名「RSS アイコン」) は、Mozilla Firefoxが採用して使ってきたものだとか。 便利なものは共有したいですよね。 ましてや、マークはみんなで共有したほうがわかりやすい。 GIGAZINE:RSSアイコン標準化プロジェクトという記事を見つけました。 う~ん、カッコいいなぁ。プロジェクトって響き! 私も「RSSアイコン標準化プロジェクト」に乗っかることにします。 Mozilla:フィードアイコンガイドラインを読むと…。ね? 作り出した人たちが使っていいって言ってるんだから、みんなで使いましょうよ! アイコンは、上記の記事で紹介されているFEED ICONSというサイト(英語)から入手できます。 配布しているアイコンは色違いもあって、なんと50色! きっと自分のサイトに合った色が見つかるんじゃないでしょうか。 ↑一例 カスタマイズしたい人向けにai、psdのデータも配布し…

続きを読む

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

いつもクリックしてくれてありがとう。 何度か来てくれている人にはお馴染みのこれ↓ですが、初めて見る人はボタンにカーソルを乗せてみてね。 マウスを乗せると画像が変わるでしょう? ロールオーバーと言います。 クリックしてくれる人にお礼が言いたくて、「ありがとう」の言葉が出るようにしました。 ボタンとして機能しますので、クリックすると、人気ブログランキングへ飛びます。クリックしてみてね。 ロールオーバーにするIMGタグは、次のように書きます。 <IMG src="最初に表示される画像のURL" border=0 onMouseOver=this.src='カーソルを乗せたときの画像のURL' onMouseOut=this.src='カーソルを離したときの画像のURL'> リンクするボタンにするには、<a href="リンク先のURL"></a> で囲えばOK。 <a href="リンク先のURL"> <IMG src="最初に表示される画像のURL" border=0 onMouseOver=this.src='カーソルを乗せたときの画像のURL' onMouseOut=this.src='カーソルを離したときの画像のURL'> </a> という具合です。 カーソルを乗せないと、ロールオーバーになっているかどうかはわからないから、ロールオー…

続きを読む

見出しのデザイン

前回の引用の書式を書いたときに、「これは見出しの書式にも共通することだな」と思いました。 ブログでも、ホームページでも使えると思うので、参考にしてみてくださいね。勉強中の身なので、絶対正しくシンプルなタグかって言われると、自信はありませんけど…。 見出し…という言葉は今まで使ってませんでした。 タイトルというと、ブログのタイトルとか、記事のタイトルみたいなので、あえて違う言葉を使いました。 デザインによっては記事のタイトルみたいになりますし、記事タイトルの下層…小見出しにもなると思います。 文章の長さがある程度になったら、小見出しが付いているほうが読みやすいです。このブログでは付けたことがまだありませんが。(^_^)ゞ 小見出しとして使うときは、自分のブログで使っている見出しがどのタグを指定されているか見てみてください。 Seesaaのテンプレートは、  <h1> … ブログタイトル  <h2> … 日付  <h3> … 記事タイトル となっていますから、<h4>にでもしたらいいんじゃないでしょうか。SEOの観点からは…どうかなぁ? Seesaaのテンプレートの場合、<h2>が日付っていう時点で適切じゃないような気もするので、まぁ気にしないでいきますか…。 私にはまだよくわからないので、判断は各人に任せます。 以下は、とりあえず<h4>ということで書いておきます。 (スタイルシ…

続きを読む

引用(blockquote)の書式

引用の書式は、スタイルシートで設定しています。  マイ・ブログ > デザイン > デザイン一覧 と進んで、タイトルから現在使用しているスタイルシートを選びます。 スタイルシートを開いたら、blockquoteを探します。ここが引用の書式を指定しているところです。 次の例を見てください。 ▼例1 blockquote{ margin:10px; padding:5px; border:1px solid #c0eaff; } 囲み罫(border)の太さ1px、線の色は#c0eaff、罫の外側の余白(margin)10px、罫の内側の余白(padding)5pxという指定です。 Seesaaのテンプレート「ベビー」で使われている書式です。 ▼例2 blockquote{ margin: 20px; padding: 5px; background: #eed;/*背景色*/ } 罫線の指定はなしで、背景色だけ指定した事例です。 背景色を薄い色にするといいですね。 ▼例3 blockquote{ margin: 20px; padding: 5px; color: #630;/*文字色*/ background: #e5e5e5;/*背景色*/ border: 2px solid #ff0032;/*線*/ } このように、文字色、背景色を指定することもできます。 わざと目立つ色にしたけど、…

続きを読む


SPONSORED LINK