Blogger:導入したいスクリプト・デザイン進捗メモ ~ 漫博堂    

12/07/2013

Blogger:導入したいスクリプト・デザイン進捗メモ




Bloggerでテンプレートのカスタマイズ、楽しいです。
時間はべらぼうにかかりますが…。
他の方のサイトをみて、「これカッコイイ!自分でもやりたい!」というデザインやスクリプトを紹介します。

目次

思いついたら更新していきます。

今後やりたいデザイン・スクリプト


・カーソルを合わせるとがブルブル動く
・カーソルを合わせるとフキダシが現れる→ここのフキダシをいつか!
・クリックしたら波紋が出る→気持よくてずっと押したくなる波紋
・ウィンドウのサイズによってコンテンツが移動する レスポンシブデザイン このサイトみたいな
・GoogleAnalyticsクリックカウントの実装
・GoogleAnalyticsの「トラッキングがインストールされていません」問題解決
・タイトルのソーシャルボタンの色を変更
・バナー画像をじんわり出す
・新しいページを読み込むときに何か動きをつける
・更新した日付を表示する

実装済み

文字・単語に自動リンク


ASCII.jp:3日目:単語に自動的にリンクを追加しよう (1/2)
【短期集中連載】この冬作ろう!jQueryプラグイン講座
http://ascii.jp/elem/000/000/200/200581/
jQueryで自作に挑戦して挫折したところでこちらのサイトを発見。サクっと導入できた。


画像を自動で横並び

CSSで要素を横並びにする方法まとめ
HALAWATA.NET http://www.halawata.net/2011/10/css-float-display-box/

ソーシャルボタン設置

Bloggerで忍者ツールズの忍者おまとめボタンを設置&センタリングにしてみた
ふりむけばコウホウ http://www.furimuke.com/2013/04/blogger_19.html

ふりむけばコウホウさんは、他にもBloggerカスタマイズの参考になる記事があって色々と参考にさせていただいています。

ウェブフォント・アイコンフォント導入


基本的なアイコンフォントを使いたければこちらのブログの説明が1番おすすめ。

allWebクリエイター塾 受講生ブログ: Fontelloのアイコンフォントを使ってみよう
http://all-web-school.blogspot.jp/2013/08/fontello.html

ソーシャルアイコンを使いたい場合はWeb Symbols Liga Fontがよさそう。
導入は↓
ソーシャルアイコン(Facebook、Twitter、Google+、はてな…etc)をwebフォントで表示させてみる
Rapid Progress http://rapid-progress.net/social-icon-webfont/

Webフォント’websymbols’を使ってみる
wStyle http://www.wstyleweb.net/2012/11/websymbols/


見出し<h3>に装飾、ラインを入れる

CSSの擬似要素を使った見出しデザイン
Webpark http://weboook.blog22.fc2.com/blog-entry-348.html



見出し<h3><h4>から目次を自動作成


見出しタグからページ内目次を自動生成
WordPressカスタマイズ http://seous.info/wp-customize/2041

css、class名などを少し弄りました。

リスト<li>の●の色を変更する


【html】 リストのマークだけ色を変える方法
キノめもhttp://kinomemo.info/create/926/

擬似要素を使って実装してみました。

ページ内スムーズスクロール

【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript
KLUTCHEhttp://klutche.org/archives/536/

スムーズスクロールのスクリプト4~5つ試して、こちらのスクリプトだと上手くいきました!

何度もお世話になったサイト

参考にさせていただきました。ありがとうございます。

Bloggerのテンプレートをいじる Aragger
http://aragger.blogspot.jp/2012/04/blogger.html

Bloggerのテンプレートの仕組みの基礎の基礎を紹介されています。一度「<a expr:href='data:blog.homepageUrl'> のexpr:が何か」がいくら調べても出てこず諦めていたら、こちらに紹介がありました。XHML記述なのでタグ属性の前につけないとダメなものなんだとか。


スポンサードリンク
       

 
 

0 コメント :

コメントを投稿

 

Copyright @ 2013 漫博堂 .