PC Bibo 6 top > HP/ブログの作成・カスタマイズ
HP/ブログの作成・カスタマイズ

写真をポラロイド風や写真立て風に表示する

写真を以下のようにポラロイド風に表示する方法。

インド料理のランチ

スタイルシートにポラロイド風写真のスタイルの記述を追加します。上の写真の場合は、pola クラスとして次のように指定しています。好みに応じてスタイル指定を変えてください。

.pola { background-color:#fffdf4;padding:30px 30px 90px 30px;border: 1px solid #cccccc; }

「padding:30px 30px 90px 30px;」が写真周囲の余白になります。数字は前から順番に、上、右、下、左の余白になります。上、右、左を同じ数字にして、下をそれよりも大きめに指定するとポラロイドっぽくなります。

次に、対象となる画像の画像挿入タグ内に class="pola" を挿入します。

<img src="http://～gazo.jpg" alt="画像の説明" class="pola" />

次に、以下のように写真立て風に表示する方法。

インド料理のランチ

たとえば、次のようにスタイルを指定します。ここでは、stand クラスとしてスタイルを指定しています。

.stand { background-color:#fffdf4;padding:30px 30px 90px 30px;border: 1px solid #cccccc; background-image: url(http://～gazo.gif) ; }

background-image: url(http://～gazo.gif) の (　) に画像の URL を指定してください。

今度は、対象となる画像の画像挿入タグ内に class="stand" を挿入します。

<img src="http://～gazo.jpg" alt="画像の説明" class="stand" />

写真の下の余白部分に説明を入れることも可能。

インド料理のランチ
マリンピア神戸のインド料理のランチ。安くておいしいです


記述例は以下のとおり。

<div style="border:1px solid #cccccc; padding:30px; width:250px; background:#fffdf4; font-size:85%; line-height:150%; ">
<img style="margin:0 0 10px 0;" width="250px" height="188" alt="インド料理のランチ" src="lunch.jpg">
<br>
マリンピア神戸のインド料理のランチ。安くておいしいです
</div>

div の width と画像の width に同じ値を指定します。


関連記事 >> 写真をポラロイド風に加工できるサイト

タグ:

Seessa（さくらの）ブログのカテゴリーなどの記事数を非表示にする

Seessa（さくらの）ブログでは、サイドバーのカテゴリーなどの表示に、記事数や日付が表示されます。これを非表示にします。

カテゴリー
HP/ブログの作成・カスタマイズ(10)
お役立ち・便利情報(10)
アフィリエイト(5)

最近の記事
(12/17)Seessa（さくらの）ブログのカテゴリーなどの記事数を非表示にする
(12/15)外部のサイトへのリンクは別ウィンドウで
(12/11)YouTube の動画を途中から再生するリンクを作成する方法


たとえば、各カテゴリーの記事数を表示しないようにするには、

1. [デザイン] タブの [コンテンツ] をクリックします。

2. [カテゴリー] をクリックします。

3. [コンテンツHTML編集] をクリックします。

4. HTML タグを以下のように編集します（赤い箇所を追加します）。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a><!--(<% category.article_count | __or__ | echo("0") %>)--><br />
<% /loop -%>
<% content.footer -%>
</div>

5. [保存] ボタンをクリックして、[コンテンツHTML編集] を閉じます。

これで、各カテゴリーの記事数が非表示になります。

要するに、<!--　 --> で囲った部分が表示されなくなるということです。<!-- から --> までを削除してしまってもかまいません。しかし、<!-- 　--> を使って非表示にそした場合は、<!-- --> を削除して元に戻すだけでいつもで元の表示に戻せるので便利です。

最近の記事の(日付)を非表示にしたい場合は、(<% article.createstamp | date_format("%m/%d") %>) の部分を <!--　 --> で囲います（または削除します）。

タグ:

Seessa（さくら）ブログにパンくずリストを設置する

Seessa（さくらの）ブログの各ページの先頭記事の上に、以下のようなパンくずリストを設置する方法。この方法は、Seessa ブログにも、さくらのブログにも有効です。

メインページ
表示なし

個別記事ページ
[ブログ名] Top > 該当するカテゴリー > 記事タイトル

カテゴリ別ページ
[ブログ名] Top > 該当するカテゴリー

過去ログページ
[ブログ名] Top > 該当する年月


1. [デザイン] タブから [コンテンツ] を選択します。

2. [記事] をクリックします。

3. 右上の [コンテンツHTML編集] をクリックします。

4. コンテンツの HTML の先頭部分の

<% content.header -%>
<!-- Content -->

のすぐ下に以下の赤で示した記述を挿入します 。

<% content.header -%>
<!-- Content -->

（この下に以下の記述を追加）

<% if:page_name eq 'article' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% loop:list_article -%> <a href="<% article_category.page_url %>"><% article_category.name %> </a> > <% article.subject %> <% /loop -%></div>
<% /if -%>

<% if:page_name eq 'archive' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% archive.createstamp | date_format("%Y年%m月") %></div>
<% /if -%>

<% if:page_name eq 'category' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% category.name %></div>
<% /if -%>
（挿入ここまで）

<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>
<div class="navi">
・
・
・

5. [保存] ボタンを押して変更を保存し、[コンテンツの HTML] ページを閉じます。

6. [デザイン] タブから [デザイン一覧] を選択します。

7. [適用] されているデザインをクリックして、スタイルシートの編集ページを開きます。

8. スタイルシートのいちばん下までスクロールし、スタイルシートの最後に、パンくず部分（pankuzu クラス）のスタイル記述を追加します。自分のブログのデザインに合わせて設定してください（以下の記述は単なる例です）。よくわからない場合は、navi クラスと同じスタイルに設定し、font-size だけ navi の font-size よりも若干大きめに設定しておくと見栄えがよいでしょう（たとえば、navi の font-size が 10px の場合は 12px）。navi クラスは、ブラウザで「.navi」を検索して探します。

.pankuzu {
color:#D97B65;
font-size:12px;
text-align:left;
padding-left:23px;
padding-right:0px;
padding-top: 5px;
padding-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

.pankuzu a {
font-size:12px;
color:#D97B65;
}

9. 最後に、[スタイルシートを変更する] ボタンを押してカスタマイズは終了です。

* 「Seessa（さくら）ブログ用のシンプルなテンプレート（パンくずリスト付）」で、パンくずリストを設置し、さらに記事の上に表示されるナビを削除したコンテンツ HTML を配布しています。

参照サイト:
パンくずリストを付ける@Seessaカスタマイズ

「さくらのブログ」でパンクズリストを作成するには

タグ:

Movable Type: ページタイトルに「ブログの設定」で設定した「ブログ名」以外の文字列を追加する

ブログ名はシンプルでクールなものにしたいけれど、なるべく多くのキーワードも盛り込みたい。ある程度 SEO について勉強した人なら、こんな風に考えると思います。

このブログのバナータイトル部分に表示されているブログ名は「PC Bibo 6」です。これは、「ブログの設定」の「名前」で設定したブログ名です。「PC 備忘録」をもじって付けた名前です。

通常は、このブログ名がそのままページタイトルとして設定されるわけですが、タイトルは SEO 的に非常に重要であるため、キーワードをなるべく多く盛り込んでおいたほうが検索時に有利になります。しかし、キーワードをたくさん盛り込んだ長ったらしい名前を付けてしまうと、それがそのままバナータイトル部分に表示されてしまいます。まるで文章のような長ったらしい名前を付けているブログをときどき見かけますが、あまりスマートなものではありません。

そこでこのブログでは、バナータイトル部分の表示は「PC Bibo 6」のままで、メインページのページタイトルには、多くのキーワードを盛り込んんだタイトルが表示されるように設定しています。実際のページタイトルは、「PC Bibo 6: パソコン備忘録 ★ホームページ作成、ブログのカスタマイズ、便利なサイトやツールに関する情報★」と表示されます（表示例はメインページを参照してください）。

このページタイトルは以下の方法で表示させています。

1. 「subtitle」という名前のテンプレートモジュールを作成し、ページタイトルとして、「ブログの名前」のあとに続けて表示させたい文字列を記述します（このブログでは「: パソコン備忘録 ★ホームページ作成、ブログのカスタマイズ、便利なサイトやツールに関する情報★」）。

2. メインページのテンプレートの title タグ内に、作成した subtitle モジュールを以下のように挿入します。

<title><$MTBlogName$><$MTInclude module="subtitle"$></title>

これで、タイトルバナー部分には簡潔ですっきりしたブログ名を表示したままで、タイトルには重要なキーワードを盛り込むことができます。

ちなみに、記事別ページとカテゴリー別ページのページタイトルは以下のように表示しています。

記事別ページ: 記事タイトル | PC Bibo 6

カテゴリー別ページ: カテゴリータイトル | PC Bibo 6

各テンプレートの記述は以下のとおりです。

記事別ページ
<title><$MTEntryTitle$> | <$MTBlogName$></title>

カテゴリー別ページ
<title><$MTArchiveTitle$> | <$MTBlogName$></title>

タグ:

Movable Type のカテゴリー別ページにそのカテゴリーの記事（エントリー）をリストする

Movable Type では、カテゴリー別のページを表示したときに、任意の箇所にそのカテゴリーの記事一覧を表示することができます。このブログでは、カテゴリー別記事ページのサイドバーに、以下のタグを記述しています（このブログの例）。

<div class="recent-entry">
<h3><$MTArchiveTitle$>カテゴリーのエントリー</h3>
<ol>
<MTEntries lastn="50">
<li><a href="<$MTEntryPermalink encode_html="1"$>" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle encode_html="1"$></a></li>
</MTEntries>
</ol>
</div>

<div class="recent-entry"> と<h3><$MTArchiveTitle$>カテゴリーのエントリー</h3> は必要に応じて書き換えてください。また、<MTEntries lastn="50"> には、表示させたい記事の数を指定します。この例では 50 を指定しています。任意の数字に書き換えてください。

実際にどのように表示されるかについては、ここをクリックしてください（Movable Type カテゴリーのページが表示されます）。

<<前へ　1｜2｜3｜4｜5｜6｜7｜8　次へ>>


Copyright © PC Bibo 6. All Rights Reserved.