アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -357ページ目

ページトップリンク+もんたメソッド+マーカー

ThickBoxに関係ない部分で公開します

チェックリストのとなりに | ▲TOPへ のようなリンクを自動でつけます

あと、もんたメゾットも自動でセットします

& マーカーもカンタンに記事中にセットできます


こちらはCSSにさわることができないスキンを利用されている方用です

※CSS部分もフリープラグインに入れてしまいます

デモサイトです @woman の erikonailコラボスキン です

※もちろんCSSにさわれるスキンを利用している方でもOKです

  ただ文字数に制限があるので

  CSSをここに使ったらもったいないかなってだけです


フリープラグインへ青字部分をコピペしてください

このままコピペで動くはずです

動作を確認してから下の注意にしたがって自分用に変更ください



<style type="text/css">

<!-- 

.foot a {
text-decoration: none;
}
.monta {
background-color: #00ff00;
color: #00ff00;
}

.entry .contents u{
padding: 2px 0;
background-color: #ffff33;

text-decoration: none;
}

-->
</style>

<script type="text/javascript">

<!--

var exTop = "| ▲TOPへ";

var btt = "80";
/* ↑設定ここまで↑ */
/* http://ameblo.jp/exlink/ */

function ablink(){
var checkL = "checkList",myLink,myFlg=0,i,j;
var backTop = function(){backToTop(); return false;}
var myLinks = document.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
var myLink = myLinks[i];
if(myLink.href.indexOf("monta") > 0){
var mon_Ta = document.createElement('span')
mon_Ta.className = "monta";
mon_Ta.innerHTML = myLink.innerHTML;
mon_Ta.onclick = function(){ this.className = "" };
myLink.parentNode.replaceChild(mon_Ta, myLink);
i=i-1;}
else if (myLink.className == checkL){
myFlg = 1;
linkIcon = exTop;
}
if(myFlg == 1){
myNW = document.createElement("a");
myNW.innerHTML = linkIcon;
myNW.href = "#header";
myNW.onclick = backTop;
myLink.parentNode.insertBefore(myNW,myLink.nextSibling);
myFlg = 0;
i++;
}
}
}
window.onload = function(){ablink();}
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", btt);
}
}
// -->

</script>



動作を確認後に変更してください

設定するところ↓赤字部分以外はさわらないでください



.monta {
background-color: #00ff00;
color: #00ff00;
}
隠す色です

どちらも同じ色にしておかないと隠れません



.entry .contents u{
padding: 2px 0;
background-color: #ffff33;
}


マーカーの色です



var exTop = "| ▲TOPへ";

"| ページトップへ戻る"

"| ページのトップへ"
"| TOPへ ↑"
"| PageTop↑" ・・・・などなど



var btt = "80";
トップへ戻る時間を調整できます

80~100くらいがいいかと


.foot a {
text-decoration: none;
}
記事URL | コメント | | ペタを残す | チェックリスト に下線が付いている場合は削除してください

ページトップへだけが下線なしになってしまいます


使い方


ページトップへのリンクはさわる必要ありません

自動で付きます


記事を書いているときに(タグの非表示)

もんたメソットで隠したいところは

隠したいところを反転させてURLをクリック

リンクにmontaと入力

http://はあってもなくても リンク先の表示方法もどちらでもかまいません


記事を書いているときに(タグの非表示)

マーカーを付けたいところを反転させて「下線」ボタンをクリック

下線が付きますがプレビューしてみるとマーカーがついているんです・・・・

Firefox、Netscapeで記事を書いている方は各ボタンで付くタグがちがっていますのでこの方法は使えない場合があります


※「使えた」「使えなかった」だけでかまいませんのでコメントを残してください

※すでにフリープラグインを使用中でonloadを使っている場合は細工が必要になります

※フリープラグインは3800字の制限があります

※ご自分の責任で使用ください


※アメブロがこみあっている時は表示されるまで時間がかかる場合があります


CSSがさわれないスキン使用デモサイトです @woman の erikonailコラボスキン です




PageTopリンク+もんたメソッド+マーカー

ThickBoxに関係ない部分で公開します


って、ThickBoxじつはエラーが1ヶ所出るんです・・・

アメブロにすでに入っているものを勝手に使っているんで

変数がうまく渡せないんです・・・

といっても、画像フォルダーの画像を削除する機能の部分でここでは使わないとこなんです

エラーがとれてもとれなくても年明けには公開します


このscriptで出来ること・・・・

チェックリストのとなりに | ▲TOPへ のようなリンクを自動でつけます

あと、もんたメゾットも自動でセットします

& マーカーもカンタンに記事中にセットできます



フリープラグインへ青字部分をコピペしてください

このままコピペで動くはずです

動作を確認してから下の注意にしたがって自分用に変更ください



<script type="text/javascript">

<!--

var exTop = "| ▲TOPへ";

var btt = "80";
/* ↑設定ここまで↑ */
/* http://ameblo.jp/exlink/ */

function ablink(){
var checkL = "checkList",myLink,myFlg=0,i,j;
var backTop = function(){backToTop(); return false;}
var myLinks = document.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
var myLink = myLinks[i];
if(myLink.href.indexOf("monta") > 0){
var mon_Ta = document.createElement('span')
mon_Ta.className = "monta0";
mon_Ta.innerHTML = myLink.innerHTML;
mon_Ta.onclick = function(){ this.className = "monta1" };
myLink.parentNode.replaceChild(mon_Ta, myLink);
i=i-1;}
else if (myLink.className == checkL){
myFlg = 1;
linkIcon = exTop;
}
if(myFlg == 1){
myNW = document.createElement("a");
myNW.innerHTML = linkIcon;
myNW.href = "#header";
myNW.onclick = backTop;
myLink.parentNode.insertBefore(myNW,myLink.nextSibling);
myFlg = 0;
i++;
}
}
}
window.onload = function(){ablink();}
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", btt);
}
}
// -->

</script>



CSSの1番下にコピペしてください



.foot a {
text-decoration: none;
}
.monta0 {
background-color: #00ff00;
color: #00ff00;
}

.entry .contents u{
padding: 2px 0;
background-color: #ffff33;

text-decoration: none;
}



動作を確認後に変更してください

設定するところ↓赤字部分以外はさわらないでください



.monta0 {
background-color: #00ff00;
color: #00ff00;
}
隠す色です

どちらも同じ色にしておかないと隠れません


.entry .contents u{
padding: 2px 0;
background-color: #ffff33;
}

マーカーの色です



var exTop = "| ▲TOPへ";

"| ページトップへ戻る"

"| ページのトップへ"
"| TOPへ ↑"
"| PageTop↑" ・・・・などなど



var btt = "80";
トップへ戻る時間を調整できます

80~100くらいがいいかと


.monta1 {


}
で、クリックして出てきた文章の装飾ができます

設定しなければ他の記事と同じになります



使い方


ページトップへのリンクはさわる必要ありません

自動で付きます


記事を書いているときに(タグの非表示)

もんたメソットで隠したいところは

隠したいところを反転させてURLをクリック

リンクにmontaと入力

http://はあってもなくても リンク先の表示方法もどちらでもかまいません


記事を書いているときに(タグの非表示)

マーカーを付けたいところを反転させて「下線」ボタンをクリック

下線が付きますがプレビューしてみるとマーカーがついているんです・・・・




※「使えた」「使えなかった」だけでかまいませんのでコメントを残してください

※すでにフリープラグインを使用中でonloadを使っている場合は細工が必要になります

※フリープラグインは3800字の制限があります

※ご自分の責任で使用ください


※アメブロがこみあっている時は表示されるまで時間がかかる場合があります



CSSにさわることができないスキン

いままでCSSとかいじってきましたが・・・・・


CSSをさわれないスキンがあったことに改めて考えてみました・・・・

スキンそのまま使っていて満足しているんだろうか?



ためしに実験サイト立ち上げてみました

CSSにさわれないサイト @woman の erikonailコラボスキン でも

タイトルを画像に変更できました

もちろん画像をクリックでトップページに戻ります



ほかでもブログを持っていますが

ほとんどテンプレートにはさわったことありません


ここみたいに制限されると何とかしてみようなんて・・・・・

お助け掲示板でもスキンをいじりたかったらスタンダードに戻して・・・・なんて

えっ?できそうな気がするんですけど・・・・・

CSSをさわれないサイトいじりにはまりそうな気がします・・・・


でも・・・・

このCSSは、<head> ~ </head> 内への記述方法で・・・・

まさか<body>~ </body> 内に書いてなんとかなってしまうなんて・・・・

こんなのどこにも書いて無かったよ

デモサイトはここです