Sorairo

photo credit: Tambako the Jaguar Mother and daughter via photopin (license)

WordPressのテーマをLION MEDIAに変更しました。

熱しやすく冷めやすい、凝り性で飽き性、典型的B型のどうも僕です(笑)

最近またブログ熱が再燃しておりまして、久しぶりにブログ書こうかなー、でもその前に何か気分転換にテーマ変えたいなーと思って物色していたところ、これは!と思えるテーマを見つけましたのでご紹介します。

advertisement

新テーマ名は「LION MEDIA」

とにもかくにもデモサイトをご覧ください。
こんなにしっかりしたテーマが何と無料です。

ダウンロードは以下のページよりどうぞ。

特徴は数多くありますが、どれも無料で提供されているのが驚きなくらい充実しています。

カスタマイズ

ここ数日、色々と弄ってみましたので備忘録的に書き残しておこうと思います。

ShareHTML

まずはウェブサイトやブログ記事などを紹介する際に使うブックマークレットですが、久しぶりに調べてみるとShareHtmlを、もっと綺麗にしたメーカーというサイトを発見しました。

ものすごく便利なサイトなんですが、リンク先のページを別タブで開きたい派の私にはちょっと…
それに、サイトによってはOGP設定がちゃんとできてなくて画質の粗い画像が表示されたりすることもあって「う~ん」となっちゃいました。

Chrome拡張機能「Create Link」

なので、上記のサイトを使うのは諦めて他の方法を探していたところ、Google Chromeの拡張機能が良さげでした。

取得するコードも自分好みにカスタマイズできるので常用する一歩寸前まで来ましたが、イマイチな点がひとつ。
それは、開いているタブの全部についてコードが取得できるという点でした。
一見すると良さげな感じでしょうけど、できるだけワンクリックで必要なものだけを取得したいのでこれも「う~ん」です。

他にも探していると、Create Linkという拡張機能を見つけました。

これなら前面タブで開いてるページのコードだけ、しかもあらかじめ設定しておけばワンクリックで取得できます。
ということで、これを採用しました。

HTML

設定画面で以下のようなコードを設定しました。

class名はShareHtmlを、もっと綺麗にしたメーカーを真似てます。
ポイントはボックス全体をaタグで囲っている所ですね。
これも丸パクリですけど(笑)

CSS

CSSは以下のようにしました。

CSSは以下のブログで配布されているものを改良させていただきました。

スクリーンショットが不完全な場合もありますが、画質の粗い画像が表示されるよりはマシかなと思います。

カエレバ・ヨメレバ

続いては、アフィリエイトに欠かせないリンクツールです。
他にもポチレバとかトマレバがありますが、私はカエレバとヨメレバしか使っていないのでこの2つに絞ってお話しします。
と言っても詳しく解説されている方がたくさんいらっしゃいますので、参考にしてみてください。

コード取得時の設定

カエレバやヨメレバでコードを取得するときに指定するのは以下の項目です。

  • デザイン:amazlet風(改)-1
  • 画像:小
  • アイコン:なし

多くのサイトでは「amazlet風-2(cssカスタマイズ用)」を選択するんですが、私はもともと以下の記事のCSSを参考にしていた関係で、今更全部のリンクを貼りなおす心の余裕はなかったので何とか今のままでできないか弄ってみました。

CSS

最終的には以下のような形で落ち着きました。

参考にした(コードをいただいた)のは以下のサイトです。

また、カラーコードは以下を参考にしました。

これで以下のようにいい感じに表示されました。

※H30.6.20追記
現在は上記のコードは使用していません。

Popular Posts

続いては、人気記事を取得できるプラグイン「WordPress Popular Posts」のカスタマイズです。

表示例

当ブログでの表示はこんな感じになりました。

プラグインの設定

当ブログではサイドバーに掲載していますので、ウィジェットの設定から行います。
細かいところは省略しますが、ポイントはカスタムHTMLを設定している点です。

定義リストを用いて表示するようにしました。
これで実際に出力されるコードは以下のようになります。

少しでも分かりやすくなるようにインデントしてます。

CSS

一気にご紹介しますが、ポイントはアイキャッチ画像の左上にランキングの数字を掲載し、それぞれの背景色を変えてる点です。

参考にしたのは以下の記事です。

とても分かりやすくてほとんど迷わず設定できました。

カテゴリーリスト

最後はカテゴリーリストです。

全面的にこちらのブログを参考に弄ってみた結果、当ブログでは以下のようになりました。

CSS

テーマ独自のCSSを打ち消しながらCSSの指定をする点が面倒でもあり面白くもありました。

最後に

いかがでしたでしょうか。
盛り沢山な内容になってしまいましたが、忘れないように記しておきます。
今後は過去記事の修正と、スマホ対応を細かくやってみたいなと思います。
あ、もちろん新規記事の投稿も(笑)

advertisement

related posts

ブログのカテゴリーを見直してみました

新しいテーマに変更しましたので、ついでにカテゴリーも見直してみました。

テーマを自作する〜その①〜投稿日などの日付表示を英語表記にする方法。

WordPressのテーマを自作するにあたり、色々な壁にぶつかります。その解決法について自分の忘備録も兼ねてシェアしていきたいと思います。

WordPressのテーマをカスタマイズするには子テーマを作成すべし!

色んな所で言われていることですが、少しでもカスタマイズするならやっぱり子テーマは作るべきですね、簡単ですし。

WordPressの記事中にプラグインなしで目次を追加しました。

プラグインを使わずに記事中に目次を追加しましたのでご紹介します。

WordPressの記事中に内部リンクと外部リンクを出力するショートコード

WordPressの内外部リンクについてショートコードを実装してみましたのでご紹介します。

テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。

WordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。

今日からまた、WordPress始めます。

心機一転、新たにブログを書き始めます。iPhoneを購入して一変した私の人生を記録していければと思っています。

テーマを自作する〜その②〜アイキャッチ画像に関するあれこれの1回目。

テーマを自作するシリーズの第2回目は、WordPressでアイキャッチ画像を使えるようにするために必要なことについて調べてみました。

WordPressのオリジナルテーマを自作しました。

テーマを変えたら自分でも作りたくなったので作ってみました。

jQueryを使って記事中の目次を開閉式にしました。

目次が開閉式だとどんなメリットがありますかね。表示領域が広がるくらいですか。