「ホームページだけでなく、
アメブロのデザインもイメージカラーとかホームページと一緒にしたい！」
という依頼があり、アメブロのCSS編集をやってみました。
全く操作したことが無かったのですが、
CSSの知識がちょっとあれば、結構簡単に出来ます！！

CSS編集用テンプレートを選択

「デザイン変更」をクリックし、下のほうにある「カスタム可能」をクリック。
その中の「CSS編集用デザイン」を選択します。

ブログレイアウトを決める

まず始めにブログレイアウトの基本を決めます。

２カラム・メニュー左
２カラム・メニュー右
３カラム・右ワイドメニュー
３カラム・左ワイドメニュー
３カラム・右メニュー

この５つから選択します。
この辺りは好みによりますが、
今回はお客様のご要望で「３カラム・右ワイドメニュー」を選択しました。

CSS編集画面

「デザイン変更」をクリックし、[ CSSの編集 ]をクリック。

こちらの赤枠の中を編集していきます。

ブログタイトル・説明文・ヘッダーの設定

参考までに今回行った編集内容の一部です。

/* ブログタイトル削除 */
.skinTitleArea { display:none; }
/* ブログ説明文削除 */
.skinDescriptionArea { display:none; }
/*ブログヘッダーに背景画像を設定*/
.skinHeaderArea
{
  height:200px;
  background-image:url(http://**使いたい画像のURL**.jpg);
  background-repeat:no-repeat;
  background-position:center top;
}

グローバルメニューの追加

CSS編集の前にフリースペースにヘッダーメニューの内容を設定します。
ameba_20150904-4.jpg” alt=”アメブロ画面４” width=”766″ height=”911″ />
「設定・管理」をクリック。「サイドバーの設定」の中の「設定・変更」をクリックし、
「フリースペース」の[ 編集 ]をクリックし以下の内容を記述します。

<div id=”headerMenu”><!–
–><ul class=”menu”><!–
–><li><a href=”http://**リンク先URL１**” target=”_blank”>**メニュー１**</a></li><!–
–><li><a href=”http://**リンク先URL２**” target=”_blank”>**メニュー２**</a></li><!–
–><li><a href=”http://**リンク先URL３**” target=”_blank”>**メニュー３**</a></li><!–
–><li><a href=”http://**リンク先URL４**” target=”_blank”>**メニュー４**</a></li><!–
–><li><a href=”http://**リンク先URL５**” target=”_blank”>**メニュー５**</a></li><!–
–></ul><!–
–></div>

続いてCSS

/*グローバルメニューの追加*/
#wrap,.skinContentsArea { position:relative; }
#headerMenu {
  position:absolute;
  margin:0;
  padding:0;
}
#headerMenu ul.menu
{
  margin:0;
  padding:0;
  list-style: none;
}
#headerMenu ul.menu li { display:inline; }
#headerMenu ul.menu li a
{
  display:block;
  float:left;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
}
#wrap,.skinContentsArea { padding-top:45px; }
#headerMenu
{
  top:0px;
  left:0px;
  width:980px;
}
#headerMenu ul.menu li a
{
  width:243px;
  line-height:40px;
  font-size:14px;
}
#headerMenu ul.menu li a
{
  color:#000000;
  font-weight:normal;
  text-decoration:none;
  background: white;
  border: dotted 1px #962828;
  }
#headerMenu ul.menu li a:hover
{
  color:white;
  font-weight:normal;
  text-decoration:none;
  background: linear-gradient(#962828, white);
}

失敗すると表示がおかしくなったりするので
「編集前の状態に戻す」や「表示を確認する」機能はありますが、
編集する前にテキストエディタ等にピペしてバックアップして置いた方が良いです。
アメブロに限らずですが、この作業で何度か救われています…(-｡-;

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

宮崎県都城市出身。東京都葛飾区在住。現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ