NEWSページにヘッダ画像を追加

更新日：
昨日（8月25日）、なに活さんのWSに押掛けて活字組版を体験させてもらった時の完成画像を左右反転させて、NEWSページのヘッダ画像として貼ってみました。また、eszettのfacebookページにはMY組版ステッキ上に組版した状態の画像をカバー写真にしてみました。

eszettのfacebookページのカバー写真

書体はFUTURA。ピンぼけはご寛恕。この時の模様の詳細は拙ブログ「活字の小箱」にて報告する予定。

On the header area of this NEWS blog of my eszett website, I put a photo of typesetting that I did by myself with my own composing stick at a Nanikatsu Workshop on Saturday 25 August 2012. Also, on the cover of my eszett facebook page, I put another photo of typesetting.

Comments

Post a comment

よく読まれている記事

CSSボタンでテキストを天地中央に揃えるとき、なぜボタン高と行高を一緒にするのか

更新日：
Image
表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。
自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。
参考Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) SpecificationCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification（日本語訳）Eric A. Meyer著. 株式会社クイープ訳. CSS完全ガイド第2版. オライリージャパン, 2010インライン要素とは何か文書構造を構成するブロックレベル要素内の特定箇所にある特定の機能や論理的な意味を付加する要素をいう。それ自身の前後に改行を生成しない。例としては、a要素、em要素、span要素など。
インライン要素には非置換要素と置換要素とがある。今回は置換要素には触れない（置換要素の代表例はimg要素）。
非置換要素とは何か要素に囲まれた内容がそのまま表示される要素。HTMLやXHTMLの要素の大半は非置換要素である。
インライン非置換要素の特徴widthとheightは適用されない。背景はコンテンツエリアとpaddingに適用される。上下marginは、事実上適用されない。左右paddingは、要素の先頭と末尾のみに適用される。上下paddingは、要素の背景を上下に伸ばすが、行の高さに影響しないため、背景色がある場合は上下の行（実際は上の行）に重なってしまう。line-heightは何を制御しているか行高を指定するline-heightは単純に行間を制御しているのではなく、leadingという、コンテンツエリアの上下にある余白を制御している。leadingはline-heightとfont-sizeとの差であり、この差を等分してコンテンツエリアの上下に加えることによって行間が決まる（コンテンツエリア＋leadingをインラインボックスという）。

コンテンツエリアとは、インライン非置換要素では、要素内の全ての文字を繋ぎ合わせたボックスでfont-sizeの値と同じ高さになる。
図解すると以下の通り。


つまり、line-heightが設定されたテキストが1行のみの時は、テキストは自ずとインラインボックスの天地中央に配置されるこ…
Read more

FullCalendarの導入からカレンダー毎の色指定まで

更新日：
Image
2012年7月の拙サイト改装2回目時に既に導入している「FullCalendar」について、導入からGoogleカレンダーの複数読込み、カレンダー毎の色指定までをおさらい。基本的な流れはFullCalendarサイトの解説を踏襲。



1. ダウンロードDownloadページから「fullcalendar-1.5.3.zip」をダウンロードして解凍後、自サーバーへアップ。
2. fullcalendarのCSSとJSを読込む<head>タグ内に以下を記述。
<link rel="stylesheet" type="text/css" href="fullcalendar.css" /> <script type="text/javascript" src="fullcalendar.js"></script> <script type="text/javascript" src="fullcalendar.min.js"></script> <script type="text/javascript" src="gcal.js"></script> 赤字部分は各自の階層に合うように適宜変更。
3. FullCalendarにGoogleカレンダーを読込むためのjQueryを<head>タグ内に記述必ず<script>タグで囲むこと。
<script type="text/javascript"> $(document).ready(function() { $('#calendar').fullCalendar({ // あとでここに色々追記 }) }); </script> 4. <body>タグ内のFullCalendarを挿入したい箇所にID属性を挿入<div id='calendar'></div> を追記。


以上、2.〜4.はBasi…
Read more

FacebookページのフィードURLを取得しウォールを自サイトに表示

更新日：
Image
結局未採用だけど、折角調べて試してみたので記録しておく。
参照サイトは
jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン） | webOpixel
FacebookページのフィードURL取得は（取得ツール付き）
FacebookページのフィードURLを取得してフィードリーダーで購読する方法: 小粋空間
以上、深謝。
自分のFacebookページのフィードURLを取得上記参照サイトでは、自FacebookページのID確認方法について書かれているが、小粋空間さんのページに「自FacebookページのフィードURL取得ツール」があるので、自FacebookページのURLを入力すれば、フィードURLを表示してくれる。但しフォーマットはAtom1.0なので、RSS2.0フォーマットは以下のように変更する。
小粋空間さんの取得ツールで取得したフィードURL
https://www.facebook.com/feeds/page.php?format=atom10&id=[取得したID]

RSS2.0フォーマットに変更後
https://www.facebook.com/feeds/page.php?format=rss20&id=[取得したID]jQueryを自サイトに貼込みwebOpixelさんからjQueryをを拝借し、自サイトに貼り込む。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var formatData = function(date) { var d = new Date(date); return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2) + '.' + ("0"+d.getDate(…
Read more

Bloggerテンプレートのちょっとしたカスタマイズのまとめ

更新日：
Image
今回Bloggerテンプレートをちょっとカスタマイズする機会があって、何をどうカスタマイズしたか忘れそうなので備忘録としてエントリ。Bloggerテンプレート「シンプル」のHTMLを編集した。

※注意：以下のカスタマイズをする前に必ずテンプレートを別に保存しておくこと。いくつかは変更・削除したりすると元に戻せなくなるものもあるので。あくまで自己責任にてお願いする次第である。

2013年3月6日追記：
bloggerのフッタのちょっとしたカスタマイズ（非推奨）も記事にしたので参考までに。
参考サイト以下のサイトを参考。非常に助かりました。深謝。
WILL FEEL TIPS: Blogger カスタマイズ TipsまとめMBA-HACK: Blogger カスタマイズ TipsBloggerのヘッダー（header）をカスタマイズする方法 - AIUEO Labテンプレートに使用言語を指定ダッシュボード＞テンプレート＞HTMLの編集で、<html>タグに「lang='ja'」を追加
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='ja' ↵ xmlns='http://www.w3.org/1999/xhtml' ↵ xmlns:b='http://www.google.com/2005/gml/b' ↵ xmlns:data='http://www.google.com/2005/gml/data' ↵ xmlns:expr='http://www.google.com/2005/gml/expr'> （※実際は1行で表記） テンプレートに<meta>を追加テンプレートの<head>内には、使用するテキストエンコーディング、使用言語、CSS、javascriptを指定する<meta>が無い。ダッシュボード＞テンプレート＞HTMLの編集で、<head>内に以下を追加。
<meta content='text/html; charset=UTF-8…
Read more

document.write() 複数行の記述方法

更新日：
Image
拙サイトの全ページ共通のフッター部分を、1箇所で集中管理できたら後々楽なので、フッター部分を外部JavaScriptにしてdocument.writeで記述することにした。で、document.writeに複数行を記述する方法をググってみたらさすが、ありましたよ丁寧な解説が。

document.write() 複数行の記述方法いろいろ | tshinobu.com
感謝感激。

色々な複数行の記述方法が提示されている中、シンプルなものが最後にありました。
各行の改行した箇所に\（バックスラッシュ）を挿入するだけで、改行やインデントをしたままのHTMLもそのままOK。イザという時の修正・変更などもしやすい。

というわけで、以下のdocument.writeに
document.write(' <!-- scroll to top BEGIN --> <div id="scrolltotop"> <span class="scroll-to-top lsf">up</span> </div> <!-- scroll to top END --><!-- copyright BEGIN --> <div id="copyright"> <span>©2012 eſzett design, Osaka Japan</span> </div> <!-- copyright END --> '); 各行の改行した箇所に\（バックスラッシュ）を挿入
document.write('\<!-- scroll to top BEGIN -->\ <div id="scrolltotop">\ <span class="scroll-to-top lsf">up</span>\ </div>\<!-- scroll to top END -->\\←注意！<!-- copyright BEGIN -->\ <div id="c…
Read more