FC2ブログをカスタム

FC2ブログを好みの感じにカスタムしてみました。

変更点はこんな感じです。
①ヘッダー画像にスライダーショーを導入(bxSlider)
②記事中に貼るリンク先をはてなブログ風のブログカードにする
③FC2ブログの見出し(h3,h4,h5)をCSSで装飾

①ヘッダー画像にスライダーショーを導入(bxSlider)

まず①ですが、
こちら様を参考にさせていただきました。これによりスマホ以外のトップ画像にスライダーショーを 取り入れることができました。
 bxsliderかなり素敵ですね。

②記事中に貼るリンク先をはてなブログ風のブログカードにする

②ですがこちらのブログの製作者様が作られたブログカード
を使わせていただきました。

ブログカードのブックマークレットを作成しました - カスタマイズ

SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。 かといって はてなブログカード はSSLに対応できてないですし。 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑) そしてEmbedlyは非常にカスタマイズし辛いんですね。 ほとんどできないと言っ...


すごく楽です。

記事中のリンクが線で囲まれ画像と説明文などが
表示できるようになります。

③FC2ブログの見出し(h3,h4,h5)をCSSで装飾

③ですが、こちら様を参照させていただきました。


CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選サルワカ

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。

どれもコピペで使うことができます。




FC2ブログの見出しはh3,h4,h5で使用できるようですが 自分が使っている
テンプレートの場合、ウィジェットのタイトルも h4で指定されているため、
h4の見出しをつけるとウィジェットの タイトルまで見出しの画像が
入ってしまうという事が起こりました。

 なのでテンプレートの中でウィジェットに指定されている
h4をh6に 変更することでこのダブってしまうという現象を回避できました。
 見出しはこのような感じです。

h3

h3の見出しです


h4

h4の見出しです


h5
h5の見出しです

記事中の目立たせたい表示を大きくしてくれます。

このような感じでカスタムができました。

なかなか大変な作業でしたが参照サイト様のおかげで
楽に進めることができました。
関連記事
スポンサーサイト

0 Comments

There are no comments yet.
Leave a reply