もう怖くない！パソコンと仲良くなるTipsブログ https://ameblo.jp/get-friend-pc/ パソコン苦手～とりあえず使えるけど、、、ブログってどうやって書いたらいいの？カスタマイズなんてできるわけない！そんな方も、実際は、知らないだけ。わからないだけ。できることから、少しずつパソコンと仲良くなりませんか？ ja 記事を枠で囲む＜div＞タグは、囲むだけじゃない
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★


ブログの記事を書くとき、
文字の色やサイズを変えてみたり、、、
絵文字や画像を使ってみたり、、、
読みやすいように、行間を開けてみたり、、、
目立たせたいところは、太字にしたり、、、
いろいろ工夫しますよね。

わたしも、
　ヘッダーメニュー追加の手順

という使い方をしている、

＜div＞タグ

この＜div＞＜/div＞で囲むと、
見えないブロックのようなものができるのです。

そこに、枠や背景を指定すると、
いろんな使い方ができるのです。

＜div＞タグの基本編は、コチラ↓
ブログ記事を部分的に枠で囲みたい

基本編では、枠のカタチをメインにお伝えしました。
今回は、枠線いろいろアレンジ★

◆枠線の種類を変えてみましょう。
[solid]は、実線ですが、それ以外にもこんなに種類があります。

[solid]は、実線

<div style="border:5px solid #FF6C37; padding:10px;">[solid]は、実線</div>

[dotted]は、点線

<div style="border:5px dotted #FF6C37; padding:10px;">[dotted]は、点線</div>

[dashed]は、破線

<div style="border:5px dashed #FF6C37; padding:10px;">[dashed]は、破線</div>

[double]は、二重線

<div style="border:5px double #FF6C37; padding:10px;">[double]は、二重線</div>

[inset]は、内向き立体

<div style="border:10px inset #FF6C37; padding:10px;">[inset]は、内向き立体</div>

[outset]は、外向き立体

<div style="border:10px outset #FF6C37; padding:10px;">[outset]は、外向き立体</div>


◆囲むだけが、＜div＞タグじゃないんです。
線を上下左右、それぞれ指定することができます。
（わかりやすくするために、背景色を入れています）

[border-top]は、枠の上のみ

<div style="border-top:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-top]は、枠の上のみ</div>

[border-right]は、枠の右のみ

<div style="border-right:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-right]は、枠の右のみ</div>

[border-bottom]は、枠の下のみ

<div style="border-bottom:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-bottom]は、枠の下のみ</div>

[border-left]は、枠の左のみ

<div style="border-left:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-left]は、枠の左のみ</div>


上下で組み合わせてみたり

<div style="border-top:2px dotted #FF6C37; border-bottom:5px solid #FF6C37; padding:10px;">上下で組み合わせてみたり</div>

左と下で組み合わせて、色や太さを変えてみたり

<div style="border-left:15px solid #00A794; border-bottom:10px solid #C60091; padding:10px;">左と下で組み合わせて、色や太さを変えてみたり</div>


このように、アレンジは自由自在。

どんなデザインにしたいか、
どんなイメージを伝えたいか、
明確にしておかないと、
どうしたらいいのか、わからない、思いつかない
という深みにはまってしまいます。

ビシッときめてみたい


やさしくふ～んわり


なーんてイメージをしながら作ることが、
とっても大切です！！！

]]> https://ameblo.jp/get-friend-pc/entry-11642598029.html Sat, 19 Oct 2013 01:07:29 +0900 ブログ記事を部分的に枠で囲みたい
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★


ブログの記事を書くとき、
文字の色やサイズを変えてみたり、、、
絵文字や画像を使ってみたり、、、
読みやすいように、行間を開けてみたり、、、
目立たせたいところは、太字にしたり、、、
いろいろ工夫しますよね。

わたしも、
　ヘッダーメニュー追加の手順

という使い方をしている、

＜div＞タグ

この＜div＞＜/div＞で囲むと、
見えないブロックのようなものができるのです。

そこに、枠や背景を指定すると、
いろんな使い方ができるのです。


◆まずは単純に、枠で囲んでみます。
ここに記事を記入します。

<div style="border:2px solid #FF6C37;">ここに記事を記入します。</div>


◆枠線の太さを変えてみます。
　「2px → 5px」
[border]は、線のことです。
太さや線の種類、線の色を指定します。
[solid]は、実線を意味します。

<div style="border:5px solid #FF6C37;">[border]は、線のことです。
太さや線の種類、線の色を指定します。
[solid]は、実線を意味します。</div>

枠線と文字がぴったりしていて、少し読みにくいですね。。。


◆枠線と文字の間に余白を入れてみましょう。
　「padding:サイズ;」
[padding]は、文字の周りの余白
これがないと、読みにくい。。。

<div style="border:5px solid #FF6C37; padding:10px;">[padding]は、文字の周りの余白
これがないと、読みにくい。。。</div>


◆どこか1か所だけ、余白というのもできます。
　「padding-位置:サイズ;」
[padding-top]は、文字の上の余白

<div style="border:5px solid #FF6C37; padding-top:20px;">[padding-top]は、文字の上の余白/div><


◆4か所それぞれ、余白を指定することもできます。
　「padding:上 右 下 左;」
top right bottom leftの順に、指定します。

<div style="border:5px solid #FF6C37; padding:20px 10px 10px 30px;
0px;">top right bottom leftの順に、指定します。</div>


◆上下・左右で、余白を指定することもできます。
　「padding:上下 左右;」
top・bottom right・leftのように、
上下・左右の順に指定します。

<div style="border:5px solid #FF6C37; padding:10px 30px;
0px;">top・bottom right・leftのように、
上下・左右の順に指定します。</div>


◆枠の外側の余白も指定できます。
　「margin:サイズ;」
[margin]は、枠の外側の余白

<div style="border:5px solid #FF6C37; padding:10px; margin:20px;">[margin]は、枠の外側の余白</div>


◆枠の角を丸くすることもできます。
　「border-radius:サイズ;」
[border-radius]で、角丸に変身★

<div style="border:5px solid #FF6C37; padding:20px; border-radius:10px;">[border-radius]で、角丸に変身★</div>


◆1箇所ずつ指定することもできます。
　「border-radius:左上 右上 右下 左下;」
[border-radius]で、角丸に変身★

<div style="border:5px solid #FF6C37; padding:20px; border-radius:10px 20px 30px 40px;">[border-radius]で、角丸に変身★</div>


◆2箇所ずつ指定することもできます。
「border-radius:左上・右下 右上・左下;」
[border-radius]で、角丸に変身★

<div style="border:5px solid #FF6C37; padding:20px; border-radius:10px 30px;">[border-radius]で、角丸に変身★</div>


◆1か所だけ丸くすることもできます。
「border-上下-左右-radius:サイズ;」
[border-top-right-radius]で、右上だけ角丸に★

<div style="border:5px solid #FF6C37; padding:20px; border-top-right-radius:30px;">[border-top-right-radius]で、右上だけ角丸に★</div>


なんとなーく、＜div＞タグの使い方、
わかりましたか？

この＜div＞タグ、
まだまだ可能性を秘めていますので、
少しずつご紹介していきますね。

最後には、お気に入りの設定をCSSに入れて、
楽ちんに使えるようになります。

ぜひ、いろいろ試して、
お気に入りを作っておいてくださいね★

]]> https://ameblo.jp/get-friend-pc/entry-11639935745.html Wed, 16 Oct 2013 23:32:20 +0900 ブログの書き溜め方
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★



みなさん、どうやってブログを書いていますか？

内容ではなく、やり方のお話。



アメブロのエディタに直接書く。
というのが、一番スタンダードかと思います。

ですが、
わたしは、ブログを書くのに、
結構な時間がかかってしまうので、
そんな綱渡りのようなことはできません…

なにせ小心者でして…笑


今、書いているのは、
「Evernote」
というアプリ。

無料アカウントもありますので、
気軽に始められますし、
インストールしなくても、
インターネット経由で使うこともできます。

スマホでもPCでも書けるので、
とても便利に使っています。

パソコンの前に座った時だけでなく、
電車での移動中や、
電車待ち、
待ち合わせなど、
ちょっとしたスキマ時間に、
ささっと書ける手軽さは、
エディタにはない、魅力です♪

2記事でも、3記事でも
平行して書けますし、
長くなってしまった記事を
いくつかに分割するのも、
難しくありません。

リンクを貼る時やフォントを変更する時の
HTMLタグは、自分で書けるので、
そのまま書いています。


また、Evernoteには、
・ノートブック
・ノート
という概念があります。

しかも、実際の紙とは違って、
Aというノートブックから、
Bというノートブックへ、
ノートの移動ができるのです。

国語のノートブックに書いたページを、
算数のノートブックに移動できちゃうのです。

なので、
「ブログ投稿用」と
「ブログ投稿済」の
2つのノートブックを用意します。

あとは、
「ブログ投稿用」に書き溜めて、
投稿したら、
「ブログ投稿済」に移動する。

この繰り返しをしています。



ちなみに、標準エディタでは、
うまく貼り付けできないので、
タグ編集エディタを使用しています。

書き上げた後、表示を確認しながら、
どう書いたら、どう見えるかを
ご自分のパソコン環境ご確認していけば、
うまく使えると思います。


もちろん、
それぞれ、今までのやり方があると思います。

慣れている方がやりやすかったりしますが、
ちょっとでも、
不便だな～
と思っているならば、
ぜひ、お試しください★

]]> https://ameblo.jp/get-friend-pc/entry-11637803365.html Tue, 15 Oct 2013 09:13:02 +0900 ブログ記事の書き方①〜画像の貼り付け〜
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★

今回は、記事の書き方について。

画像を記事に貼り付けるとき、
「画像」ボタンをクリックすると、
もう怖くない！パソコンと仲良くなるTipsブログ-画像ボタン

・縮小して表示
・オリジナルで表示
を選択できます。
（「オリジナル」とは、「そのまま」という意味で捉えてください）
もう怖くない！パソコンと仲良くなるTipsブログ-画像の設定「サイズ」


新エディタをお使いの方は、
「小さいサイズで貼りつける」に
チェックがついていたら、縮小して表示、
チェックが外れていたら、オリジナルで表示。
もう怖くない！パソコンと仲良くなるTipsブログ-新エディタ「画像サイズ」

この2つは、画像サイズが異なるだけでなく、
使われている画像が異なります。
もう怖くない！パソコンと仲良くなるTipsブログ-2つの違い

どういうことかというと、
「アップロードしたデータ」と
「画質を落としたデータ」が
存在しているのです。

それと、幅と高さが指定されています。
もう怖くない！パソコンと仲良くなるTipsブログ-幅と高さ


そんなこととは知らず、
お恥ずかしい話、
私は、縮小された画像を
大きくして表示させていたのです…

なんで、写真ぼやけるんだろ？

としか思っていなかったのですが、
きちんと調べてみたら、
こういうことでした。

うーん、、、
わかりにくい。苦笑

このブログのヘッダー画像を貼り付けながら、
どんな設定をしたら、
どう表現されるのか。



　確認していきましょう！



必ず「HTMLタグ」が見える状態で、確認します。

「HTMLタグ」というのは、<a>とか<font>とか、
<○○>というカタチのものです。

単純に、画像を選択して、「画像を使う」ボタンを押すと、
こんな表示がされます。

<a href="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png"><img src="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/t02200090_0800032712713484820.png" alt="$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像" width="220" height="90" border="0" /></a>


難しく見えますが、中身はこれだけ。
<a href="画像のURL">
<img src="画像のURL" alt="画像のタイトル" width="幅のサイズ" height="高さのサイズ" border="あまり気にしなくてOK" />
</a>

<a> ：ここからリンクです
<img>：画像を貼りつけます
</a> ：ここまでリンクです

少し理解できましたか？



　では、実際に見てみましょう！




◆縮小して表示
$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像

&lta href="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png">&ltimg src="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/t02200090_0800032712713484820.png" alt="$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像" width="220" height="90" border="0" /></a>


◆オリジナルで表示
$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像

&lta href="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png">&ltimg src="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png" alt="$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像" border="0" /></a>


◆縮小して表示（width=400で指定）
$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像

&lta href="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png">&ltimg src="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/t02200090_0800032712713484820.png" alt="$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像" width="400" height="90" border="0" /></a>


おっと、高さの指定は外しましょう。
$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像

&lta href="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png">&ltimg src="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/t02200090_0800032712713484820.png" alt="$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像" width="400" border="0" /></a>


◆オリジナルで表示（width=400で指定）
$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像

&lta href="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png">&ltimg src="http://stat.ameba.jp/user_images/20131012/15/get-friend-pc/51/c2/p/o0800032712713484820.png" alt="$もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像" width="400" border="0" /></a>


違い、わかりましたか？

このブログは、3カラム設定なので、
幅は、420としています。

2カラム設定の方は、
600が良いようです。

表示を確認しながら、
ご自分の目で確かめてみてください☆
]]> https://ameblo.jp/get-friend-pc/entry-11634753368.html Sat, 12 Oct 2013 16:15:37 +0900 【感謝★】ブログをご紹介頂きました！
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★


先日、読者登録と共に、
こんなメッセージを頂きました。

・・・・・・・・・・

ずっとカスタマイズについて悩んでいましたが、
おおはた様のおかげで救われました。

とりあえずヘッダー画像ができたところですが、
今後も勉強させてください。

・・・・・・・・・・



「救われました」という言葉に、
とてもビックリしましたが、
ちょっと感極まってしまうくらい、
うれしい気持ちにさせて頂きました。

そして、ブログでもご紹介頂きました★
http://ameblo.jp/bressaoyama/entry-11632911921.html

まだまだ始めたばかりで、
至らない点は多々あると思いますが、
こうして、たった一人の人でも
「もう一度やってみよう！」と
思ってもらえたのであれば、
このブログは成功だと思います。

が、今後ともよろしくお願いします！

おおはたけいこ ]]> https://ameblo.jp/get-friend-pc/entry-11634721087.html Sat, 12 Oct 2013 15:18:29 +0900 パソコンとの会話は、カタコトの英語
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★


本日は、少し脱線して、
このブログのヘッダー画像について、
少しお話ししようと思います。


これは、2012年11月に
トルコに旅行したときの写真。

とってもステキな国でした！

ですが、ちょっとイヤなことや、
怖かったこと、残念だったこと、など、
マイナスな部分も比較的多い旅でした。

それもこれも全部ひっくるめて、
いい体験をしました。


パソコンのブログなのに、
なんで、トルコの写真？？？

と思った方、いらっしゃいますか？


トルコの公用語は、トルコ語。

トルコ語なんて、
メルハバ（こんにちは）くらいしか知りませんでしたし、
現地でも、使うことはほとんどありませんでした。

それでも、楽しめたんです。

そう、観光地だと、大抵の方が英語をかじっているので、
カタコトの英語で、なんとか会話ができたりしませんか？

パソコンも同じなのです。


パソコンの公用語は、機械語。

パソコン同士の会話は、
「0」と「1」の数字だけ。

でも、人とパソコンが会話するには、
機械語じゃ、無理。
かといって、
日本語も、無理。

じゃあ、どうする？
ってなったときに登場したのが、
プログラム言語。

機械語と英語の間をとったようなものが、
プログラム言語なんです。

プログラム言語というと、
難しく感じてしまうかもしれませんが、
HPやブログを書くときに使う、HTMLも
立派な言語のひとつ。

だから、やろうと思えば、
誰にでも習得できることなのです。


それでも、難しく感じるなら、、、

トルコ語で、「色」って言えますか？
言えないですよね？
（勉強した方は、ご存知かと思いますが＾＾；）

HTMLやCSSでの「色」は？
「color」や「background-color」などですよね？

こう考えると、
実は結構使えているんじゃない？
って思いませんか？


どんな言語だって、母国語でない限り、
覚えて、使って、間違って、直して、
ちょっとずつちょっとずつ、身につけていきますよね。

パソコンだからと、身構えず、
知らないんだから、できなくて当たり前！
と言い聞かせ、
少しずつコミュニケーションをとっていきましょう♪


いつかきっと、
想いが通じ合えるときがやってきます。


仲良くなれるよう、
いろいろお伝えしていきますので、

その日まで、どうか
パソコンを嫌いにならないでくださいね＾＾



完全カスタマイズの
グループレッスン・個人レッスンを行っています。

ご興味ある方は、メッセージにてご連絡ください★
]]> https://ameblo.jp/get-friend-pc/entry-11632601384.html Thu, 10 Oct 2013 09:19:38 +0900 ヘッダーメニュー追加③～CSS編集～
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★


　ヘッダーメニュー追加の手順


1. ヘッダー画像と記事の位置を調整
2. フリースペースを編集
3. コンテンツエリアのCSSを編集



　3. コンテンツエリアのCSSを編集します


デザインの変更から、
もう怖くない！パソコンと仲良くなるTipsブログ-02-00

$もう怖くない！パソコンと仲良くなるTipsブログ-02-01

CSSの編集
もう怖くない！パソコンと仲良くなるTipsブログ-03-02

この中のテキストエリアの中を編集していきます。
もう怖くない！パソコンと仲良くなるTipsブログ-03-03

今回は、コンテンツエリアの下に、記述します。
もう怖くない！パソコンと仲良くなるTipsブログ-コンテンツエリアCSS

すこし長くなりますが、
全て必要な記述になります。

えいやっと貼りつけてください！
もう怖くない！パソコンと仲良くなるTipsブログ-コンテンツエリアCSS編集後


↓をコピペします。
------------------------------

/* ヘッダーメニューエリア */
ul#headerMenu {
width: 980px;
height: 40px;
position: absolute;
left: 0;
top: 0;
background-color: #FFFFFF;
margin: 0;
}

/* ヘッダーメニューリンク */
ul#headerMenu li {
font-size: 115%;
font-weight: bold;
line-height: 40px;
float: left;
text-align: center;
background-color: #5858FA;
padding: 0;
}
ul#headerMenu li a {
width: 100%;
display: block;
height: 40px;
color: #FFF;
}

/* ヘッダーメニューリンク menu1 */
ul#headerMenu li.menu1 {
width: 196px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu2 */
ul#headerMenu li.menu2 {
width: 195px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu3 */
ul#headerMenu li.menu3 {
width: 195px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu4 */
ul#headerMenu li.menu4 {
width: 195px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu5 */
ul#headerMenu li.menu5 {
width: 195px;
}

/* ヘッダーメニュー マウスオーバー */
ul#headerMenu li a:hover {
background-color: #04B45F;
color: #F6CED8;
}

------------------------------


メニューを6コにしたい場合は、
コチラ↓を使用してください。
------------------------------

/* ヘッダーメニューリンク menu1 */
ul#headerMenu li.menu1 {
width: 163px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu2 */
ul#headerMenu li.menu2 {
width: 163px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu3 */
ul#headerMenu li.menu3 {
width: 162px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu4 */
ul#headerMenu li.menu4 {
width: 162px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu5 */
ul#headerMenu li.menu5 {
width: 162px;
margin-right: 1px;
}
/* ヘッダーメニューリンク menu6 */
ul#headerMenu li.menu6 {
width: 163px;
}

------------------------------

合計すると、980pxになるように、
均等に分割しています。


色の設定は、
背景色：[background-color]
文字色：[color]
に、お好みで色を設定してみてください！

◆色の設定方法がわからない方は、
コチラの記事へ。
（カラーについては、改めて書きますね。）

では、表示を確認して、「保存」をクリック。



　こんな感じになりました！


もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダーメニュー追加完成

だんだんと様になってきましたね！

何度も繰り返して、カラダで覚えましょう！

------------------------------
おおはたけいこがカスタマイズしたブログはコチラ↓
仕事全力女子に捧ぐ！ココロ動かす空間づくりと心の在り方ブログ★
]]> https://ameblo.jp/get-friend-pc/entry-11631691703.html Wed, 09 Oct 2013 09:07:57 +0900 ヘッダーメニュー追加②～フリースペース編集～
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★


　ヘッダーメニュー追加の手順


1. ヘッダー画像と記事の位置を調整
2. フリースペースを編集
3. コンテンツエリアのCSSを編集



　2. フリースペースを編集します


ヘッダーメニューのメニュー名とリンク先は、
「フリースペース」という部分に設定します。

なので、まずは、
「サイドバー」の「配置設定」をクリック。
もう怖くない！パソコンと仲良くなるTipsブログ-サイドバー＞配置設定


「フリースペース」が追加されていることを確認します。
もう怖くない！パソコンと仲良くなるTipsブログ-フリースペース配置確認

「使用しない機能」になっている場合は、
どの場所でも構いませんので、
「使用する機能」に移動し、保存します。


次に、「フリースペース編集」をクリック。
もう怖くない！パソコンと仲良くなるTipsブログ-サイドバー＞フリースペース編集


こちらを編集していきます。
もう怖くない！パソコンと仲良くなるTipsブログ-フリースペース編集


↓を記述します。
------------------------------

<ul id="headerMenu">
<li class="menu1"><a href="リンク先のURL">メニュー名1</a></li>
<li class="menu2"><a href="リンク先のURL">メニュー名2</a></li>
<li class="menu3"><a href="リンク先のURL">メニュー名3</a></li>
<li class="menu4"><a href="リンク先のURL">メニュー名4</a></li>
<li class="menu5"><a href="リンク先のURL">メニュー名5</a></li>
</ul>

------------------------------

それぞれ、
「リンク先のURL」には、URL（http://...）を、
「メニュー名1～5」には、メニュー名（プロフィール等）を
記述します。
もう怖くない！パソコンと仲良くなるTipsブログ-フリースペース編集後

今回は、5個のメニューとしていますが、
6個にしたい場合は、
もう一行追加すればOKです★

全ての記入が完了したら、改行を削除します。
------------------------------

<ul id="headerMenu"><li class="menu1"><a href="リンク先のURL">メニュー名1</a></li><li class="menu2"><a href="リンク先のURL">メニュー名2</a></li><li class="menu3"><a href="リンク先のURL">メニュー名3</a></li><li class="menu4"><a href="リンク先のURL">メニュー名4</a></li><li class="menu5"><a href="リンク先のURL">メニュー名5</a></li></ul>

------------------------------

それから、保存してください。



　こんなときは？どうすればいいの？


リンクさせる予定はあるけど、
まだ記事を書いていないよ、、、
という方は、
内容に「準備中」と書いた記事を投稿し、
リンク先だけ作っておきます。

記事の準備ができた時点で、
記事を編集し、投稿すれば、問題ありません。

もちろん、早めに記事を投稿したほうが、いいですよ＾＾


次回、いよいよメニューが表示されます！
------------------------------
おおはたけいこがカスタマイズしたブログはコチラ↓
仕事全力女子に捧ぐ！ココロ動かす空間づくりと心の在り方ブログ★

]]> https://ameblo.jp/get-friend-pc/entry-11630934003.html Tue, 08 Oct 2013 08:58:13 +0900 ヘッダーメニュー追加①～ヘッダー画像と記事の位置調整～
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★


　ヘッダーメニュー追加の手順


1. ヘッダー画像と記事の位置を調整
2. フリースペースを編集
3. コンテンツエリアのCSSを編集



　1. ヘッダー画像と記事の位置を調整します


わかりやすくするために、ヘッダー画像を変更しました！
もう怖くない！パソコンと仲良くなるTipsブログ-画像と記事の位置調整前


この枠の部分。
ヘッダー画像と記事の間に空白がなく、
ピッタリしています。
もう怖くない！パソコンと仲良くなるTipsブログ-画像と記事の位置調整前2

気になりますよね。。。

なので、少しスペースを空けましょう。
ついでに、ここにヘッダーメニューを追加していきます。


「デザインの変更」から、
もう怖くない！パソコンと仲良くなるTipsブログ-02-00

もう怖くない！パソコンと仲良くなるTipsブログ-02-01


「CSSの編集」をクリック。
もう怖くない！パソコンと仲良くなるTipsブログ-03-02


こちらのテキストエリアの中を編集していきます。
もう怖くない！パソコンと仲良くなるTipsブログ-03-03


「コンテンツエリア」を編集していきます。
もう怖くない！パソコンと仲良くなるTipsブログ-コンテンツエリアのCSS

↓を追記します。
------------------------------

position: relative;
padding-top: 55px;

------------------------------

追記しました。
もう怖くない！パソコンと仲良くなるTipsブログ-コンテンツエリアのCSS編集後

表示を確認して、保存します！
もう怖くない！パソコンと仲良くなるTipsブログ-03-06

もう怖くない！パソコンと仲良くなるTipsブログ-03-08


自分のブログを見てみましょう。
もう怖くない！パソコンと仲良くなるTipsブログ-03-09



　すると、こうなります★


もう怖くない！パソコンと仲良くなるTipsブログ-画像と記事の位置調整後


ヘッダー画像と記事の間にスペースができました。


今回は、ヘッダー画像と記事の位置を調整したのですが、
ヘッダー画像の下に、メニューを追加することを前提として、
大きめにスペースをとっています。

メニューを必要とされない方は、
「padding-top」を、すこし小さい数字を設定してください。

------------------------------

padding-top: 10px;

------------------------------

いろいろ試してみて、
ご自分の理想のバランスを見つけてくださいね！


------------------------------
おおはたけいこがカスタマイズしたブログはコチラ↓
仕事全力女子に捧ぐ！ココロ動かす空間づくりと心の在り方ブログ★

]]> https://ameblo.jp/get-friend-pc/entry-11630128081.html Mon, 07 Oct 2013 10:52:34 +0900 ヘッダー編集②～CSSを編集して、ヘッダーに画像を入れてみよう！～
アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。

パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！

そんな方のため、できる限りわかりやすく
お伝えしていきます★

今回は、ヘッダーを編集してみましょう！

手順としては、
1. ヘッダー画像の大きさの画像 or 写真を用意する。
2. 画像をアップロードする。
3. ヘッダー画像を設定する。
4. ブログタイトル・ブログ説明を隠す。
5. ヘッダー画像からブログトップへリンクする。
です。

1のヘッダー画像用意は、コチラの記事でお伝えしました。

今回は、2～5をお伝えしていきます。


　2. 画像をアップロードします


「デザインの変更」をクリックし、
$もう怖くない！パソコンと仲良くなるTipsブログ-02-00

もう怖くない！パソコンと仲良くなるTipsブログ-02-01


「CSSの編集」をクリックします。
$もう怖くない！パソコンと仲良くなるTipsブログ-03-02


まず、用意したヘッダー画像をアップロードします。
「参照」ボタンをクリック。
$もう怖くない！パソコンと仲良くなるTipsブログ-画像参照


ファイルを指定したら、「アップロード」ボタンをクリック。
$もう怖くない！パソコンと仲良くなるTipsブログ-画像アップロード



　3. ヘッダー画像を設定します


このテキストエリアの中を編集していきます。
$もう怖くない！パソコンと仲良くなるTipsブログ-03-03


ブログヘッダーの部分を変更していきます。
$もう怖くない！パソコンと仲良くなるTipsブログ-ブログヘッダーCSS

↓のように変更します。
------------------------------

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea {
background:url(画像のアドレスをペーストします) center top no-repeat;
height: 300px!important;/*高さ*/
margin-bottom: 0px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

------------------------------

すると、こうなります。
$もう怖くない！パソコンと仲良くなるTipsブログ-ブログヘッダーCSS編集


次に、画像のアドレスをコピーします。
クリックすると、全選択されるので、[ctrl]キー+Cを押すだけでOK。
もう怖くない！パソコンと仲良くなるTipsブログ-画像リンク


「画像のアドレスをペーストします」の文字を範囲選択し、
[ctrl]キー+Vで、ペーストします。

こんな感じになれば、OK★
もう怖くない！パソコンと仲良くなるTipsブログ-ブログヘッダーCSS編集後


確認すると、画像がヘッダーに設定されました。
もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像


でも、せっかくの画像が、
ブログタイトルと説明に邪魔されてしまっています。

ただし、これは、検索するときなど
文字情報として、必要なものなので、
削除することはNGです。

なので、文字を見えない位置に移動しちゃいます。



　4. ブログタイトル・ブログ説明を隠します


次に編集するのは、
「ブログタイトルのエリア」と「ブログの説明エリア」
$もう怖くない！パソコンと仲良くなるTipsブログ-ブログタイトルエリア

↓のように変更します。
------------------------------

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

------------------------------

こうなっていれば、OKです。
もう怖くない！パソコンと仲良くなるTipsブログ-ブログタイトルエリア編集



　5.ヘッダー画像からブログトップへの
　　リンクを設定します


もともと、ブログタイトルをクリックすると、
ブログのトップページに移動できるように、
設定されているのですが、
画像を貼りつけてしまいましたので、
トップページに移動できる方法がなくなってしまいました。

なので、↓を先ほどの「ブログの説明エリア」の下に、
コピペします。
------------------------------

/* クリックするとブログのトップに移動 */
.skinTitleArea a.skinTitle {
width: 980px;
height: 300px;
display: block;
}

------------------------------

こんな感じ。
もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダーからトップへ


それでは、表示を確認し、保存しましょう。
$もう怖くない！パソコンと仲良くなるTipsブログ-03-08


できましたか？
もう怖くない！パソコンと仲良くなるTipsブログ-ヘッダー画像設定完了


ヘッダーの表示と、
ヘッダー画像からブログトップに移動することを
確認して完了です★



------------------------------
おおはたけいこがカスタマイズしたブログはコチラ↓
仕事全力女子に捧ぐ！ココロ動かす空間づくりと心の在り方ブログ★
]]> https://ameblo.jp/get-friend-pc/entry-11629286123.html Sun, 06 Oct 2013 12:18:31 +0900