アメブロの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);
}

 

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

自己紹介

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です