最近ブログに実装した「プラグインを使わずにコピペで使える」3つの機能

prasmっていうブログだよ

最近ブログに実装した「プラグインを使わずにコピペで使える」3つの機能

プラグインは万能だけど、何でも出来るわけじゃないから

いや、さがせば以外と出来るかもしれないな。@shintarowfreshです。

開始2秒でタイトルを裏切りましたが、目に見えるレベルでごそっと変えるのは久しぶりなので、強いて言えばfrasm1.02ってところでしょうかね。
レスポンシブなテーマであるYOKOもだんだん無理が見えてきました。

インターネットエクスプローラーが好きな方はRSSに登録をお勧めします。

具体的な変更は
  • 外部リンクの前にfaviconが表示されるようにした
  • トップバナーの下にオススメコンテンツを表示した
  • サイドバーの隙間空間にふわっともろもろ出せるようにした

となっております。
jQueryやCSS3をふんだんに使ってみました。

といっても、コピペですけどね。

まずは本人からの肉声映像をどうぞ

ぶっちゃけ環境によっては僕の意図通り見えてないかもしれませんからね。

スクリーンキャプチャ以外と簡単にできるな。うん。
音声がちょっと悪いのと、愉快なバックグラウンドミュージックをいれればよかったなぁ。
まあ、いいや。

では順に行きます。

スポンサーリンク

リンク先のfavicon取得

まずはこちらの記事をご覧下さい。

これはお役立ち!リンク先のfaviconをリンクアイコンとして表示させる方法! | バンクーバーのうぇぶ屋

これはお役立ち!リンク先のfaviconをリンクアイコンとして表示させる方法! | バンクーバーのうぇぶ屋
これは見た瞬間やりたい!と思って、次の日くらいからゴニョゴニョしだしたのですが、何故か動きませんでした。

もちろん、僕はjQueryの知識はゼロですからね。うごかねぇって、愚痴っぽくブログに書いたところ、ご本人@onepercentdsgnさんから助言頂きまして。
テストサイトではばっちり動きました。

なので、実際にこのブログで使われているコードはこうなっています。jQuery本体はWordPressのものではなくgoogle先生のを使わせてもらってます。

さらに言うと、サンプルのコードだとすべてのリンクにfaviconが付いてしまうので、クラスを付けて、クラスの中だけで動くように改造してます。
というか、セナさんのコードをほんのすこしいじらせてもらいました。

HTMLにするこ
これはお役立ち!リンク先のfaviconをリンクアイコンとして表示させる方法! | バンクーバーのうぇぶ屋
こんなかんじで、スパンを挟んでクラスを当ててます。

サンプルコードで動かなかったのは、おそらくは、スクリプトの実行のタイミングだったんでしょうね。

しかし、この本サイトだと何故かだめ。テーマごとにいろいろファンクションで制御しているのだろうと、諦めましたが、ひょんな事から解決しまして。
僕の環境だとプラグインの「Head Cleaner」が干渉していたと思われます。試しにJavaScript系を全部切れば動きました。

もし、何が何でも動かない方は、キャッシュ系やヘッドクリーン系のJavaScriptをまとめてくれるプラグインの挙動が怪しいです。もちろん知識があればプラグインを動かしたまま回避できると思います。

WordPress Plugins/JSeries » Head Cleaner (最適化&高速化)

ヘッドにコード書くだけで実装できるのでかなりお手軽でした。

クルンてまわるコンテンツリスト

このエフェクトも見た瞬間コピペしたい!と思ったものでした。
クルン!まではコピペで楽勝なのですが、表面の画像を作るのが面倒すぎてしばらく「ふしぎくうかん」が続いていたんです。領域確保って意味です。僕の中で。どでもいいか。

パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート | コリス

パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート | コリス

じつは、このコードも、コリス様に掲載しているコードのままではベンダープレフィックスの関係か、旨く動かない場合があります。
なので、いっそ、デモの部分からCSSをいただいた方が安全かもしれません。

背景のグラデーションの色がまんまなのは、ぼくがコードを流用させてもらったからです。グラデーションは変えるのがめんどいんですよね。

サイドバーの空き領域に出るフィックスのコンテンツ

さて、あれほど福岡のプロブロガーにお前のサイトや言動は濃い、といわれたのですが、ラーメンよりもつけ麺の方が好きな私ですから。←濃いのが好きって意味ね。
こってり盛り目で行こうと思い、サイドバーが終わってしまった後に、空きスペースを有効活用できるこのフィックスのボックス領域をくっつけてみました。

表示させる項目に関しては現在も考え中です。

かくしておきたい領域がロード中に出てしまっているので、これも実行のタイミングだろうとあたりは付けているのですが、なにせ、ちんぷんかんぷんなモノで、誰かオシエテくださいww

スペースを有効に、jQueryでスクロールすれば現れるコンテンツ|Webpark

スペースを有効に、jQueryでスクロールすれば現れるコンテンツ|Webpark

スクロールとの連動で、サイドバーが終わる頃に表示させることが出来ます。
僕はスライドで出てくるよりもフェードが好みなので、フェードに改造しています。

【小ネタ】jQueryのアニメーション効果「fadeIn」の「I」は大文字な*frasm

まとめ

物理的に欲しい機能だけピンポイントで実装していますので、しかも、探した限りプラグインに同じようなことが出来るモノはなかったと思います。

導入やテストに一手間かかりますが、こういう小さなエフェクトや効果って、他のサイトやブログと差別化につながりますからね。是非とも導入したいモノです。

しかし、作り込んで意図通りに実行するためには知識が足りなさすぎるな。

JavaScriptやjQueryのオススメの書籍を教えてもらえると助かります。勉強しよ。

結構気に入ってます。表記崩れあれば教えてもらえると助かります

@shintarowfreshでした。

次回の記事は
「写真には写らない AirPods のよさみ」
読みのがしなくッ!

一緒に読んで欲しい記事

おすすめ商品