ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2016年10月25日火曜日

(メモ)ブログ説明文の変更とレイアウト

 ブログ開設以来の説明文を短いものに変更した。モバイル端末対応を考慮したためである。モバイル端末対応を考慮するに至ったきっかけは、AMPへの対応が呼びかけられた[1]頃と同時期に、本ブログのインデックス登録数が急落するという状態が生じたことである※1。いずれにしても、モバイル対応すべきではあろうと考えていたので、これを好機と考え、デザイン上の改善を図った次第である。なお、AMPとは、「モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)」[2]である。

 ただ、説明文を変更しても、本ブログがモバイル端末向けであるとは言えない。私の文章は、iPhoneの画面の横幅では非常に読みにくい。一つの文章が長いためである。トピックセンテンス(主題文)の多くが複文であることも問題である。ただ、主題文の複雑さは、扱う話題ゆえのことでもある。約40文字の幅で文章作成していることも、文章の長さに影響していよう。

 作業に併せて、タイトルのCSSを変更した。タイトルの空隙が多くなったためである。タイトルの空隙は、次の作業で縮めることができる。『Blogger』のダッシュボードから、
  1. 「テンプレート」メニュー(▽ボタンから)
  2. 「カスタマイズ」ボタン
  3. 「上級者向け」メニュー
  4. 「CSSを追加」メニュー
を順に選択して、CSSを記述する。私の場合、3つの記事[3, 4, 5]を参照して、次のコードを記入した。

.titlewrapper {
position: relative;
height: 1em;
}
.descriptionwrapper {
position: relative;
height: 1em;
}
.Header h1 {
top: -0.25em;
font-size: 400%;
}


 最後に、当初の説明文を引用しておく。説明文には、変更履歴がないので、いつ変更したのかが分からなくなる。自身による履歴を記憶できない性質なので、記事に併記しておくことにした。
専門の計量犯罪学的な手法に係る話をかなり適当に記します。日本社会が大きく変わろうとしている現在、専門外の事柄にもふれないわけにいきませんので、勉強がてら、メモを取ります。役に立つ程度まで仕上げた統計ソフトウェアR用のスクリプトもあります。
文章は、大体パラグラフリーディング(段落読み)ができます。段落の最初の文だけ追って読めば、大要がつかめます。

※1 ただし、インデックス登録数の急落の原因は特定できていない。ググってみると、いろいろな要因が考えられるとのことであり、ほかに思い当たる作業がない訳ではない。

[1] AMPとは | A~Z [SEO HACKS]
http://www.seohacks.net/basic/terms/amp/

[2] Google ウェブマスター向け公式ブログ: AMP について #AMPlify キャンペーン スタート!
(2016年9月13日)
https://webmaster-ja.googleblog.com/2016/09/what-is-amp.html

[3] Repositioning Blogger Title and Description | Southern Speakers v3.0
(Yoga、2010年12月11日)
http://www.southernspeakers.net/2010/12/repositioning-blogger-title-and.html

[4] Reducing The Header Size in Blogger – John Pile Jr
(John Pile Jr、2013年01月20日)
http://prof.johnpile.com/2013/01/20/reducing-the-header-size-in-blogger/

[5] Bloggerの本文見出しをカスタマイズする - デジタル小噺
http://ryoh1212.blogspot.jp/2012/10/blogger.html
2012年10月15日

2015年10月7日水曜日

括弧つきリストをBloggerのCSSに組み込む

リスト要素でカッコ付き数字や丸囲み数字を使うには「text-indent」をマイナスにする | ネットに書かれていないことを綴る
http://control.shado.jp/2012/0715175207.html

上記のサイトを参照して、Bloggerの括弧つきリストを調整してみました。
CSSは次のとおりです。
ul.notice li {
    list-style:none;
    text-indent:-1.5em;
    padding-left:1.5em;
}
このCSSを貼り付けるには、次の番号の順に辿り、⑤の部分にCSSを貼り付けて、ブログに適用すればOKです。


実際にリストを括弧付きにするには、具体的に「(1)」や「(2)」といった番号を振ってやらなくてはなりません。自動的に連番は変更されません。あしからずご了承ください。
<ul class="notice">
    <li>(1) 項目1</li>
    <li>(2) 項目2</li>
</ul>
試しにリストを作りました。このブログでは、最近、
  • (1) 官庁統計、特に犯罪統計の使い方について
  • (2) 原発事故の影響を危機管理上の観点から分析すること
  • (3) セキュリティ産業とテロ行為との相互依存的関係をふまえて犯罪予防上必要な対策を提言すること
  • (4) 日本社会の行く末に大きな影響を与えそうな出来事に係る他者の統計的分析を追試すること
などを扱っている(はずな)のです。