Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

アメブロカスタマイズレッスン後記

f:id:wp-lesson:20160107232335j:plain

今夜最後のレッスンはWordPressでもC言語でもなく
アメーバブログのカスタマイズを扱いました。

アメブロをサイト風にするには?

まず、グローバルメニューを追加することですね。

アメブロにはグローバルメニューがありませんが、
HTMLを自由に記述できる「フリースペース」という
エリアがあり、サイドバーに配置することができます。

グローバルメニューのHTMLタグをフリースペースに
記述し、スタイルシートCSS)を使って無理やり
ヘッダー画像の真下へ移動させると、あたかも最初から
その場所にグローバルメニューが付いているかのような
表示にすることができます。

具体的なテクニックは?

グローバルメニューを囲むラッパーとなる<div>を用意し、
この<div>に対して position: absolute; を指定します。

position: absolute; を指定したブロックは、その外側を
囲むブロックのうち、最初に position: relative; が指定
されたブロックの左上隅を x, y 座標の原点として、
top と left で絶対座標を指定した場所に表示されます。

文章で書くとイメージが掴み辛いのですが、
初めてアメブロをカスタマイズする生徒さんに、
スカイプの画面共有と、操作のデモンストレーションで
しっかりと理解していただけました。

アメブロのカスタマイズを身につけたい方へ

オンラインレッスン受付中です。
下記のご案内をクリックしてお気軽にご相談ください。

完全マンツーマンのオンラインレッスンのご案内

f:id:wp-lesson:20151225232446j:plain
f:id:wp-lesson:20151222145958j:plain

≫ ページ内の「先生に聞いてみる」ボタンでお気軽にご相談ください。

2015年、パソコンジャンル評価1位

f:id:wp-lesson:20160107113633j:plain
f:id:wp-lesson:20151222145958j:plain

≫ ページ内の「先生に聞いてみる」ボタンでお気軽にご相談ください。

平日の夜は予約が埋まりやすいのでお早めにご相談ください。
Facebookでもプログラミング&コーディングの本質を投稿しています。
Facebook(友達限定のプライベート投稿で本質的な情報発信中)