BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ 好みのフォントに変える方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ 好みのフォントに変える方法

   投稿日: 2014/07/03    投稿者:webコラム

font.jpg

みなさん、こんにちは。

                                             

本日のアメブロカスタマイズは、『フォント変更』です。

ブログのイメチェンをするとき、ヘッダー画像や背景の変更は一番に思い浮かぶと思います。

                                

フォントの変更というと"地味"な気がするかもしれませんが、

フォントは、読んでいる人に与える印象を変えます。

                            

同じ文章や言葉でも、フォントのスタイルで柔らかい印象を与えたり、

スタイリッシュな感じになったり、女の子らしい感じになったりと・・・。

                                              

                                         

自分のブログで紹介している内容とマッチしたフォントを選ぶと、

記事が2割増しで良く見えるかも??しれません(笑)

                                         

是非チャレンジしてみて下さい!

            

            

            

ブログデザインを「css編集用デザイン」にしましょう。

                      

まずは、ブログデザインを「css編集用デザイン」にしましょう。   

  

image003.png

                                        

                                            

                                           

「デザインの変更」をクリック。   

↓         

                     

image005.png

                                               

                                                        

                      

ページ下の「カスタム可能」ボタンをクリック。                   

↓                   

       

image007.png

                                    

                                           

            

            

css編集用デザイン」をクリック。

                       

image009.png

                                 

                                       

ページ上部でレイアウトの設定ができるので、好みのレイアウトを選択し[適用する]ボタンをクリックします。

 

image011.png                                   

                                                  

 

『「css編集用デザイン」を適用しました』と表示されたら、cssを編集するための設定は完了です!!

        

image013.png

                                      

                                             

次は、ブログ全体のフォントを変更する方法です。

                                                   

                                            

マイページ右上の「アメーバのサービス一覧」をクリック。

                     

image003.png

              

デザインの変更」をクリック。

image006.jpg

                                                       

 

cssの編集」をクリック。

cssの編集画面が表示されます。ここから、ブログ全体のフォントを変更するためのcssの編集に入ります。

image015.png                    

 

下の赤枠の内容をコピーします。これがブログ全体のフォントを変更するcssです。               

↓            

 image017.png

 

デフォルトではこの様になっています。

font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

                       

こちらを"HG丸ゴシックM-PRO",にしたい場合、

                          

font-family:"HG丸ゴシックM-PRO", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

                      

同じように"HG行書体"にしたい場合は、

                             

font-family:"HG行書体", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

 

※複数のフォントが並んでいるのは、それぞれのパソコンで表示できるフォントが違うため。

そのパソコンが表示できる最初に表示されているフォントが使われます。         

自分が変えたいフォントを一番前に書きましょう♪

                                          

                                                        

コピーしてcssの一番下の部分に貼り付けます。

                                     

 

貼り付けが終わったら、「保存」ボタンをクリックして追加したcssを保存します。

                  

image019.png

                                   

                                              

 

保存できたらブログを表示し、プラウザの更新ボタンをクリックします。

               

(古いデータが残っていると変更したcssが反映されませんので、

プラウザの更新ボタンをクリックして最新の状態に更新します。)

         

         

まとめ

         

これでブログ全体のフォントを変更することができます!

フォントの種類は沢山あるので、自分好みのものを選んで変えてください!

                

<フォント参考サイト>

http://fontview.info

カテゴリ:

TOPへ