この記事の所要時間: 328

こんにちは、ゆーすけです(^^

 

 

material_99_10_sいつも応援ありがとうございます。

 

 

さて、今日はゆーすけのブログの

右側のアイコンについてです。

image

 

 

もともとコメント周りをしていて、

元営業マンゆうぽんの未来を切り開くブログ

で、うまいことサイドバーのところに

アイコン配置してていいなぁ・・・って思ったんです。

 

 

いいと思ったらすぐパクる導入する!

 

 

それがゆーすけのいいところ!?

 

 

 

で、ゆうぽんさんに問い合わせをしたところ

ご丁寧にこういう風にしてご覧って教えていただけたんですね。

元々は未来派野郎hiroさんという方のページを参考にしました。

 

お二人に感謝です!!

 

STEP1 まずは100×100のアイコンを作ろう

えっと、人のページの2番煎じっていうのもどうかと

思いますが、まぁ・・・お付き合いください(笑)

 

 

まずはですね100×100のアイコンを作ってみましょう。

画像ソフトでキャンバスを100×100で作ります。

 

 

ペイント使って作ってみますか?

 

image

 

キャンパスの右はじの四角いポッチをドラッグして

内側に縮めていきます。その時に下のところにどのくらいの

大きさかが表示されるのでここを100×100に合わせます。

 

image

 

 

これで100×100pxのキャンバスができたので

ここにメールアイコンやなんやらを描いて保存しましょう。

 

 

STEP2 できた画像をWordPressに投稿します。

image

 

コントロールパネルのメニューより

メディア-新規追加をクリックして、

右の点線内にSTEP1で作成したアイコンを

ドロップしてあげます。

 

 

STEP3 テンプレートのaccess.phpをいじる

STEP2まで完了したら、テンプレートのaccess.phpを

いじります。アンリミ標準のテンプレートの話です。

賢威や他のやつは知りません(笑)調べてね。

 

 

トップページのみ表示したければ、index.phpにすればOK

ということです。個別ページのみだったら、single.phpですね。

 

 

《コピペして赤の部分をあなたのデータに置き換える》

 

↓ ↓ (コピペして変える) ↓ ↓

<div style="position: fixed;  top:250px; right: 2px;  z-index: 1;">
<a href="人気ブログランキングのあなたのURL" target="_blank"><img src="あなたのWordpressに投稿したアイコンのURL" width="100" height="100" alt="人気ブログランキング画像" /></a>
</div>

 

<div style="position: fixed;  top:370px; right: 2px;  z-index: 1;">
<a href="メールのアドレス/メールフォームのアドレス" target="_blank"><img src="あなたのWordpressに投稿したアイコンのURL" width="100" height="100" alt="メール画像" /></a>
</div>

 

<div style="position: fixed;  top:490px; right: 10px;  z-index: 1;">
【置き手紙のscript】

</div>

↑ ↑ (コピペして変える) ↑ ↑

 

<div>ってなに?

簡単に言うと、目に見えない四角い箱だと思ってください。

<div></div>っていう囲い込みをしているんですね。

 

style=” “ってなに?

<div>という見えない箱がどんな物かを” ”内に定義してます。

 

position:fixed;ってなに?

<div>という見えない箱の位置(position)を固定する(fixed)

という意味です。

 

top:250px;って何?

<div>という見えない箱をブログの上から250pxの位置に

表示させるという意味です。

 

right: 2px;って何?

<div>という見えない箱の右側表示して、2pxの余白を取ります

という意味です。leftにすれば左サイドバーに表示できます。

 

z-index:1;って何?

<div>という見えない箱をあなたのブログの上に表示する

という意味です。z-index:数字の数字が大きくなるとその

分上に表示されます。0はあなたのブログそのものです。

つまりz-index:1はブログよりも上に表示するという意味です。

 

 

image

 

メールアイコンの始めは

250px(最上位から)

+100px(ランキングアイコン)

+20px(余白)

 

=370px

 

置き手紙アイコンの始めは

250px(最上位から)

+100px(ランキングアイコン)

+20px(余白)

+100px(メールアイコン)

+20px(余白)

 

=490px

 

ってことです。

 

置き手紙だけはアイコンが小さいのでright: 10pxにすると

ちょうどよい表示ができると思います。

 

 

以上です。

ちょっと難しいけどわかるかな?

 

 


material_99_10_s役にたったら押してください。

 

 

 

ご相談や質問あればゆーすけまでメールをお気軽に♪

image

こんなことを質問したら恥ずかしいなぁ。

バカにされないかなぁ・・・

 

悩んでないでゆーすけに相談してくださいよ♪

 

メールサポートはかなり細かくやってます。気楽にね。