みっか坊主

ゲーム、自作PC、家電、バイクなど、きままに更新しています。

ブログ記事に影をつけてみた。

Posted by まったり on   0

ブログ記事に影をつけてみました。

読みづらいのか

読みやすいのか...

最近はこう言うことも出来るのですね

ちょっと感動。

<strong>タグを変更してみました。

Posted by まったり on   0


通常<strong></strong>で囲んだ箇所は

強調され太字で表示されるのですが

現在使用中のテンプレートだと背景が黄色で表示され

それはそれで気に入っているのですが

CSSを弄る事によりカスタマイズ出来る様なので

実行してみました。

コピペでノートに起こすと263番目になります。

【通常】
strong{
background-color: #ffff66;

【変更後】
strong{
background: linear-gradient(transparent 60%, #ff99ff 60%);

蛍光ペンで書いたよう感じになりかっこいい。
       ↑こんな感じ。

※スマートホンから見るとCSSの効果が無いようです。(赤ラインで表示されている様です)

#下6桁を変更することにより好きな色に変更できるのでお好みで...

amazon 楽天市場
ポイント消化 送料無料

FC2ブログにColorBox設置してみた 【新設】

Posted by まったり on   0

ブログテンプレート変更及び

Colorbox - a jQuery lightboxに置いてある総ファイル点数に

少々変更があったようなので設置し直しました。

☆設置完了時はこの様になります。

※単一表示
colorbox_test_02.jpg

※グループ化されて表示
colorbox_test_03.jpg colorbox_test.jpg colorbox_test_02.jpg

Colorbox - a jQuery lightboxサイトにてファイルをダウンロードして下さい。

colorbox-masterフォルダの中にあるexample1~example5からお好きな物を選ぶ

わたくしが選んだのはexample1です。

contentフォルダ及び選んだフォルダ(わたくしはexample1)

jquery.colorbox-min.js以外は不必要なので削除しちゃいます。

example1フォルダの中にあるimagesフォルダを開き

pngファイル5点をアップロードします。

colorbox.cssをテキストエディタで開き

23・25~31/38・39/48・50・52/番の(images/○○○.png)を

アップロードしたURLに置き換えて上書き保存。(置き換え12点)

( )までのurlを書き換えます。

そのままコピペで書き換えると後ろ側の )がurlにのってしまい

リンクエラーになりますので後ろの )だけ半角スペースを開けて設置する事

jquery.colorbox-min.jsをjquery-colorbox-min.jsにリネーム


上書き保存したcolorbox.cssとリネームしたjquery-colorbox-min.jsの2点を

アップロードします。

テンプレートに下記のスクリプトを<head>内もしくは</body>直上に設置。

わたくしは</body>直上に設置しましたが問題なく動いてくれています。

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"この文章を変換jquery-colorbox-min.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"この文章を変換colorbox.css\" media=\"screen\" />
<script type=\"text/javascript\">
$(document).ready(function(){
$(\"a[rel=\'gallery\']\").colorbox({transition:\"fade\", speed:\"300\", opacity:0.85,
initialWidth:\"600\", initialHeight:\"450\", maxHeight:\"100%\", maxWidth:\"100%\"});
$(\"a[class=\'colorbox\']\").colorbox({transition:\"elastic\", speed:\"300\", opacity:0.85,
initialWidth:\"600\", initialHeight:\"450\", maxHeight:\"100%\", maxWidth:\"100%\"});
});
</script>


※単一で設置するなら...

class=\"colorbox\" または
class=\"colorbox\" title=\"タイトル\"


※グループ化する場合は...

rel=\"gallery\" または
rel=\"gallery\" title=\"タイトル\"


以上で上記ColorBoxが使える様になります。

追記..

どうやら現在使用中のテンプレートでColorboxを使用すると

上で動いているスライド画像が無効になってしまうらしく

不具合が発生してしまうのでとりあえず無効にしてあります。

改善方法を調べて再度トライしてみようと思っております。


amazon 楽天市場  yahoo

FC2ブログにColorBox設置してみた

Posted by まったり on   0

テンプレートの変更によりlightboxの再設置を躊躇していましたがColorBoxという
綺麗でおしゃれなスクリプトがあったので再設置にチャレンジしてみました

※スクリプトの類は素人ですが結構簡単に設置できました
(ですが少しばかり困惑する箇所もあったので書き留めておこうと思います)

※単一表示
colorbox_test_02.jpg

※グループ化されて表示
colorbox_test_03.jpg colorbox_test.jpg colorbox_test_02.jpg

※参考にさせて頂いたサイトさん

はぐれオーディオマニアの秘密

趣味の工房

はぐれオーディオマニアの秘密さんのサイトで良く読んで理解すれば簡単に
設置出来るとおもいます
(超簡単と謳われているだけの事はある)と同時に
趣味の工房さんのサイトのやり方ではわたくしの所でも動きませんでした

※素人ながらの見解ですがColorBoxバージョン違いだと思われます
(DLした中にColorBoxと言うフォルダが無い)

今回設置したcolorboxは(1.3.2)

まず...

拡張子.pngの設置、合計13ファイル

jquery.colorbox-min.js から jquery-colorbox-min.jsのリネーム

colorbox.css
jquery-colorbox-min.js の2点のアップロード

は上記様を参考に無事設置出来た事とします

※ここからがわたくしの躓いた所です

colorbox.cssをテキストエディッタで開きアップロードしたpngとgifのurl変更

※メモ帳で開かずテキストエディッタで開いて下さい

imagesはctrl+Fで簡単に検索できます

( )までのurlを書き換えます。(合計22箇所です)

そのままコピペで書き換えると後ろ側の )がurlにのってしまい
リンクエラーになりますので後ろの )だけ半角スペースを開けて設置する事

JavaScriptをhtml内に配置
はぐれオーディオマニアの秘密さんの①お手軽タイプのスクリプトだと
うまく動いてくれませんでしたのでカスタマイズ設置を使いました

※テンプレートの問題で動かなかったのかと思われます

②のカスタマイズ設置の方が一手間ありますが色々と変更出来るので楽しいかと...

上記のサイトだと<head>内と記載されていましたが
わたくしは</body>直上に設置しました問題なく動いてくれています

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="この文章を変換jquery-colorbox-min.js"></script>
<link rel="stylesheet" type="text/css" href="この文章を変換colorbox.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='gallery']").colorbox({transition:"fade", speed:"300", opacity:0.85,
initialWidth:"600", initialHeight:"450", maxHeight:"100%", maxWidth:"100%"});
$("a[class='colorbox']").colorbox({transition:"elastic", speed:"300", opacity:0.85,
initialWidth:"600", initialHeight:"450", maxHeight:"100%", maxWidth:"100%"});
});
</script>

赤い箇所のgalleryがグループ化される為のコマンド?なんですが

はぐれオーディオマニアの秘密さんの所の...

※先ほどのtarget="_blank" の変わりに rel="garelly" と記述します。
のスペルが間違っていて躓いた箇所でもありました。

正しくはtarget="_blank" の変わりに rel="galleryです

※単一で設置するなら...

class="colorbox" または
class="colorbox" title="タイトル"

※グループ化する場合は...

rel="gallery" または
rel="gallery" title="タイトル"

これで無事設置出来る事と思います。以上です。

テンプレートとスタイルシートの難しさたるや。

Posted by まったり on   0

最近テンプレートやプラグインを弄りだしてから
あ~でもない、こ~でもないと消したり、付け加えたりして
めちゃくちゃになりそう...
弄りまくった後に元通りに修復するのが非常に大変。

2012_01_09.jpg


弄る時は複製をしてから弄った方が良いんですよ

どうやら共有テンプレの(aliceblue_sky)と言うテンプレは
開閉式のプラグインには向いていないようで....

それにバトンやトラックバックテーマの時に使われる
<blockquote></blockquote>がきちんと表示されないのは痛いよ

結構長らく使っているテンプレなので、愛着あるんだけどなぁ

誰か直してくれないかなぁ~

このカテゴリーに該当する記事はありません。