mokmal time

日常感じたことや、考えたことなどを忘れないようにメモするブログ。

【STINGER3/WordPress】初心者のワタシが簡単にできたカスタマイズをまとめてみる

   

medium_3324932274

このブログで使用しているテーマ「STINGER3

カスタマイズした箇所をより良くと思ってやってみても思ったようなカスタムにならなくて、
試行錯誤してやっぱり元に戻そう!と思っても元を忘れることがしばしば。

参照先のサイトを探すのはけっこう大変です。なので自分用に備忘録します。

photo credit: Jonathan D. Blundell via photopin cc

カスタマイズした一覧


RSSに画像を表示させる

RSSを購読しているとサイトやブログによっては、画像の有り無しがあるけど個人的には画像はあったほうがだんぜん印象がよい。
画像(写真やイラスト)のインパクトはとても大事。

ってことで下記コードを追加
追加する場所は、wp-includes内の【feed-rss2.php】に下記の3行目を追記




タイトルを画像にしてみる

最初の設定は文字だけですが、かっこよく画像に変えます。

【header.php】内の下記の2行目のコードを書き換えます。

・変更前

before

・変更後

after

ロゴ画像は、使用しているテーマ(STINGER2013日付)内の【images】にアップロードします。画像の名前はコード上と同じ名前にします。

参考: “知識がなくても簡単にできる。Inkscape(無料ソフト)でタイトルロゴをデザインしてみた。”




ブログの顔!ファビコンを設定する

favicon favicon_add

これも先ほどのロゴ画像の変更と同じく、【header.php】を変更します。
変更前の設定は「rogo.ico」が表示されるようになっていますので「favicon.ico」の名前の方が後で見て分かりやすいのでこの名前に変更します。当然ですが、アップロードする画像も「favicon.ico」にしないと反映されません。

*「rogo.ico」のままであれば、【images】に同じ名前で画像をアップロードするだけでOKです。

・変更前


・変更後




記事の間に点線を入れてみる

border

記事の間に仕切り(点線)を入れてやることで、区切りができ見やすくなります。

【style.css】の下記部分に仕切りのコードを追加します。

・変更前

・変更後


参考:[ℜ]【Stinger3カスタマイズ】棒線を加えて記事と記事を区別化しよう!




サイドバーの後ろを記事と同じ色にしてみる

sidebar

初期の状態ではバックと同じグレー色ですが、これを記事バックと同じ色にします。
【style.css】のサイドバー部分の記述を変更します。

・変更前

変更前の記述に下記を追記します。

・変更後



サイドバーに設置してSNSボタンの位置を少し調整してみる

FacebookやTwitter,Feedlyのボタンを追加してみたのですが、コピペで貼付けてもサイドバーの背景を変えているのであまりにもみっともない姿に・・。

tyousei

くっつきすぎやん!

あかん、あかんで〜!!

そんなわけで下記コードを追加。

枠からどの位置に配置するかといコードです。“xxxx”は取得したコードを入れてます。

参考:HTMLクイックリファレンス


まとめ


細かいところで言うとまだあるのですが、とりあえずはここまで。

初心者でも分かりやすい参考書

 - stinger, WordPress

SPONSORED LINK

SPONSORED LINK

SPONSORED LINK

SPONSORED LINK
  • このエントリーをはてなブックマークに追加
  •  
  •  

Message

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

  関連記事

Favicon(ファビコン)を作ってみました。

Favicons / loozrboy こんにちは。 ブラウザのアドレス欄によく …

WordPressブロガー必須のブログエディタ「MarsEdit」を購入して最初の設定とやるべき3つの設定

MarsEdit – the blog editor for Wor …

ブログテーマをSTINGER5に変更してすぐに変えたアドセンスの位置について

いかがお過ごしですか。@mok7malです。 タイトルがメールの表題みたいですが …

WordPressで一番最初にしたこと

    こんにちは。 記念すべき初投稿です、まずこのブログを …

初めてでも簡単にできる!WordPressでFacebookのLikeBoxを設置してみました。

こんにちは。 「WordPressの教科書」という本をネットでみつけたので、早速 …

Stinger3カスタマイズ 初心者でも簡単にできるPocketボタン追加

当ブログはstinger3を使用して作成しています。 SEOに非常につよく作られ …

知識がなくても簡単にできる。Inkscape(無料ソフト)でタイトルロゴをデザインしてみた。

ブログのタイトルロゴをカッコよくオリジナルにしたいなと思っていたのですが、ようや …

STINGER3カスタマイズ 消すのはもったいない!追尾するSNSボックスをおしゃれにカスタマイズ。

追尾式のSNSボックスってスマホで見た時に記事にかぶるから消してたんですが、復活 …

3人に1人はスマホで見てる!?スマホだけに表示される“Lineで送るボタン”を設置してみた。

スマホの進化でここ3年の間で一気にネット環境はガラッと変わり、右も左もスマホだら …