【WordPress】導入記録連載 ③記事を書くにあたって具体的な書式デザインを作る

Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！

Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス

参考：引用（blockquote）を簡単にするブックマークレット| Creazy!
参考：blockquote(引用部分)をCSSでデザインするサンプル集 | CSS Lecture

みんなやってる！！アプリ紹介のときのアイコンとタイトルとiTunesに飛ばすリンクのあの感じ。

Evernote （無料）
カテゴリ: 仕事効率化, ユーティリティ
販売元: Evernote – Evernote
☆価格は記事執筆当時のものです。

これ。

これを設定するのも徹夜ですよ、徹夜。
大きさ2種類作っちゃった。

Evernote （無料）
カテゴリ: 仕事効率化, ユーティリティ
販売元: Evernote – Evernote
☆価格は記事執筆当時のものです。

この書式を作るのには、こちらにお世話になりました。

ブックマークレット： 【近況】Bookmarkletを見直してます…。 | 普通のサラリーマンのiPhone日記

自分の好みの書式で、しかもwarm-homeテーマに合うようなレイアウトに、独自に作り直しています。
例えばバージョン・アプリ更新日入れない、とか。
まわりを四角で点々で囲む、とか。
ブックマーレートとそのカスタマイズに関しては、また詳しく書きたいと思います。

おすすめのサイトのキャプチャー画面・タイトルにリンクを張って、見栄え良く紹介する書式です。これもアプリ紹介書式と同じ@hiro45jpさんのプログラムを利用させていただいています。
やっぱ自分用にカスタマイズ。

木村聡子のだらだらぶろぐ
コメントを入れることもできます。サイトの説明や感想などを入れるといいですね。

ブックマークレット：ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記

記号テキスト代わりにつかえるシンプルなアイコン画像をちまちま集めてます。
Warmhomeテーマでは、画像は縮小で表示され、白い枠がついてしまい、さらに元画像にリンクが張られるという書式がデフォルトです。
画像を普通に貼るには、それなりのタグを書かなくてはなりません。それを一発で呼び出せるように設定しておきました。

登録したタグ ： <img src=”◆” align=”middle” style=”margin: 0px; border: 0px currentColor; background: none;” />

◎矢印

◎クローバー

◎ハート・肉球

◎鉛筆・タグ

◎Q＆A・星評価

◎ライン・裏技