MENU
  • 無料レッスンLesson
  • プロフィールprofile
  • サービスService
    • パソコン苦手でも大丈夫!
      ホームページ作成個人レッスン
    • 起業女性に寄りそうWEBお悩み相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPress・HP・ブログレッスン
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    1. ホーム
    2. アメブロカスタマイズ
    3. 自分でできる。アメブロのおしゃれなカスタマイズまとめ

    自分でできる。アメブロのおしゃれなカスタマイズまとめ

    2022 12/19
    アメブロカスタマイズ
    2022-11-04 2022-12-19

    アメブロを、おしゃれにカスタマイズしたい!

    この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。

    テンプレートそのままではなく、おしゃれでテンションのあがるブログにカスタマイズしちゃいましょう。

    パーツごとに紹介していますので、簡単にブログをアレンジできます♪

    各記事には、手順をYoutubeの動画でものせています。

    ぜひ自分好みにカスタマイズしてみてくださいね。

    目次

    アメブロのカスタマイズのやり方

    パソコン版とスマホ版のデザインの違い

    スマホ版のデザイン変更

    現在、大きくデザインを変更できるのはPC版のみ。

    スマホ版はグローバルメニューやサイドバーの表示がありません。
    スマホでは、全体のデザインと記事一覧のレイアウトのみ変更できるようになっています。

    あわせて読みたい
    【アメブロ】スマホデザインの変更方法 アメブロのデザインを自分好みにカスタマイズしたい方にむけて、今回は、スマホデザインを変更する方法を解説しています。 【パソコンとスマホのデザインは別々に設定】…

    アメブロをカスタマイズするための初期設定

    まず、カスタマイズ用のテンプレートに変更しましょう。

    アメブロにはさまざまなデザインが用意されていますが、自分でカスタマイズする場合には「CSS編集用デザイン」を使いましょう。

    ↓動画でやり方解説しています。

    ブログ管理 > デザインの設定

    下の方にある「カスタム可能」を選びましょう

    アメブロデザインカスタマイズ:CSS編集用デザインを選ぶ

    「CSS編集用デザイン」を選びます。

    アメブロデザインカスタマイズ:CSS編集用デザインを選ぶ

    同じ名前のテンプレートがいくつかありますが、それぞれ記事一覧のレイアウトが異なります。

    • スタンダード(記事がそのまま表示される)
    • リスト(タイトルと写真が縦に並ぶ)
    • カード型(写真が大きく表示される)

    お好みのレイアウトを選びましょう。

    クリックすると、ページ全体のレイアウトを選ぶことができます。

    アメブロデザインカスタマイズ:CSS編集用デザインを選ぶ

    2カラム(記事ページとサイドバーが並ぶレイアウト)が、記事が大きく表示できるのでおすすめです。

    ブログデザインを選んで、「適用する」をクリックします。

    CSSのカスタマイズ方法

    CSS編集用デザインを選ぶと「デザインの設定」から「CSSの編集」を選択することができます。

    アメブロCSSの編集
    CSSとは?

    CSSはCascading Style Sheets(カスケーディング・スタイル・シート)と呼ばれる、Webページを装飾するための言語。

    文字のサイズや色、パーツの並び方、大きさなど、さまざまな見た目の設定ができます。

    入力欄にCSSを記述していくことでデザインを変更できます。

    この後、それぞれのパーツごとに、設定方法を解説していきます。

    パーツ別カスタマイズ方法

    さまざまなデザインパターンを用意しているので、自分好みにアレンジしてみてください。

    ヘッダー

    ヘッダー画像はページを開いてまず1番に目に入る画像のことです。

    ヘッダーサンプル
    ヘッダーサンプル
    ヘッダーサンプル
    ヘッダーサンプル

    まずはヘッダー画像を作ってみましょう。

    あわせて読みたい
    大人かわいいブログヘッダーの作り方 ヘッダーは、ブログやSNSを表示させた時にまず一番上に表示される大きな画像のこと。 そのアカウントの目印にもなる部分です。 プロに頼むほどではないけれど、自分でも…

    ヘッダー画像が用意できたら、アメブロに設置します。

    アメブロにヘッダーを設定する
    before
    アメブロにヘッダーを設定する
    after

    ↓ヘッダー画像の設定方法

    あわせて読みたい
    【動画で解説】アメブロヘッダー画像をカスタマイズ この記事では、オリジナルのヘッダー画像をアメブロに設定していく方法を解説しています。 before after 簡単に設定できますので、ぜひやってみてくださいね。 動画でも…

    フォント

    お好みのフォントで文章を読みやすくしましょう!

    before
    after
    あわせて読みたい
    コピペするだけアメブロのフォントを可愛くする方法 この記事ではフォントを変更する方法をご紹介します。 before after フォント(文字の字体)が変わると、ブログの雰囲気もがらっとかわります。 特にWindowsだと、ギザ…

    グローバルナビゲーション

    グローバルナビゲーションとはヘッダー画像の上か下に表示される、メニューバーのこと。(グローバルメニューとも呼ばれたりします。)

    メニュー(グローバルナビゲーション)


    各ページへのリンクがまとまっていて、お客さまを目的のページに案内してくれます。

    あわせて読みたい
    【アメブロ】好きな色でメニューバーを設定しよう この記事ではアメブロにメニューバー(グローバルナビゲーション)を設定する方法を解説します。 メニューバーがあると、読者に見てほしいページを案内することができま…

    背景/文字色/リンク色の変更

    あわせて読みたい
    【アメブロ】背景色・画像を変えてみよう! 今回は、アメブロに背景の画像や色を設定する方法をご紹介します。 背景に色が入ると、ヘッダー画像と合わせてブログ全体のデザインに統一感を出すことができます。 こ…

    サイドバー

    before
    サイドバーのタイトルを変更
    after
    あわせて読みたい
    【アメブロ】サイドバーの色を変更してみよう! 今回は、アメブロのサイドバーの色や背景色を変える方法をご紹介します。 これまでのアメブロカスタマイズで設定したヘッダー画像やメニューバーと合わせて競っていただ…
    あわせて読みたい
    【アメブロ】サイドバーにバナーやお知らせを設定しよう! 今回は、アメブロのサイドバーのカスタマイズ方法についてご紹介をします。 サイドバーを使うことで、ぱっと見でどんなブログかわかりやすくしたり、記事を読んだあと次…

    メッセージボード

    準備中です。

    囲み枠

    コピペするだけで、記事の中に囲み枠をいれられます!

    あわせて読みたい
    【CSS】シンプルで女性らしい囲み枠デザイン48選 囲み枠は文章を枠でかこんだデザインのこと。 囲み枠は文章を枠でかこんだデザインのこと。 文章の中で囲み枠を設定すると、記事内で文章を目立たせたり、メリハリをつ…

    以上、パーツごとのアメブロのカスタマイズ方法をご紹介しました!

    お気に入りのデザインを試してみてくださいね^^

    「もっとカスタマイズしたい・プロにお願いしたい」場合は?

    「ブログを自分好みのデザインにしたい!」
    「自分でも、ブログを使いこなせるようになりたい」
    そんな方は、お一人お一人のご希望に合わせてお答えできる 個人相談 をご利用ください。

    無料ブログサービスは、アメブロ、はてなブログ、ライブドアブログに対応できます^^

    ご自身の世界観をもっと表現したい方はWordPressがおすすめ。
    ホームページを始める個人レッスンもあります♪

    アメブロカスタマイズ
    アメブロ
    よかったらシェアしてね!
    中谷恵美
    あなたのお仕事を育てるホームページの先生
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    HP作成のほかにも、心理カウンセラーとしても活動中。

    趣味は、文房具集め、ゲーム(牧場系とモンハン)、手芸(刺繍、洋裁)。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にジムに通い始めたが、果たして続くのか。。。
    詳しいプロフィールを見る

    メルマガバナー

    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・サロン・カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

     

    新着記事
    • 個人事業主のお仕事ブログには、独自ドメインを使おう!
      2023-01-27
      Web・SNS集客
    • WordPressテーマの選び方〜おすすめ有料・無料テーマ〜
      2023-01-13
      はじめてのWordPress
    • 【アメブロ】記事に定型文をいれる方法
      2022-12-30
      アメブロカスタマイズ
    • 【アメブロ】メッセージボードをおしゃれにカスタマイズ!
      2022-12-23
      アメブロカスタマイズ
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      アメブロカスタマイズ
    人気記事
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      Web系プログラミング
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      WordPressプログラミング
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      Web系プログラミング
    • CSSとJavaScriptで作るハンバーガーメニュー
      2020-07-25
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    目次