-

スポンサーサイト

一定期間更新がないため広告を表示しています

  • Hatena Bookmark
お知らせ

大事なお知らせ

ご無沙汰しております。
いつもご愛顧して頂きありがとうございます。
この度、talamhtairngire.comのドメインが3月一杯で切れるので、JUGEM無料版アドレスの方に切り替えさせて頂きます。
お気づきの方は、大変お手数ですがHTML編集にてフッター部にある著作権表示のアドレスを変更して頂ければと思います。(CSS上部の著作権欄にもアドレスが表記されてますので、ここもついでに書き変えていただければ助かります。)
ページ内検索を呼び出すショットカットキーWinではCtrl+F、MacだとCommand+Fで「http://lolipoblog.talamhtairngire.com/」と検索して頂ければ分りやすいかと思います。

変更前

<div id="designed">
Designed by <a href="http://lolipoblog.talamhtairngire.com/">Talamh Tairngire</a>
</div>

変更後

<div id="designed">
Designed by <a href="http://dithis.jugem.jp/">Talamh Tairngire</a>
</div>

現在、配布してあるテンプレートに関しましては、一両日中に変更したものを更新していく予定ですので、暫くお待ち下さい。→全て更新し終わりました。他のテンプレート作者様には、大変なご迷惑をお掛けしてしまいましたことをお詫び申し上げます。

また、今後の更新、コメント返信の件についてですが、
私事が忙しくブログ更新に時間を割くことができない状況になってしまったため、2月一杯で更新を停止させて頂きます。急なお知らせになってしまい、大変申し訳ございません。
たくさんの方々にご利用頂きましたこと感謝するとともに、このような形になってしまったことを深くお詫び申し上げます。

お知らせ

テンプレートバージョンアップのお知らせ

いつもご愛顧頂きありがとうございます。
この度、テンプレートをバージョンアップしv2.0とさせて頂きました。
修正日が2017年1月付のテンプレートがそれになります。
現在、半分更新致しました。→全て更新し終わりました(2017.01.08)
基本的にデザインは変わっていませんので、前のバージョンでも変わらずお使い頂けます。また、サポートも引き続き承ります。
主な変更点は以下になります。

Normalize.cssを導入しました。
Normalize.cssとは有用なデフォルトスタイルを残し、ブラウザ間の差異をなくしたリセットCSSの上位版だと思って下さい。
スタイルシート上部にあるずらっと並んだコードがそれです。
基本的にはこの部分はいじらないほうがいいと思います。

strong要素とem要素の見た目をデフォルトの形にしました。
strong要素は太字、em要素は斜体になります。

見出しやp要素などの余白の数値を変更しました。
emの数値を1.5emに統一しました。
基本的にemは、rem単位が対応してないブラウザ用に設定しているため、最新バージョンのブラウザをお使いの方は見た目の変化はありません。

見出しの見た目を少し変更しました。
h1要素のフォントサイズを36pxから30pxに、h2要素のフォントサイズを24pxから20pxに変更しました。
また、h5要素のスタイルに、transformを使った方法で矢印を疑似的に作っていましたが、ブラウザの互換性がないため別のデザインにさせて頂きました。

ブレイクポイント(CSSの切り替えサイズ)を変更しました。
800pxから768pに、568pxから480pxにしました。

当テンプレートのソースにMIT Licenseを適応しました。
MIT Licenseとは、著作権表示とライセンス文の記載を守って頂ければ、改変、再配布、商用利用OKの自由に無料で使うことのできるライセンスです。
CSS上部のでコメントアウトした部分がそれになります。
※ただし、当方が作ったものでなく、他方から素材をお借りしているテンプレートは、お借りした素材配布者様の規約に従い使用して下さい。

残りのテンプレートも順次更新していく予定です。
よろしくお願い致します。

カスタマイズ

リッチエディダーを使って記事を投稿している方へ

computer-coffee_cupブログの記事の行間が空きすぎのように感じている方はいませんか?
リッチエディダーを使うと改行した際、<p>文章</p>と記述されるのですが、p要素に囲まれた内容は1つの段落としてブラウザに解釈され、前後に一行分の空白ができる仕様になってます。
それに倣い、当テンプレートのスタイルシートにも、p要素には下マージン(余白)が設定してあるため、行間が空きすぎる傾向があります。
今回は、そのp要素に付与されたマージンを狭める、また、なくす方法を書きたいと思います。

スタイルシートのBlock-level Elements項目の

p {
  margin: 0 0 1.429em;
  margin: 0 0 2rem;
}

この部分がp要素のスタイルになります。

この部分を削除して頂くか、あるいは

p {
  margin: 0;
}

として頂ければ、p要素の余白をなくすことができます。
また、狭めるには、数字を小さくして頂ければと思います。

※なぜmarginを二重に設定しているか?
remという単位は比較的最近導入された単位なので、古いブラウザ(IE8以下)用にemを重ねて設定してます。
スタイルは優先順位により、下にあるものが上書きされる仕組みになってます。remが対応してないブラウザは、下の設定は無視されます。
詳しい説明は割愛しますが、既定フォントのサイズにもよりますが2rem=20pxになります。

お知らせ

スライダー、カルーセルに表示されるサムネイル画像の仕組みについて 追記

carousel明けましておめでとうございます。
いつもご愛顧頂きありがとうございます。
今年もTalamh Tairngireをよろしくお願い致します。
新年早々ですが、お知らせがありますのでご報告致します。

スライダー及びカルーセルの仕組み・注意事項について新たに解明したことを書こうと思います。

まず、画像を抽出する仕組みについて簡単にご説明します。
RSSフィードの<content:encoded>タグに格納されている記事から、画像タグを識別し、スライダー及びカルーセルに表示する仕組みになってます。
ところが、<content:encoded>タグには、HTMLタグを含めた本文のうち200文字前後しか格納されておらず、文字数がオーバーすると画像が表示されなくなってしまうことが分かりました。
本来ならば<content:encoded>タグは追記以外の全文を格納するのですが、200文字前後なのはJUGEM無料版の仕様のようなのです。
尚、有料版やロリポブログのほうでは文字数関係なく画像が表示されるようです。

ですので、今後スライダー及びカルーセルの使用したテンプレートをご利用される場合は

  • 記事の続きではなく記事の内容に記述した最初の画像タグであること
  • 拡張子は.jpg .jpeg .gif .pngのものであること
  • ファイルサイズに上限はなし
  • 外部URL(JUGEMサーバーにアップロードしたものでなく)からの画像も認識可能
  • 本文の画像タグを含めた200文字以内に、画像タグを記述すること(JUGEM無料版のみ)

となります。
一番確実なのは、<img src="画像URL" alt="代替テキスト" style="display: none;" >と先頭に記述するのが安全だと思います。

画像が表示されない事象でお困りの方がおりましたら、ご迷惑お掛けして申し訳ありませんでした。
今後は、このようなお知らせ不足がないよう徹底して参りますので、よろしくお願い致します。

スライダー、カルーセルに表示されるサムネイル画像の仕組みについて

お知らせ

2017年になったら

テンプレートのスタイルシートを刷新しようかなーなんて思ってます。
主な変更点は、Normalizeの導入です。
今までリセットCSSを使いスタイルを初期化していましたが、コードが冗長で無駄が多いためNormalizeの導入を検討した次第です。
あとは趣味です。
デザインは全く変わりません。
気まぐれで色味など調節するかもしれませんが。
そんなことより新作作れよという話ですが、趣味なので仕方がないね!
よろしくお願い致します。