WordPress.com に画像を貼る方法いろいろ(その2)

afafasd

前回の記事「WordPress.com に画像を貼る方法いろいろ(その1)」の続きです。

サイドバーやフッターに自分で画像を貼る

画像ウィジェットを使う

画像ウィジェットを使うと、CSS などの知識がなくてもサイドバーなどに画像を貼れます。

「メディア」→「新規追加」をクリック。

sgsdfgdf

ドラッグ&ドロップで画像をアップロード。

sfvsdfsd

アップロードした画像のリスト右側にある「編集」をクリック。

gvsfgsfg

「ファイルの URL」をコピー。

dfgsdfsd

「外観」→「ウィジェット」へ移り、

agdfvsgfds

「画像」というのを右側の欄へドラッグ&ドロップ。

adsfafas

「画像 URL」のところにコピーしておいた画像の URL を貼り付け、「保存」ボタンをクリックで、

gfsgsdf

サイドバー等に画像を貼り付けることができます。

afafasd

テキストウィジェットに img タグで画像を貼る

HTML とか CSS に慣れている人にとっては、テキストウィジェットを使って画像を貼る方法の方が何かと融通が効いていいものです。

私の場合は、HTML タグは TextExpander の方に以下のようなものを登録しておいて、簡単に貼れるようにしています。

<img src="%fill:url%" style="width:100%;max-width: 100%;height: auto;" />

アイキャッチ画像を設定し、記事にサムネイル画像を表示する

どんな内容の記事が更新されているのかを読者にぱっとすばやく把握してもらうには、記事タイトルに加え、記事の内容を印象づけるような画像を追加することが効果的です。

たとえば、「Handmade 」という WordPress.com のプレミアムテーマのデモサイトの記事の内容は、英語のよくわからない私でも「お菓子の記事かな?」となんとなくわかります。これはとりもなおさずサムネイル画像があるおかげです。

afdasdfas
Handmade

WordPress.com では、このような画像のことを「アイキャッチ画像(featured images)」と呼んでいるようです。

afasfas

アイキャッチ画像の設定は、WordPress.com の標準機能では以下のような感じで行います。

アイキャッチ画像は、テーマによってはヘッダー画像として適用されたり、

sdggsfs

記事リストのサムネイル画像となったり、

afafad

「人気の投稿と記事」ウィジェットの表示画像となったりします。

sdfasdfasd

また、ショートコード「display-posts」と CSS スタイルシートエディターを使って、以下のようなタイル状の記事一覧を自分で作ったりするときなどにアイキャッチ画像がサムネイル画像として使われます。

afdadsfasd

ヘッダー部分に(投稿)スライダーをつける

この機能は日本のブログサービスにはないか、あってもほとんど知られていないのではないかと思います。WordPress.com では「投稿スライダー」と呼んでいるようです。

dgvsagsdfgsdf

例えば、プレミアムテーマ「Linen 」の投稿スライダーはこんな動き方をします。

投稿スライダーに表示する投稿記事の設定は、一般的には、それらの記事にアイキャッチ画像を追加するとともに「この投稿を先頭に固定表示」に設定すればいいようですが、

adfafasdf

最近では、テーマ「Superhero 」などのように「設定」→「表示設定」のところで任意のタグを指定することにより、スライダーに適用する投稿記事を指定するものも出てきています。

afafasd-1

いずれにしても、スライダー機能はウェブサイトやブログに個性を与える重要な手段のひとつであることに変わりはありません。

ショートコード「display-posts」と CSS スタイルシートエディターを使って、各種サムネイル画像つきの記事リストを作成する

ショートコード「display-posts 」を使うと、例えば、以下のような記事リストをテーマの種類にかかわらず、独自に作成することができます。ショートコード「display-posts」に対応した CSS を実装しているテーマは今のところないと思うので、実際にショートコード「display-posts」を活用して、様々な形態の記事リストを生成・表示するためには、「プレミアムコース」等へアップグレードする必要があるとの認識です。

adgfvsgsd
ショートコード「display-posts」と CSS スタイルシートエディターで生成したタイル状の記事リスト

adfafdasd
ショートコード「display-posts」と CSS スタイルシートエディターで生成したサムネイル画像付きの記事リスト

CSS スタイルシートエディターで見出し等にアイコンをつけたり、背景画像を差し替えたりする

HTML/CSS をある程度使いこなせる人は、CSS スタイルシートエディターに CSS を追加するなどして、例えば、以下のようにウィジェットのタイトルの背景を画像にしたりすることができます。センス次第では、ウェブサイトをかなり違ったイメージに作り変えることが可能です。

fasdfasdfs


以上、最後の方はちょっと力尽きてしまった感がありますが、WordPress.com へ画像を貼る方法いろいろ、でした。

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

%d人のブロガーが「いいね」をつけました。