漫画や釣りの情報など





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の見出しです

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

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

なかなか大変な作業でしたが参照サイト様のおかげで
楽に進めることができました。
関連記事
スポンサーサイト
コメント
コメントの投稿
トラックバック
トラックバック URL
この記事にトラックバックする(FC2ブログユーザー)