スポンサーサイト

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

タグとか画像表示とかいろいろ。

2012/10/12 Fri 11:39
なんとなく@玉兎です。こんにちは。

今日は今回ブログを色々カスタマイズしてみて
よく使うものや覚えておくと便利だな~というもの、
こんなの使ったよーっていうものなど、ちょこっと載せていこうと思います。

といってもたいしたものはありません。

忘れないように私的メモも兼ねてなので、余計なことが書いてあったり
説明不足だったりするかもしれませんが大目に見ていただければ幸いです。


というわけで、箇条書きにつらつら書いていきたいと思います。


▼ソースを「そのまま表示する為のHTMLソース」に変換するのにお世話になりました。
【Blogtool】 http://blogtool.flatlabs.net/source.html 

 
 
 
 
 
▼ブログに画像を表示させる
<img src="http://~/〇〇〇.jpg(画像のURL)" alt="" border="0">



▼Lingtbox 連続画像表示の仕方
【Lingtbox v2.51】 http://lokeshdhakar.com/projects/lightbox2/
設置やカスタマイズの仕方は検索すれば丁寧に説明しているサイトが色々出ると思います。

当ブログで使用しているものはv2.03.3です。
探せばDLできるファイルもあると思いますが、公式以外でのDLは自己責任で。
設置方法は2.51と多少違います。

<a href="http://~/〇〇〇-1.jpg(元の画像)" rel="lightbox[▲▲▲]" title="">
<img src="http://~/〇〇〇-1.jpg(サムネイル)" alt="" border="0"></a>

<a href="http://~/〇〇〇-2.jpg" rel="lightbox[▲▲▲]" title="">
<img src="http://~/〇〇〇-2.jpg" alt="" border="0"></a>

<a href="http://~/〇〇〇-3.jpg" rel="lightbox[▲▲▲]" title="">
<img src="http://~/〇〇〇-3.jpg" alt="" border="0"></a>

画像はファイル名の最後に-番号を順番につける。
rel="lightbox[半角英数字]で連続表示のグループ分けをする。
同じグループ名同士のみ連続で表示される。



▼FC2ブログでアップロードしても元の画像が上書き反映されない場合

どんな画像パスに限らずURLに-originを付け足す。

http://blog-imgs-49.fc2.com/g/l/o/globule/〇〇〇.jpg という画像の場合。
<img src="http://blog-imgs-49-origin.fc2.com/g/l/o/globule/〇〇〇.jpg" alt="" border="0">



▼FC2ブログの広告設定

ブログ管理画面→環境設定の変更→ブログの設定
検索バーの設定/画像高速表示の設定を利用しない、表示しないに変更。



▼リンク先を別窓で出す

<a href="http://サイトのURL" target="_blank">サイトの名前</a>



▼ブログの追記部分を読むときに同一ページに表示させる(折りたたみ式)

【FC2ブログのテンプレート工房】 http://10plate.blog44.fc2.com/
テンプレをカスタマイズする場合は、複製してから変更して正常に表示されるか確認したほうが安全です。

テンプレの設定からHTML編集で以下を<head>~</head>内に追加する。

<script type="text/javascript">
<!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
//-->
</script>



次に下記の部分を探して・・・

<!--more_link--><a href="<%topentry_link>#more">続きを読む</a><!--/more_link-->
<!--more-->
<hr class="tuduki" noshade size="1">
<%topentry_more><!--/more-->


次のように変更する。

<!--more_link-->
<div id="varP<%topentry_no>">
<div class="readmore"><a href="<%topentry_link>" title="続きを読む" onclick="showMore(<%topentry_no>,'<%topentry_link>');return false;">続きを読む &raquo;</a></div>
</div>
<div id="varXYZ<%topentry_no>" style="display: none">
<div class="readclose">
<a href="#entry<%topentry_no>aa" title="続きを閉じる" onclick="showMore(<%topentry_no>,0);return true;">続きを閉じる &raquo;</a></div>
<%topentry_more>
</div>
<!--/more_link-->
<!--more-->
<%topentry_more><!--/more-->


最後にスタイルシート編集で以下を追加。

/* 続きを読む・閉じる */
.readmore {
margin-top: 10px;
}
.readclose {
margin-top: 10px;
margin-bottom: 10px;
}



▼ファビコン(URLやタブ前に表示されるアイコン)自動作成

【Favicon Japan/16×16のみ】 http://www.favicon.jp/
【IEにも表示可能なファビコン設置方法】 http://socialmagazine.blog.fc2.com/blog-entry-45.html


テンプレの設定からHTML編集で以下を<head>~</head>内に追加する。

<link rel="shortcut icon" href="ファビコンまでのパス/favicon.ico">

※変更してもすぐには反映されない場合があるので注意。





とりあえずこんくらい・・・かな?
また何かあったら付け足します。

タグは大丈夫だと思うけれど、間違ってる部分があったらごめんなさい。


ではでは。


-6 Comments
By ハルノブ 2012/10/12 Fri 23:59 #Sc4HeGPo - URL [ edit ]

こんにちわ^^

玉さんのブログ向上委員会ですな(*´ω`*)

By るなきち 2012/10/13 Sat 06:11 #- - URLedit ]

ニャー!すごいねすごいね!
玉ちゃんの記事見て折りたたみのいじってみたんだけど折りたたみにならないの。。。
BGMを流してるので折りたためたら曲が途切れなくていいなぁって思ったんだけど難しい><。
あとファビコン?ってなんだろうって思ったらタブのアイコンのことなんだね!
これもお馬さんから変えたいとは思ってたからとても参考になりましたありがとう!
もうちょっと頑張ってみよう。。。

By 玉兎 2012/10/13 Sat 11:28 #1xwwOG5Y - URLedit ]

>ハルノブさん
こんにちはー^^ブログ向上委員会!!w
ちょっとは何かのお役に立てるといいなぁ(*´ω`*)

どうでもいいですが、
今日私はハルノブさんがお猿のお人形を抱えて自転車こいでる夢をみましたですよ(・∀・)


>るなきちさん
ニャー!調べればすぐに出てくることなのですが、どこかにメモっておきたくて徒然書いてみました!
折りたたみは私もちょっと苦労したよー> <
NCは折りたたみで出てきてたから、続き読むときに別ページに移動すると気になっちゃうよね。
色々試してみてこの方法で出来たので載せてみたんだけど、
他にもやり方あるみたいだから調べてみるといいかも!ちょっと違うだけでもちゃんと表示されなかったりするから、なかなかシビアだよね(´・ω・`)がんば!!

ファビコンは私もお馬さんをどうにかしたくて変えましたっ
上のリンクは16×16で作れるんだけど、私の場合表示されなかったので下のリンクのとこから32×32で作ったらちゃんと表示することができたよ~!参考までに(*´ω`*)

By るなきち 2012/10/13 Sat 15:13 #- - URLedit ]

ニャー!折りたたみはプレビューだと反映されなかったみたいですw
チキンだから怖くて更新はせずプレビューで確認してたんだけど、思い切って更新押したらちゃんと出来てました!ありがとう!!!ヽ(〃´∀`〃)ノ

私はファビコン画像フリーのをいただいてきました♪
早速変えてみたよー(・∀・)
お馬さん赤いからいやーのいやーのw
色々ありがとうでした( ˘ ³˘)♥ ゚+。:.゚

By ハルノブ 2012/10/14 Sun 17:01 #Sc4HeGPo - URL [ edit ]

どんな夢で御座りまするかwww

By 玉兎 2012/10/14 Sun 23:28 #1xwwOG5Y - URLedit ]

>るなきちさん
にゃー!ちゃんと閉じれたみたいでよかったよかった^^
更新するのっておかしくなったらどうしようって何気に勇気いるよね!w
私も心配で複製しまくって何が一番新しいテンプレなんだか分からなくなったりするときあるよーw

ファビコンも変えたんだね!おめおめ^^
まだ表示みれてないので、どんな風なのか楽しみです(*´ω`*)
お馬さんの赤は目立つから、ブログの雰囲気に合わなかったりするんだよね。
こちらこそお役に立ててよかったです!(-ω-*)


>ハルノブさん

私にも謎です!w 夢は不思議がいっぱいだよーw

Leave a comment
管理者にだけ表示を許可する
Top
PROFILE

玉兎 - tamausagi -

Author:玉兎 - tamausagi -

ジケル鯖魔族でキュアしてます。
AIONは現在休止中。
気まぐれお絵描きブログになりつつあります。

CALENDAR
03  << 2017/04 >>   05
Sun Mon Tue Wed Thu Fri Sat
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
CATEGORIES
NEW ENTRIES
RECENT COMMENTS
LINKS
USER BLOG LINKS
ARCHIVES
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。