header01_08_20130213231803.png


スポンサーサイト
  1. --/--/--(--) --:--:--|
  2. スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

Read moreボタン設置方法
  1. 2013/05/04(土) 00:09:30|
  2. ブログ制作
ブログ制作日記(?)第3回です*゚Д゚*

実は意外な事に、当ブログで一番拍手が多いのはこの制作カテゴリだったり。
森ブログなんですけどねー・・w(嬉しいです!めっちゃ嬉しいです!!)
需要があった事に驚きを隠せません。


今回は、丁度さっき設置した「続きを読む」のボタンについてです。

更に、今回当ブログに設置した「続きを読む」ボタンはマウスを乗せると
画像が変わる仕様にしてみたので、それも併せてご紹介します*´ェ`*



追記の時に表示される「続きを読む」という字をボタンにしたい。
という事でまずは、変更方法を。


画像を用意します。(今回は作りました)
readmore.png

こういうのにしてみました。
それを、ブログにアップロードします。



今回触るのはhtmlです。

<!--more_link-->
<a href="<%topentry_link>#more"><%template_extend></a>
<!--/more_link-->


こういう部分を探します。


Point(?)
<!-- -->
△この部分をコメントアウトと言いますが、中に書いた事は反映されないので
メモに使うと便利だと思います*゚∀゚*
<!--追記ボタン--> 
△こういう風に日本語でメモっても大丈夫ですので、
「いじった後にわからなくなりそう!」
なんて時はここはどの部分で~みたいに整理しておくと、編集の時に便利です。

私は編集する時に自信がなかったりすると、<!-- -->でコードごと囲っておいて
すぐに復旧出来るようにしてから書き加えたりする事もあります。






さて、話がかなり脱線しましたが、上のhtmlがリンクの基本記述です。
<a href="URL">文字</a>
だと、「文字」の部分をクリックで飛ぶテキストリンク。
<a href="URL"><img src="画像URL"></a>
だと画像をクリックして飛ぶ画像リンクになります。


ですので今回は

<!--more_link-->
<a href="<%topentry_link>#more"><%template_extend></a>
<!--/more_link-->

赤字で書いた部分を画像URLに変えます。
(人によっては、テキストで「続きを読む」と記述されているかも知れません。
 個々で違うと思いますので、ご自分の編集画面で確認して下さいませー)


<!--more_link-->
<a href="<%topentry_link>#more"><img src="画像URL"></a>
<!--/more_link-->

という具合に書きかえると、ボタンが反映されるかと思います。
プレビューなどで確認して、Okなら保存です。




さて、次はマウスオーバーで画像が変わるタイプのボタンの設置です。
追記に書きますので、Read more...ボタンからどーぞー!




スポンサーサイト
web拍手 by FC2

ブログの背景変更方法
  1. 2013/04/21(日) 14:00:07|
  2. ブログ制作
ブログ制作第2回!*゚∀゚*ちょーハイペース(笑)
やった事を忘れないために記録していく感じで更新します。

とりあえず簡単なところから始めてみようと思います・w・*


今回は、テンプレいじり。


まず最初にやった事は、背景変更。
素材は当ブログのリンクにもある フリー素材*ヒバナ* 様から頂きました。



背景にしたい画像の準備が出来たら、まずはブログにアップロードします。
次は、ブログの編集画面からテンプレート編集画面にいきます。

ここではhtmlとCSSの編集が出来ます。

htmlは構造
CSSは装飾


というような感じで覚えておくと、「ここを変えたいけど、どこを見ればいいの!?」
という問題が解決しやすくなります。きっと。



さて、続きは追記に記述します。
興味がある方は下にある 続きを読む からどうぞー。


web拍手 by FC2

Twitterプラグイン
  1. 2013/04/21(日) 12:49:02|
  2. ブログ制作
ブログの編集記事を書きたくて書きたくてしょうがないので、
思い切って書くことにしました*゚Д゚*!!

いや、ただの紹介記事ですけど・・´□`;


今回はTwitterプラグインについて。

APIがなんちゃらかんちゃら(全然わかってない)で、
気に入ったプラグインのページが404NotFoundばかり。
だけど公式デザインはちょっと違う・・


今回探していたのはこんな感じのプラグイン。

最新Tweet1件表示。
前のTweetも見れる。
背景、アイコンが編集可能。
出来れば透過画像使いたい。



ないわー・・と思ってましたが、あったよね!!


fc2の共有プラグインで見つけました*゚∀゚*
ツイートを指定した件数ずつ表示するプラグイン「Twitter...A」

設定については製作者様がPeroday(別窓でリンクが開きます)
にて懇切丁寧に記して下さってますので割愛します。



現在設置しているこの形。
twitter.gif

変更した箇所は大体こんな感じ。

ユーザー名(太字にしてみました)
画像(アイコンと書いてありますが、四角じゃない画像でも適用されます)
画像位置(align、marginで指定)
時間表記(agoに指定)
右上のボタン色(#999999に変更)
Tweetの表示件数(デフォルトだと3件ずつ)



htmlと、テンプレートのCSSをちょこちょこ書き換えるだけです。
コピペ出来ればなんとかなります(笑)


少し物足りなかったので、下部にフォローボタンも設置しました。

Twitterフォローボタン(別窓でリンクが開きます)

フォローボタンは、ボタンを選んで、ID入力。
ボタンをクリックして、生成されたコードを貼りつけるだけの簡単仕様。

プラグインのhtmlの最下部に貼り付けました*´ェ`*



編集項目も沢山あって、きっと思い通りになるはず!
今のTwitterプラグインはちょっとなぁ・・なんて方はぜひお試しあれ>w<*

web拍手 by FC2

    

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。