サイトテーマ変更完了とよく使うタグの覚え書き

とりあえず、サイトのテーマデザインの変更完了!

(モバイル用のデザインは前と変わりません)
合わせて、過去にポストした記事の改行や文字サイズなども変更したので、ちょっとは見やすくなったかと…。
 

テンプレートは、どれで行こうかさんざん迷ったあげく

Mistylook by Sadish

に決定しました!!
 
 
デザインテンプレートを選ぶ際に重視したのは、以下の3つ。

 ・ヘッダ(ページの上部)にオリジナルの画像を表示できること。

 ・ブログページ以外のページにアクセスしやすいこと。

 ・記事と記事の区切りが分かりやすく、見やすいこと。

 
後で便利なように、このブログでこれからよく使うとおもわれるHTMLタグなどをメモしときます。
 

今回使用することにしたテンプレートは、基本的に英語で書かれることを前提にデザインされているからか、デフォルトでは文字のサイズが少し小さいので、各エントリー/ページごとに文字サイズを変更して見やすくしています。

なので、すべての記事を以下のタグで囲む。

<div style="font-size: 1.1em;">
エントリー
</div>

 
大きい強調文字

<span style="font-size: 1.2em;color:#文字色"><strong>
大きい強調文字
</strong></span>

  
オレコレ用アプリアイコンのテンプレ

アイコン画像
<span style="font-size: 1.2em;">『<a title="iTunesで開く" href="リンク" target="_blank"><strong>アプリ名</strong></a>』</span>
<pre style="font-size: 1.1em;">バージョン:0.0.0
価格:¥000
(バージョンと価格は記事掲載時のものです)</pre>

 
注意書きなどの小さい文字

<span style="font-size: 0.9em;color: #ff0000;">
テキスト
</span>

  
文字を囲む(背景色のみ)

<div style="color: #文字色; background-color: #ffffe6; padding: 12px;">
テキスト
</div>

 
文字を囲む(枠線のみ)

<div style="border:1px solid #CCCCCC;line-height:1.8em;padding:12px;">
テキスト
</div>

 
文字を囲む(背景色と枠線)

<div style="color: #文字色; background-color: #ffffe6; border:1px solid #CCCCCC;line-height:1.8em;padding: 12px;">
テキスト
</div>

 
Objective-Cのコード


コード
(/sourcecodeタグをクローズ)

 
最後に、前からWordPressで空白の改行がうまくいかないのが気になっていたのですが、以下の方法で解決できました!

WordPressのHTMLエディタ上で
全角スペースを入れた後で[Return]

この方法を使えば、2行以上の空白の改行も意図した通りに表示されます。
ただし、この方法で編集した後でビジュアルエディタで編集/更新すると、改行が変わってしまうことがありましたので注意が必要です。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中