アメブロのCSS編集をやってみました!

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

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

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


アメブロ画面1

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

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

  • 2カラム・メニュー左
  • 2カラム・メニュー右
  • 3カラム・右ワイドメニュー
  • 3カラム・左ワイドメニュー
  • 3カラム・右メニュー

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

CSS編集画面

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

アメブロ画面2

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

アメブロ画面3

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

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

/* ブログタイトル削除 */
.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=”アメブロ画面4” width=”766″ height=”911″ />
「設定・管理」をクリック。「サイドバーの設定」の中の「設定・変更」をクリックし、
「フリースペース」の[ 編集 ]をクリックし以下の内容を記述します。

<div id=”headerMenu”><!–
–><ul class=”menu”><!–
–><li><a href=”http://**リンク先URL1**” target=”_blank”>**メニュー1**</a></li><!–
–><li><a href=”http://**リンク先URL2**” target=”_blank”>**メニュー2**</a></li><!–
–><li><a href=”http://**リンク先URL3**” target=”_blank”>**メニュー3**</a></li><!–
–><li><a href=”http://**リンク先URL4**” target=”_blank”>**メニュー4**</a></li><!–
–><li><a href=”http://**リンク先URL5**” target=”_blank”>**メニュー5**</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);
}

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

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

インディーズでミュージシャンをやっていたのですがいつのまにか...

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

昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 Excel VBA 」を活用した効率化ツールの開発、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、テロップ入れや映像の切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク