WELCOME

やさしいカメラ知識・女性向け画像加工レッスン。
おしゃれな作品作りを楽しむパソコン&デジカメ教室パソカフェのブログ。

おすすめ記事は以下カテゴリーからどうぞ。。

デジカメレッスン
単発1dayデジカメ講座
雑貨撮影レッスン
スマホで可愛い写真
デジカメ年賀状

パソコンレッスン
フォトスケープの使い方
ホームページ作成講座
アメブロカスタマイズ
フォトショップ講座

デジカメのコツ
花・雑貨を撮るコツ
簡単デジカメの設定
楽々デジカメのコツ
写真の構図・基本

 

INFORMATION

受講生を募集いたします

   


単発1dayデジカメ講座

1回3時間8000円
キレイな雑貨フォトが
撮れるようになります

 
 


ホームページ作成

1回2時間6000円
ホームページの更新が
自分でできるように

 


パソコン個人レッスン

1回2時間6000円
貴女のやりたいこと何でも
リクエストしてください

 
所在地
兵庫県川西市湯山台
梅田より60分
宝塚より40分
ご予約・お問い合わせ
レッスン予約カレンダーはこちらから。
お申込み・お問合せはこちらから。
すべてマンツーマンの個人レッスンです。

 

個人レッスン:アメブロカスタマイズ_慈雨の椅子

こんにちは。
パソコン&デジカメ教室「パソカフェ」主宰、花のポストカードやさんです。

きょうは個人レッスンでアメブロカスタマイズを行いましたので
その内容をご紹介したいと思います。

飾り罫線

アメブロカスタマイズ_慈雨の椅子

カスタマイズ後、このようになりました!

飾り罫線

受講生はKさま。
カラーカウンセリング・カードセッション・アートセラピールーム「慈雨の椅子」
兵庫明石でひらいておられます。

独学でアメブロカスタマイズをしていたけれど
レイアウトが総崩れになってしまったり、思うようなデザインにできなかったり。

業者に委託するのではなく、自分の好みに合わせて自分で更新したい。
CSS編集の方法を習える教室を探しておられたそうです。
パソカフェを見つけていただいて、ありがとうございます。(^^)v

飾り罫線

アメブロカスタマイズ_慈雨の椅子

こちらが最初の「カスタマイズ前」の状態です。
独学で、タイトル画像も変更し、メニューボタンもつけておられます。
がんばりやさんでパソコンの知識もかなりある方とお見受けしました。

「模様替えのイメージを考えてきてください」とお願いしていたのですが
きちんとワードで設計図を作ってきて下さったのには驚き。

Kさまのリクエストはこちらです。
・左カラムに、タイトル画像を縮小した色違いのメニューバナーを載せたい
・タイトル画像下のメニューボタンを増やしたい
・タイトル画像を気に入っているので、それを活かしつつ、もっと素敵なトップページにしたい

アメブロカスタマイズ_慈雨の椅子

私がトップページを見せていただいたところ、次のような問題点を感じました。
・3カラムデザインなので、せま苦しく感じる。
・左サイドバーの広告が気になる。
・右サイドバーは不要では?
・記事内の画像が小さすぎてよく見えない。
・タイトル画像が美しいのに、それが活かされていない。

アメブロカスタマイズ_慈雨の椅子

まずは3カラムデザインから2カラムデザインにレイアウト変更します。

アメブロカスタマイズ_慈雨の椅子

アメブロカスタマイズ_慈雨の椅子

「2カラム・メニュー左」を選んで、「適用する」ボタンをクリック

アメブロカスタマイズ_慈雨の椅子

「CSSの編集をする」ボタンをクリック

アメブロカスタマイズ_慈雨の椅子

レイアウト変更すると、デザインが初期設定に戻ってしまいました。
せっかくカスタマイズしてきたのが消えてしまってびっくりしますが、大丈夫。
すぐに元に戻りますよ。

左メニューの2カラムデザインに変更されたことで、
コンテンツ(内容)を表示する場所の横幅が2倍に増えました。
これで記事が読みやすく、画像も大きく表示できるようになりました。

なお、初期設定に戻すと基本設定で入力している
「タイトル」「説明」がタイトル画像の場所に表示されます。

これらの情報はSEO対策として制限文字数いっぱいに入力するべきなのですが
このようにテキストで表示されるとうるさくて見づらい。
美しいページにするためには、CSSで非表示にすることをおすすめします。

アメブロカスタマイズ_慈雨の椅子

アメブロカスタマイズ_慈雨の椅子

2カラムに変更したあと、CSSでタイトル画像を再適用。
同時にCSSで「背景画像」を「背景色(無地)」に変更。

壁紙のような背景画像を使うと、テクスチャがごちゃごちゃ目立って
美しいタイトル画像の邪魔になると考えました。

Kさまが選びに選んだ背景色がこちら。
真っ白でなく、ほんのり淡いグレーなのがセンス抜群。

ボタンの色は、タイトル画像のなかの1色をスポイトツールで取得して使います。
(Photoshop Elementsやフリーソフトで可能)

アメブロカスタマイズ_慈雨の椅子

ここまでできました。
かなり素敵になってきましたよ。

飾り罫線

次は、トップのメッセージボード。

アメブロカスタマイズ_慈雨の椅子

アメブロカスタマイズ_慈雨の椅子

Kさまのお選びになった「椅子」の素材をつかい
画像でボードを作成します。
書体は読みやすく悪目立ちしないメイリオ。

トップ画像のほかに色は極力使わない方がいいとアドバイス。
文字や枠にカラフルな色を使っていたのをすべてやめ
濃いめのグレー1色に統一です。

飾り罫線

次は、左カラムのメニューバナー

アメブロカスタマイズ_慈雨の椅子

「設定・管理」→「プラグインの追加」

アメブロカスタマイズ_慈雨の椅子

「フリープラグイン」欄に、左カラムのメニュー内容を入力→「保存」ボタンをクリック

アメブロカスタマイズ_慈雨の椅子

新たにプラグインの追加をした方→サイドバーに配置して下さい。設定はこちら
の「こちら」をクリック

アメブロカスタマイズ_慈雨の椅子

アメブロカスタマイズ_慈雨の椅子

アメブロカスタマイズ_慈雨の椅子

フリープラグインを「使用する機能」の一番上に、ドラッグ&ドロップ→「保存」ボタンをクリック

アメブロカスタマイズ_慈雨の椅子

これでKさまの設計どおり。
左にメニューバナーが並びました。

飾り罫線

さて、あともうすこしです。

アメブロカスタマイズ_慈雨の椅子

メッセージボードに入れる画像。
せっかくの美しい画像なので、カラムの横幅いっぱいの大きさに変更。

アメブロカスタマイズ_慈雨の椅子

飾り罫線

アメブロカスタマイズ_慈雨の椅子

ここまでくると、文字が気になってきます。
テキストの改行幅が小さくて少し読みづらい。
でも1行とばしに書くと、行間が空きすぎて見づらい。

CSSでフォントの設定を変更すればどうでしょうか。

アメブロカスタマイズ_慈雨の椅子

フォントの設定をメイリオに変更しました。

文字がつるんとキレイに。改行幅も広くなりゆったり。
見やすくなったでしょう?

古いOSやMacのことも考えて、メイリオ以外にいくつかのフォントも指定しています。

アメブロカスタマイズ_慈雨の椅子

あと一息。
メニューボタンのフォントも同じメイリオに揃えましょう。

アメブロカスタマイズ_慈雨の椅子

できあがりです。

飾り罫線

Kさまには、このあとCSSをすべてプリントアウトし
どうやったら今後自分でカスタマイズできるかを書き込んでいただきました。
おつかれさまでした~!

これだけのカスタマイズにかかった時間は、合計4時間。
楽しくやりがいのあるレッスンでした。
Kさま、どうもありがとうございました。

次回はこちらのサイトのSEO対策について少しお話しいたします。

飾り罫線

Kさまがパソカフェレッスンについて記事を書いてくださいました。

トップページをバージョンアップ!|
カラーカウンセリング・カードセッション・アートセラピールーム「慈雨の椅子」

慈雨の椅子、トップページはこちらです。

カラーカウンセリング・カードセッション・アートセラピールーム「慈雨の椅子」
兵庫明石で癒しとリフレッシュタイムをどうぞ

飾り罫線

パソコン&デジカメ教室「パソカフェ」
兵庫県川西市の自宅サロンで開講しています。
最寄り駅は、阪急宝塚線「川西能勢口」またはJR宝塚線「川西池田」。

教室へのアクセスはこちら

飾り罫線

パソコン個人レッスン

貴女のやりたいこと、何でもリクエストできます(2時間6000円)

アメブロカスタマイズ
(タイトル画像・メッセージボード・リンクボタン・背景画像)
ホームページ作成
(PCとスマートフォンのどちらでも見やすく美しいレスポンシブタイプ)

ブログ用おしゃれ画像加工
ショップ&お教室の素敵なチラシ・パンフレット作成
美しいオリジナル名刺作成
かわいいラベルシール作成
雑貨屋さん風の写真ポストカード作成
おしゃれでカワイイ年賀状・暑中見舞い作成
フォトショップ・Photoshop Elements使いこなしテク
写真やファイルをすっきり整理&管理するテク

過去のブログカスタマイズ 記事はこちら(パソコン個人レッスン)

過去のフォトショップ 受講生作品はこちら (パソコン個人レッスン)

過去のフォトムービー 受講生作品はこちら(パソコン個人レッスン)

過去のフライヤー・チラシ 受講生作品はこちら (パソコン個人レッスン)

飾り罫線

初心者さんのための 単発1dayデジカメ講座

3時間の個人レッスンで、かわいい雑貨写真が
どなたにでも撮れるようになります。(3時間8000円)


デジタル一眼レフ、ミラーレス一眼、コンパクトデジカメ、スマートフォンのカメラアプリ。
ご自身のカメラをお持ち込み下さい。

過去の受講生の作品はこちら (単発1dayデジカメ講座)

飾り罫線

スマートフォン(android) 個人レッスン

スマートフォンの楽しみ方(電話とメールだけじゃもったいない!)
(LINE・LINEデコ・動画・音楽・写真加工・ファイル管理・スケジュール管理
Gメール・Googleカレンダー・駅すぱあと・アマゾン・Dropboxなど
便利で楽しいアプリとその使い方を徹底紹介!)

飾り罫線

パソカフェ予約カレンダーはこちら

レッスン料金・よくあるご質問についてはこちら

レッスンに関するお問い合わせ・お申込みはこちら

飾り罫線



にほんブログ村 PC家電ブログ パソコン教室・サポートへ   にほんブログ村 写真ブログ 写真講座・教室へ  

趣味ぶろ パソコン教室ブログランキング   趣味ぶろ コンピューター教室ブログランキング

ランキングに参加しました。ぽちっと応援お願いいたします♪

飾り罫線

花のポストカードやさんの関連サイト
「パソコン&デジカメ教室パソカフェ」~川西・大阪・宝塚~
やさしいカメラ知識・おしゃれ画像加工。女性講師による個人レッスン。

ポストカード&フレーム印刷用無料素材*花のポストカードやさん本館*はがきデザインのフリー素材集
女性向きおしゃれポストカード&デザインテンプレート 結婚・出産・引越報告 フレーム素材各種

初心者女子のための パソコン&デジカメ教室~大阪・宝塚・川西~(本サイト)

関連記事

テーマ : デザイン・イラスト・テンプレート
ジャンル : コンピュータ

プロフィール

パソコン教室パソカフェ「花のポストカードやさん」

Author:パソコン教室パソカフェ「花のポストカードやさん」


兵庫県川西市の自宅で
デジカメ&パソコン教室「パソカフェ」
を開いています。
教室で人気のPhotoScapeの使い方を本ブログで公開中。
フレーム加工や組み写真など、素敵なブログ用画像が無料で簡単に作成できますよ。

アクセスランキング
[ジャンルランキング]
ライフ
405位
アクセスランキングを見る>>

[サブジャンルランキング]
習い事
8位
アクセスランキングを見る>>
カテゴリー
FC2カウンター
facebook
ランキングバナー
Twitter
Twitterボタン
Twitterブログパーツ
ブログ全記事表示

全ての記事を表示する

カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
リンク

お気に入りに追加
RSSフィード
管理画面
QRコード
QR