ブログ記事の見出しに画像を入れる方法

スポンサーリンク

どうも @Totty です。

ブログを書き始めて早1ヶ月弱。

右も左も分からぬ新参者ですが、少しずつ勉強して、役に立つ記事を書きたいと思う今日この頃です。

当ブログのテーマ


当ブログはSEO最適化済みのシンプルな無料WordpressテーマのSimplicityを使わせて頂いております。

Simplicity | SEO最適化済みのシンプルな無料Wordpressテーマ

わいひら@寝ログ さん、ありがとうございます!

なんといっても白を基調したシンプルなデザインに惹かれた!

初心者にとって分かりづらい内部SEOの最適化や拡散のための仕掛けがたくさんということで非常に素晴らしいテーマです!

またブログの主役はあくまで本文というコンセプトもすごく共感させて頂きましたので、使わせて頂いてます。

少しづつカスタマイズしてみる!


先輩ブロガーさんのブログを拝見するにつれ、本文見出しの頭に画像が入っているの、カッコいいなぁと憧れが募っておったのです。

あっちこっちを参考に、カスタマイズに挑戦してみました。

いつだって原動力は「憧れ」です。

1.画像探しの旅


まずは肝心要の画像がないと話にならんぞ!ということでアイコンはこちらが無料のようだったので拝借しました。

Tabs Icons: Classic – Interface Icons for iOS & Designers

英語のサイトですが、なんとなくダウンロードに成功!

特にこのアイコンに惹かれた!

IPhone

Apple系の記事をたくさん書きたいTotty的にビンゴ!

我らがiPhoneアイコンです!

2.CSSってむずかしいね

あとはWordpressの外観→テーマ編集→Simplicity: スタイルシート (style.css) で見出しの中身に変更をかけます。

当方H3の見出ししか今のところ使っていないので、H3のところを下記のように書き換えました。

H3 TAG

よくブログにソースコードを埋め込んでいるのを見るんだけど、どうやってやるんだろ?分からないのでとりあえずスクショで。。。

ちなみにHTML&CSSはKindleの月替りセール中のこちらで勉強中・・・

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】
草野 あけみ
翔泳社
売り上げランキング: 6,153

3.完成!


一応上記のような感じで、アイコン+見出しになりました。

ちょっとだけカッコよくなったかな?

まとめ


こんな感じで初心者でもカンタンに変更ができました。他ブロガーさんにはお世話になりっぱなしですが、いつの日か多くの人の役に立てる記事も書いてみたいものです。

では!

この記事が気に入ったら
いいね ! しよう

Twitter で
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

Totty*

生まれも育ちも「埼玉」の1980年生まれの35歳男子。iPhone好き、文具好き。無類の麺好きが祟ってメタボリックな日々。サラリーマンしながら、ゆるゆるっとブログを書いております。このブログも3年目に突入。体型も、ブログもダイエットしないと思いながらも今にいたる。どうぞ、ごひいきに。