FC2ブログ
ブログパーツ

趣味の工房

異なったカテゴリ内の記事をまとめて表示する☆

みなさん、こんばんは
本日、ブログ左側に「DF-85」画像と、先日の依頼PCの工程を「Antec 1200 CustomiseII」として追加しました☆
2011y10m24d_212946062.jpg

さて、これらのリンクについて、メールフォームより
「違うカテゴリに入っている記事なのに、どうやって各ケースの
 工程だけ抜き出しているのだ!?」

というお問い合わせがありましたので、ネタにさせていただきます。


基本的に、このブログの左側にあるカテゴリーでは、これらケース別でカテゴリーを作っておらず、「ハードウェア~総合~」カテゴリ内のさらに「ケースMOD」カテゴリに、「光物関連」「塗装関連」「その他工作」など、言わば作業内容別でカテゴリを作成しています。

これは単純にカテゴリの中に「Antec1200 MOD」など、完成したらそれ以上増えないカテゴリを作りたくないという単なる個人的な事情なのですが、逆に、ケース別に工程を確認したい場合には、このカテゴリわけではわかりづらいのも確か。

ということで、左側にケース別の工程のリンクを作っているのですが、その方法についてです。
つまり、異なったカテゴリ内の記事を一度に表示したい場合の方法について。




異なったカテゴリ内の記事をまとめて表示する☆



もったいぶった割には仕組みは単純(爆)
ケースごと(あとからまとめて表示したいもの)に特定の文字を入れておいて、記事内検索でその検索結果を表示しているだけです。

FC2ブログでは「管理画面」の「環境設定」→「プラグインの設定」から...
2011y10m24d_215412326.jpg
「PC用」の「公式プラグイン追加」をクリック。


「検索フォーム」右側の「追加」をクリックすることで追加できます。
2011y10m24d_215425499.jpg


このブログの左側にある、コレですね。
2011y10m24d_213246642.jpg


例えば、HAF932のカスタマイズ工程であれば、各記事のタイトルに【HAF932 MOD】とつけていますので、この検索窓に【HAF932 MOD】と入れて検索をします。
すると、その文字を含む記事が表示されますので、あとはそのアドレスバーに表示されているURLをリンク先として設定すればOK。
2011y10m24d_220337149.jpg


ただ、上の例では単純にタイトルに【HAF932MOD】とつけた例を紹介しましたが、
実はコレが少し使い勝手が悪い...(; ̄ー ̄A


というのも、単純に検索結果を表示しているので、HAF932のカスタマイズとは関係ない記事でも、「HAF932 MODでやったように...」など同じ語句が入っているとHITしてしまう(混じってしまう)んですね。

つまり、なるべく本文中では使わないような
マニアックな文字列が望ましい(爆)


ということで、ボクは例えば「HAF932」のカスタマイズ記事には「haf932mod-01」、先日の「TwelveHundred」のカスタマイズ記事であれば「1200mod-02」などのような文字列を入れています。
※実際には「-」を入れていません。この記事が検索結果に引っかからないように
 つけてあります。
 

試しに左側の「各カスタマイズの工程はこちら。」の下のバナーをクリックしていただくとわかりますが、
2011y10m24d_222021012.jpg
タイトルの下に「Search:○○」と検索のために入れておいた文字列がでます。


ただ、マニアックな文字列ゆえに、本文中はもちろん、記事の最後にこっそり入れておいても読者が気になってしまうという不具合がでる可能性がありますので(爆)、この文字列自体は表示されないよう隠しているんです。



文字色をブログの背景色と同じにしてしまうという方法もありますが、その場合、ブログのテンプレートを変更したときにすべて修正しなければ丸見えに...( ̄∇ ̄;)
で、どうするかというと、以前☆ブログの文章中の特定部分にリンクさせる方法☆という記事でも紹介した「ラベル」を使っているんです。



ラベルの付け方は上の記事でも紹介していますが、

<a name="ラベル名">ラベルをつける文字(または文章)</a> 

です。
「ラベル名」には後から検索で使う文字列をいれます。
ラベルをつける文字(または文章)は何でも構いませんし、空白でも構いません。
つまり、上の例であれば

<a name="1200mod-02"></a> 

※この文章が検索結果に出ないように「-」を追加しています。

としていて、ラベルをつける文字には何も指定していないので、記事上には何も表示されないようにしています。
ただ、表示されていなくても、つけたラベル名は検索にはHITしますので、カテゴリー以外でまとめて表示したい記事などにはラベルをつけておくと便利ですよ♪


この手の記事では毎回言っていますが、ボクは「ラベル」で「<a name="○"></a>」に変換できるよう、~IMEの辞書登録~をしています。


異なったカテゴリ内の複数記事を抜き出したい場合はお試しを♪



それでは。**SeeYou**( ̄∀ ̄*)ノ



ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村




    22:59 | Trackback : 0 | Comment : 2 | Top

トピックパス(パンくずリスト)を設置する☆

みなさん、こんばんは
本日、TwelveHundredが無事ボクの元から旅立ちました。 ヽ(*´∀`)ノ< 達者でな~♪
今度の休みから、一時中断してしまっていたNineHundredとHAF922のカスタマイズの再開です☆


さて久々の「ブログ関連」カテゴリ記事です。(; ̄ー ̄A
本日、ブログにトピックパス、いわゆるパンくずリストを追加する方法について。
トピックパスって何ぞや!?と思われた方も、コチラをご覧いただければわかると思います。
2011y10m23d_195208282_20111023200700.jpg

画像の例の場合、ブログタイトルの上にある記事の位置情報を示すリンクですね。みなさんも一度はご覧になったことがあると思います。
規模が大きな複雑なサイトほど、このトピックパスを使っていることが多いですね。

この画像の場合であれば、「TOP」から「その他ひとりごと」カテゴリ内の「気になるPCケース...など」というタイトルの記事を表示していることがわかります。
このブログでは、TOP表示に3件分の記事を表示するように設定していますが、今回記事にする方法では、それら場合には表示されず、個別ページに飛んだ場合にのみ、表示されるようになっています。

ちなみに、画像は一時的にこのブログに適用したのみで、現在このブログではトピックパスは設定していません。
理由はタイトル下にカテゴリ表示がされる(リンク有)テンプレートを使用していることと、そのカテゴリ一覧の表示を左側にしているためです。


これらの設定をしていない方は、トピックパスを追加することで、ブログを訪問された方(特に検索等で個別記事に直接訪問された方)に同じようなカテゴリの記事を(探すことなく)見てもらうことも出来ます。





トピックパス(パンくずリスト)を設置する☆



はじめにお断りしておきますが、FC2での設置例として書かせていただきますのでご了承ください。
その他のブログにおいての設置箇所などは、わかりかねます。スミマセン(; ̄ー ̄A
また、この記事を参考されたことによる不具合については責任を取りかねます。
お約束の自己責任にてお願いします。


まずは管理画面を開き、右側の「環境設定」内の「テンプレートの設定」をクリックします。
念のため、テンプレートを複製しておきます。


---------------------------------------------------------------------------------------
○テンプレートの複製と、修正方法
2011y10m23d_203110706.jpg
「適用」欄に旗がついているのが現在使用しているテンプレート。
複製したいテンプレートの右側にある「複製」をクリックすることで複製されます。


複製が完了したら、コピー元・コピー先どちらでも構わないですが、変更したいほうのテンプレート名右側の「編集」をクリックします。
※現在適用しているもの意外を修正する場合は最後にそのテンプレート横の○をクリックし、
 上の「適用」ボタンを押さないと実際のブログには反映されませんので注意。


---------------------------------------------------------------------------------------



「編集」をクリックしたら、まずは下側の「○○(テンプレート名)のスタイルシート編集」欄に追記をします。
テンプレート名がちゃんと編集したいテンプレートの名前か確認してください。
2011y10m23d_203226236.jpg




トピックパスを設定するには、このスタイルシート編集欄の文字列の一番下に、1行空けて以下の記述を追加します。

.pankuzu {
font-size:12px;
text-align:left;
margin:0px 0px 10px 0px;}
.pankuzu a:link{color:#ffffff}
.pankuzu a:visited{color:#ffffff}



白抜きの文字部分はリンク表示のカラーコード。
上の「#ffffff」であれば文字色は白。一番上の画像のような黄色にしたければ「#ff9900」と入力します。
ブログにあわせて変更してください。
ちなみに下から2行目の「.pankuzu a:link」がリンクの色。一番下の行の「.pankuzu a:visited」は一度表示した場合の色になります。変更したい場合は違う色を指定してください。
アルファベットは大文字でも小文字でも構いません。ただし、半角で。
「font-size:12px;」文字の大きさ。数字を大きくしたり小さくしたりすることで文字の大きさを調整します。
「text-align:left;」は文字位置(左寄せ)好みに応じて、「left」を「center(中央)」や「right(右)」に変更することが出来ます。


次に、上の「○○(テンプレート名)のHTML編集欄」に戻り、
<!--topentry-->
という文字列のに、以下の文字列を挿入します。(コピー&ペーストでOK)

<!-- パンくずリスト -->
<!--not_index_area-->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="TOPページへ">TOP</a> > <a href="<%topentry_category_link>"><%topentry_category></a> > title - <%sub_title>
<!--/topentry-->
<!--/permanent_area-->
<!--category_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > CATEGORY - <%sub_title>
<!--/category_area-->
<!--search_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > SEARCH - <%sub_title> の検索結果
<form action="./" method="get"><input type="text" size="20" name="q" value="" maxlength="200" class="ipt" /> <input type="submit" value="Search" class="search" /></form>
<!--/search_area-->
<!--date_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > ARCHIVE - <%now_year>年<%now_month>月
<!--/date_area-->
<!--edit_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > edit - 修正画面
<!--/edit_area-->
<!--tag_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <%tag_word>
<!--/tag_area-->
</div>
<!--/not_index_area-->
<!-- パンくずリスト ここまで-->

※<!-- パンくずリスト-->、<!-- パンくずリスト ここまで-->は後で消したくなったときに
 わかりやすくするためのもので、実際にはなくても構いません。


実際に挿入するとこんな感じに。(上が切れてますが)
2011y10m23d_203331425.jpg

最後に欄外にある「更新」ボタンをクリックし、変更したテンプレートを適用すれば完了です。


ちなみに、この文字列を入れる場所によって、表示箇所を変えることが出来ます。
ボクも詳しくはわからないので、いろいろ試してみてくださいw



特にカテゴリ分けをしているけれど、カテゴリ一覧は表示していない方には役に立つかもしれません。
言うまでもなく、カテゴリ分けをしていない人には意味のない機能ですので、あしからずw


それではみなさん。ヽ(* ̄∀ ̄)**SeeYou**



ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村





    22:08 | Trackback : 0 | Comment : 4 | Top

ブログ記事中の文字背景色を変更する

みなさん、こんばんは
未だHAF君が台湾から帰ってくる気配がありません( ̄∇ ̄;)
迷子にでもなっているのでしょうか!?w


さて、メールフォームよりお問い合わせがありましたが、タイトルにある記事中の文字背景色を変更する方法について。

先日のブログ記事中にメールへのリンクを挿入するでも使いましたが、記事の特定の部分だけ背景を変えることで、見やすくすることが出来ます。



ブログ記事中の文字背景色を変更する



記述はこうです。

<div style="background-color:#333333">任意の文章</DIV>

※コピー&ペーストOK

上記白色の部分はカラー指定のコードです。「#333333」は上で使っているグレーのコード。
例えば白なら「#FFFFFF」、赤なら「#FF0000」のように決まっています。
わからない場合はコチラのサイト様でご確認を。

また、ボクは個人的に記事上下に1行分改行(空白行)を入れていますが、通常改行を指定していなければ文字の書かれた行の背景だけが変更になります。

ボクは例によってIMEの辞書登録を使い、「はいけい」で変換をすると、「<div style="background-color:#333333">」に変換されるようにしています。


ちなみに、行ごとではなく、一部の文字部分だけを変更したいのであれば、

<font style="background-color: #333333;">任意の文字(文章)</font>



で出来ます。例えば

 リンクを強調したいとき などに背景も変えてしまうのも手ですね。

...というように使えます。
ちなみに、この記述で複数行に渡る文章を書くと、

このように
でこぼこになって少し
かっこ悪くなりますので
ご注意を。



それでは。**SeeYou**( ̄∀ ̄*)ノ




ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村





    22:51 | Trackback : 0 | Comment : 6 | Top

ブログ記事中にメールへのリンクを挿入する

みなさん、こんばんは

知人より質問がありました。
タイトルの通り、メールへのリンクを挿入する方法です。

例えばこんな感じ。

りくパパにメール送信

メーラーが起動したと思います。
あ。ちなみにメーラーが起動した時点でアドレスを公開しているのも同じですので、メールアドレスをさらしたくない場合はメールフォームなどのブログパーツを使うといいと思います。
「メールフォーム ブログパーツ」で検索すればHITすると思います。「BlogMail」が超簡単です。FC2ブログであれば、公式プラグインにメールフォームがあります。

但し、もちろんメールフォームからメールをを頂いた相手に直接返信すればアドレスは相手にはわかります。





ブログ記事中にメールへのリンクを挿入する




記述はこうです。

<a href="mailto:自分のメールアドレス">メール送信(任意の文章)</a>

※コピペOK。


ちなみに、FC2ブログであれば、リンク挿入ボタン「URL」から...
2011y05m28d_071753073.jpg

「タイトル」に任意の文章。
「アドレス」に「mailto:メールアドレス」


を入力し、「現在のウィンドウで開く」を選択してOKを押します。
※「新しいウィンドウで開く」でもできますが、「target="_blank"」という要らない
 属性も入ります。


タイトルに入力した文章は、マウスを乗せたときに表示されます。
2011y05m28d_071837315.jpg




ちなみに、メールアドレスの後に続けて「?Subject=(件名を入力)」とすると、件名が入力された状態にすることも出来ます。

例:※わかりやすいように途中で改行を入れています。

<a href="mailto:自分のメールアドレス?Subject=ブログからのメール">
メール送信はこちら
</a>




さらに、「&body=(本文)」も加えると、本文まで記入できます(笑)
例:

<a href="mailto:自分のメールアドレス?Subject=ブログからのメール&body=(本文)">
メール送信はこちら
</a>




ちなみに、本文を途中で改行したい時には、改行したい部分に”%0d%0a"と記述します。


また、文字の変わりに画像を使用することも出来ます。
mail.png

記述はこんな感じ。

<a href="mailto:メールアドレス">
<img src="画像URL" alt="イメージ名" border="0" width="128" height="128" />
</a>




上の1行がメールへのリンクの部分。必要に応じて、件名や本文なども入れておきます。
下の<img src="画像URL"~始まる部分が画像の表示部分です。
ちなみに「border="0"」は境界線の値、「width="128"」「 height="128"」は画像の大きさの数値(ピクセル値・幅×高さ)です。貼り付けた画像が大きすぎた…なんて場合はこの数字を小さくすればOKですが、幅と高さの比率に注意してください。
(幅を半分にしたら高さも半分にする、など)


冒頭にも書いた
<a href="mailto:自分のメールアドレス">メール送信(任意の文章)</a>
の「メール送信(任意の文章)」の文字の変わりに、<a href="~>と</a>の間に画像の記述が入っています。


FC2ブログの場合、例えば画像を挿入すると、本文の編集画面では

<a href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/mail.png" target="_blank"><img src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/mail.png" alt="mail.png" border="0" width="128" height="128" /></a>


と表示されますが、リンク部分(黄色の文字)を「mailto:アドレス」に書き換えて、赤文字部分の「target="_blank"」を削除すればOKです。(消さなくても動きますが)




記事中で意見を募集したい場合などには使えるワザかもしれませんね。
頻繁に使う人は、毎回言っていますが辞書登録がオススメです。


それでは。

ヽ(* ̄∀ ̄)**SeeYou**



ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村



    19:23 | Trackback : 0 | Comment : 2 | Top

Colorboxのいろんなサンプルを使ってみる

みなさん、こんばんは


以前記事にしたブログの画像表示をスタイリッシュに♪(2)【Color Box】の件ですが、ボクは「example1」が気に入って使っていたんですが...



小さい画像だとこのように...
2011y05m21d_221611949_20110522201455.jpg

ギャラリー表示のときに出る「Page1of5」のような表示がタイトルとつながったり、時にはかぶってしまうのが気になってました。



で、他のCSS(example2~5)を試してみたり、試行錯誤してました。( ̄∇ ̄;)
前回もお話したとおり、本家サイトからダウンロードしてくると、5種類(example1~5)のCSSのセットになっています。
2011y04m14d_114058901.jpg


他のexample(CSS)を試したいときも、基本は同じなんですが、今まで使っていたものにもすぐ戻せるようにしたい...
例えば、「examole4」を開いてみると、
2011y05m21d_223104603.jpg

「example1」のフォルダと同じように「image」フォルダと「coloebox.css」、「index」が入っています。
方法は前回の記事の通り、「coloebox.css」の一部を書き換えてUPするだけなんですが、「Colorbox」内の「jquery.colorbox」、「jquery.colorbox-min」は共通ですので、これはまたUPする必要はありません。
つまり、各「example」フォルダ内のCSSファイルと、「images」フォルダの画像をUPすれば完了です。


ただ、上記のようにファイル名が同じなので、設定によっては今まで使っていた「colorbox.css」が上書きされてしまう恐れがあります。
上書きされてしまうと、元に戻したいときにはまた以前の「colorbox.css」をUPしなおさなくてはいけません。
さらに、同じく「example4」内にある「image」フォルダの中身の画像も、同じ名前になっているものが多いです。これが上書きされてしまうと、CSSだけ元に戻しても、表示が変わってしまいます。

2011y05m22d_081436323.jpg
上の画像のように、ファイルのアップロード画面で「同名ファイル」の処理を「別名で保存」にしておけば問題はないのですが、別名にすると今度は元のファイル名に日付と時間が追加される形になるので、ファイル名が長くなり、あとあと不便です。

そこで、名前を先に変更してしまいます。
2011y05m22d_082504391.jpg
「example4」のCSSなので、「colorbox4」とします。「Image」ファイルの中の画像に関しては、長くても短くても問題ないので、「別名で保存」とします。


また、CSSの中身ですが、これも前回同様書き換える必要があります。
2011y05m22d_082719841.jpg

前回同様、url(images/○○.png)の様になっている部分をUPした画像ファイルのURLに置き換えます。
ただし、前回は画像のファイル名を変えていないので、最後のファイル名は残していましたが、今回はファイル名も変わっているため、カッコ内はまるまる置き換えます。
また、赤ラインと青ラインの部分は「image/」のあとのファイル名が違います。
つまり、赤ライン部分には「example4」の「images」フォルダ内にあった「border1」の画像URLに、青いライン部分には同じく「border2」の画像URLに差し替える必要があります。

これは他のサンプルでも同じで、ここに記述されているファイル名と同じ画像ファイルが「images」フォルダ内にありますので、それぞれ対応した画像確認し、UPした後でそのURLに書き換えます。
もちろん、違う画像、例えば背景だけはExample1と同じにしたいとか、このボタンはexample3のものがいいとかの場合には、あえてその画像のみ変えて指定することも可能ですし、もっといえば自分で作成した画像にすることだって可能です。


念のためUP下画像のURLの確認方法。
2011y05m22d_083911098.jpg
アップロード画面から、確認したい画像のサムネイル(縮小画像)をクリックします。
(ボクは画像ファイルも名前を変えてあります)
ちなみにこれは画像が表示されるまでの「待ち」(Lading)の間にでる画像ですね


画像が表示されたら、アドレスバーを確認。これをコピー&ペーストでOKです。
2011y05m22d_083924385.jpg


画像のUP,書き換えたCSSファイルのUPが終わったら、テンプレートで確認します。
前回同様、複製を作って作業されることをオススメします。

2011y05m22d_091507465.jpg
前回挿入したテンプレートの記述の最後のほうにCSSを読み込むための記述がありますので、画像のアンダーライン部分を変更したCSSファイルの名前に変更します。(画像はすでに「colorbox0」に変えてます)
長いと後々不便というのは、この部分のことです。
上記のように、例えば「example4」のCSSファイルを「colorbox4」に変更した場合は、この記述の「colorbox」の後(.cssの前)に「4」を記入するだけで済むようになります。


とりあえずボクはこうしていろいろ試行錯誤したんですが...



結局最初の「example1」にたどり着きました(爆)


最初の問題、ギャラリー表示のときに出る「Page1of5」のような表示がタイトルとかぶってしまう問題については、「colorbox.css」ファイルの...

2011y05m22d_092700000.jpg

上の画像のアンダーライン箇所、
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
削除して、「Page1of5」のような表示を非表示にすることで回避しました。


ちなみに、非表示ではなく文字サイズを小さくして回避したい場合は、上記アンダーライン部分の
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
の最後の }の前に「(半角スペース)font-size:small;」と入力します。(さらに小さくしたい場合は「small」を「x-small」に。)


2011y05m22d_191302689_20110522192810.jpg


これで、「page1of...」の文字だけ小さくできます。
2011y05m22d_201108106.jpg






CSS、奥が深い...( ̄∇ ̄;)




それでは。ヽ(* ̄∀ ̄)**SeeYou**


ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村




    19:30 | Trackback : 4 | Comment : 12 | Top
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示