キウイパン工房~やんごとなきブログ

読者です 読者をやめる 読者になる 読者になる

きういぱん工房

やんごとなきブログ

【スポンサーリンク】

ブログをカスタマイズ・・・したのか?

やっぱりデザインを変えたい!!

 

こんにちは。リア充ブロガーのパンです。

 

今日は年末で大忙し。

つまり会社で1人お留守番でした。

私零細企業勤めですが一応SEを名乗ってます。

正式にはなんなのかわかりません。

 

私の仕事は以下の通り

 

1・新規or顧客へ営業

2・システムの提案

3・システム設計

4・システム開発

5・システムテスト

6・システム納品

7・システムメンテナンス

(1に戻る)

 

これを1人1人でやらなきゃいけない

なんとも変な会社でして。

 

今日は皆さん外に出てかれました。

とういことで・・・

 

ブログカスタマイズじゃーーーー

 

 

ふむふむ。

なにからやろう。

 

人と同じなのが嫌いな私

でもそんなに技術がない。

 

簡単に変えれるものはないかなぁ。

 

 

 

 

むむむ

 

読者ボタンの変更だと・・・

まじかよ。。。。

世の中には奇妙なことする人がいるもんだ。

 

えむしてっくさんとそめごろうさん

の記事がひっかかり見入りました。

CSSだけでこんなことができるのか。

 

あいにく零細企業の弱小SEもどきの私は

プログラミング歴1年半

できるのはSQLと.VBJava少々

CSSなんて聞いたことある程度。。

 

mshitech.hatenablog.com

somegoro.hatenablog.com

 

せんえつながら参考にさせていただきました。

でもパクりたくはない!!!

 

こうゆうボタンもいいけどやっぱりオリジナル性が欲しい

(えむしてっくさんのはここで再現できなかった・・・)

 

そこで考えた!!

画像を使おう!!

 

でました!

デザインセンスが壊滅的に欠落しているパンさん

できたのがこちら

 

 

可愛いでしょ?

記事にすると

onclickオプションが使えないんだけど

サイドバーに配置したのは以下のHTML文

 

<a href="http://blog.hatena.ne.jp/kiwipan/kiwipan.hatenablog.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/kiwipan/kiwipan.hatenablog.com/subscribe', '', 'width=500,height=400'); return false;">
<img src="http://kiwipan.net/wp-content/uploads/2016/12/heart-ber.png" >
</a>

 

 リンク先は

http://blog.hatena.ne.jp/はてなID)/(自分のサイトURL)/subscribe

ここが読者になるURLみたいです。(読者URL)

<a 

は始まりの記号

 

href="読者URL"

の""の中に読者になるURLを入れる

 

読者になる時わざわざページが移動しちゃうと嫌だから

別タブを開かせるのが次の処理

onclick=""window.open('読者URL', '', 'width=500,height=400'); return false;">

’’の中も読者になるURLをいれて

新しく開くタブのサイズを調整します

widthで横幅

heightで高さ

を調整します

 

<img src="画像URL">

ここで使う画像を設定

今回はこれを作りました。

私はxserverを借りているので

そこに画像をアップして使いました。

 

 </a>

でしめて完成!!

 

どうです?しょぼいでしょ?(笑)

 

 

今日はこんなことするのに半日使いました。

ほんとはjavascriptを使って逃げ回るボタンを作りたかった

 

 

もっと本格的にカスタマイズしたいので

proに移行するか迷うところです。

 

 ほんとに簡単なことですが

プログラムを組むのは楽しいと思いました。

 

以上。別れ!!

【スポンサーリンク】