Luxeritas

はじめに

こんにちは、爆走ひつじです。
以前、luxeritasでブログ記事の見出しの色をカスタマイズする方法を記事にしましたが、その後もう少し良い方法が見つかりましたので、まとめます。
luxeritasでブログ記事の見出しの色をカスタマイズする

見出し文字列のひっかけ方

前回は、".typesquare_tags"でひっかけましたが、".post h2"で、ひっかけるのがよさそうです。
これであれば、".post h3"というように、さらに下位の節の見出しもひっかけやすくなります。
file

 

具体例

具体的に、以下のように設定しました。

/* 見出しレベル2の設定 */
.post h2 {
    color: white;                                   /* 見出し文字の色を白色 */
    font-weight: bold;                               /* 見出し文字の色を白色 */
    border-left: none;                               /* 見出しの左端のボーダー表示をなし */
    background: linear-gradient(#0a2e63 , #3f65a9); /* 見出しの背景をグラデーションに */
    border-radius: 5px;                             /* 見出しの背景の角を丸く */
}
.post h2::first-letter{
    font-size: 48px;                                 /* 見出しの1文字目を大きく */
}

/* 見出しレベル3の設定 */
.post h3 {
    border-left: solid 10px navy;                   /* 見出しの左端のボーダーの太さと色を設定 */
}

最後に

見た目を凝りだすときりがないのですが、cssの勉強になります。
これからも少しずつ、カスタマイズしていきたいと思います。
またよろしくです!

WordPress

はじめに

こんにちは、爆走ひつじです。
今月、このブログは、はてなブログから、レンタルサーバに引っ越しました。
おすすめのMDエディタのプラグインについて紹介します。

WD標準のエディタについて

爆走ひつじは、ブログ記事を、VS Code上で、Markdown形式で書いています。
WordPress5から、標準のエディタで、Markdown形式がサポートされたと聞いたので、試したのですが、結構微妙です。

  • Markdown形式で書いたブログ文章全体を張り付けても、変換されない
  • HTML形式で保存される

使い方の問題かと考えていろいろ調べたのですが、こりゃだめだというのが結論です。

「WP Githuber MD」がおすすめ

いろいろWPのプラグインを試したのですが、最終的に落ち着いたのが、「WP Githuber MD」です。

爆走ひつじ的に刺さった点は。。。

  1. プレビューが右側に表示される
  2. 画像をコピペで張れる
    です。

1つ目は、イメージしやすいと思いますが、2つ目は、???ですね。
これは、Markdownで書いている文章において、画像を張りたいところに、画像の貼り付け(Windowsだと、Ctrl + C)すると、画像のアップロードとリンクタグの挿入を自動でしてくれます。
ブログ記事の作成は、文章を書く時間が大半とはいえ、記事に画像を入れるための一連の操作が結構面倒だったのですごく助かります。
file

 

画像の貼り付け機能を有効にするためには

この機能を有効にするには、「WP Githuber MD」のSettingsから、「Modules」- 「Image Paste」オプションにチェックを入れておく必要があります。
「Upload to Media Library?」は、 メディアライブラリにアップロードせずに、直接"upload"ディレクトリに置きたい場合は、チェックを外しておきます。
file

注意点

編集画面の右サイドバーの"Enable Markdown"のオプションをOFFにするとWordPressのエディタでの編集に切り替わります。
file
切り替えができて便利ですが、この状態で編集すると、HTML形式で保存されてしまいます。
注意!!

終わりに

「WP Githuber MD」のおかげで、ブログ記事を書く時間が短くなったのを実感しています。
その割に、記事全然増えないじゃん...
という突っ込みは、あっています。
まあ、いろいろ調べる時間が必要なので...(言い訳)
またよろしくです!

Luxeritas

はじめに

こんにちは、爆走ひつじです。
このブログサイトは、WordPressを利用させていただいています。
WordPressは、見た目やメニューなど定義するテンプレート(テーマ)を差し替えることができます。
今のところ、このサイトでは、luxeritasというテーマを利用させていただいています。
今回、文字の色の差し替え方法を試行錯誤してみましたので、共有します。

2019年7月19日追記
改善記事もアップしましたので参考にどうぞ
luxeritasでブログ記事の見出しの色をカスタマイズする(その2)

luxeritasとは

有名なテーマですが、一応紹介しておきます。
[https://thk.kanzae.net/wp/:embed:cite]

luxeritasは、無料のWordPressのテーマで、高速な表示や、高カスタマイズ性で人気があるテーマです。
無料ですが、ページの一番下に、「WordPress Luxeritas Theme is provided by Thought is free".」という、文章が入ります。
これを消すには、 "提供元表示消去プラグイン"を購入する必要があります。

爆走ひつじは、WordPressは、今回初めてで、メニューやサイト構成をどう作ればわからず途方にくれ、一度、有料テーマにしようかと考えたのですが、試しに入れてみたluxeritasのおかげで何とか切り抜けることができました。
デザインも気に入っており、おすすめです。

スタイルシート(css)

高いカスタマイズ性を誇る、luxeritasですが、特定の見出しの文字の色などを統一的に設定するには、スタイルシート(css)の知識が必要です。
cssは、ページのデザイン(フォントや色)のみを定義するファイルで、ドキュメントの内容とこのスタイルシートが分離されていることにより、デザインだけを変更することが可能になります。

luxeritasは、子テーマの編集というメニューがあり、ここでcssファイルを編集することができます。

 

目的のclass名を探し出せ

一番の難問がこれです。
class名がわからなければ、手の付けようがないです。luxeritasのソースを見るのもアリですが、大変ですし、テーマを変えたら振出しに戻ってしまうので、できれば避けたいですね。
今回は、chromeのデベロッパーツールの助けを借りました。

chromeで、ブログ記事を表示させます。
見出し2で書かれている部分を選択し、右クリックします。
右クリックメニューの"検証"を選択すると、右サイドにcromeのデベロッパーツールが起動し、該当部分のソースが表示されます。
file
これで、ブログ記事の見出し2のclass名が、"typesquare_tags"であることが分かります。

ちなみに、例として表示しているのは、当サイトの、7/7の記事、「安心してベビ連れで入れるお店」です。
息抜きにどうぞ。

スタイルシート(css)で文字の色を設定

ここまでこれば、あとは、一般的なcssの知識の範囲です。
今回は、見出し2の文字の色を変更したかったので、以下の記述を追加しました。

/* ブログ投稿の見出し2の設定 */
.typesquare_tags {
    color: navy
}

最後に

WordPressとそのテーマという、分厚いフレームワークやテンプレートを挟むと、カスタマイズするには、どこから手を付けて良いか見当がつかなかったのですが、今回の試行錯誤でだいぶ見えてきた気がします。
今回のやり方は、応用範囲が広いと思うので、参考にカスタマイズをしてみてください。

またよろしくです!

 

WordPress,はてなブログ

はじめに

こんにちは、爆走ひつじです。

この度、はてなブログから、レンタルサーバに引っ越しすることにしました。
まだ、リンク切れなど十分でなかったりするところがありますが、少しずつ育てていきたいと思っています。

引っ越しの動機

はてなブログに不満があったわけではないです。
むしろブログを書くだけなら、煩わしい設定もなく快適です。

最近、Pythonなどを使ってスクライピングやデータ解析を始めました。
ブログ上でのコードや結果を張ったりしていますが、動くコードも見せられたら面白いなと考えたのがきっかけです。

それだけなら、
google Colaboratoryがあるという突っ込みはあるかもしれませんが、レンタルサーバがあれば、なんか面白いことができるかもというだけです。
...はい

引っ越し先

レンタルサーバとして、Pythonが使えて、安心して利用できそうなところということで、xserverにしました。
10日の無料体験を申し込んだのですがメールを受け損なった関係で実質2日ぐらいしか使えなかったのですが、そんなに苦労なくWordPressを入れて運用に入れそうなので、このままxserverでいこうと思っています。

引っ越してみて

WordPressをちょっと触ってみてある程度わかっていたのですが、これは沼です...
こだわりだしたらきりがない。
...というか、最初は、思い通りにメニューを作る方法すらよくわからず、ひたすら試行錯誤をしました。
ググると、有料テーマを使うべきという記事の多さに、心ひかれそうになりましたが、有料テーマだけど、無料版が存在するLuxeritasを試してみて、これならいける!と確信が持てました。ありがたい...

ただ、ある程度のところで割り切らないと、いつまでたっても終わらないので、今日のひとこと。

WordPressは割り切りが大事!!

終わりに

まだ、何とかはてなブログから引っ越したという状態で、前よりレベルダウンしているところはありますが、爆走ひつじ的には強力な武器を手に入れた気分で一杯です。

こうご期待!

またよろしくです。

アドセンス

こんにちは、爆走ひつじです。

このブログは、Googleアドセンスを利用させて頂いています。

まだまだ分かっていない事も多く、試行錯誤していますが、最近、見つけた設定について情報共有したいと思います。

格安SIMユーザーとしての悩み

爆走ひつじは、普段、格安SIMを入れたスマホを使っています。

外出先で、iPadを使うときは、テザリングを使ってスマホ経由で、インターネットにアクセスしています。つまり、iPadは、Wi-Fi経由でのアクセスになります。

最近、動画広告が増えてきましたが、Wi-Fi経由でのアクセスと見なされると、結構な確率で、動画広告が無慈悲に流れてきます。

動画広告なんて流すなよぉ~と、ブツクサ呟いてますが、ふとチェックした、このブログサイト(世の中から取り残された感のあるひつじの日記)から、動画広告が流れて来たときは、涙が止まりませんでした。

Googleアドセンスで動画広告を配信しないための設定

  • サイドメニューの「広告の許可とブロック」をクリック
  • 表示されたサブメニューの「すべてのサイト」を更にクリックすると、「すべてのサイト」画面が表示されます。
  • 画面上部の「広告配信」タブをクリックします。
  • 「アニメーションディスプレイ広告」、「VPAID広告」をOFFにします。

f:id:sheepX:20171111221513j:image

 

最後に

今回の設定で十分かは確信が持てていませんが、概ね効果がありそうです。

全てを不許可にするのは簡単ですが、パケットに優しく、ブログ記事を読むのに邪魔にならない、面白広告は期待したいので、今後、様子を見ながら調整していきたいと思います。

また、よろしくです❗️

はてなブログ,ブログ運営

こんにちは、爆走ひつじです。

このブログは、ほぼ、iPad Proで書いていますが、チョクチョク悩むのがエクセルで作成した表の貼り付けです。

例えば、以下のブログでは、投資信託の一覧表を記載しています。

blog.sheepx.biz

 HTMLへ変換

以下のサイトを利用させて頂いています。

Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited

(1)Excel上で表にしたい範囲を選択してコピーをクリック

(2)変換したいExcel表を貼り付ける

貼り付けた時に、改行位置が次の行になっていたら、1文字分削除しましょう。

f:id:sheepX:20171029174404j:image

(3)変換ボタンをクリック

(4)表示されたHTMLコードを選択してコピーをクリック

(5)はてなブログの編集モードを「HTML編集」に切り替え(ブラウザ版のみ可能)

f:id:sheepX:20171029180426j:plain

(6)貼り付けたい場所に貼り付け

 

最後に

今回の操作の例では、ブラウザ(Chrome)とExcelを同時に使っていますが、iOSのSlideOver 機能が役に立っています。

たまに、貼り付けメニューを上手く出せない等、慣れも必要ですが、タブレットでマルチタスクを利用した操作も充分実用レベルになったと感じています。

また、よろしくです❗️

blog.sheepx.biz

アドセンス

こんにちは、爆走ひつじです。

このブログを始めて、3週間ぐらいになります。何とか続いていますが(^^)、ブログ記事のほぼ全てをiPad Proで書いています。

このブログでチョクチョク、iPad Proが登場するのはこのためです。

これまで、手書きアプリを中心に、iOSアプリを紹介してきました。

せっかくなら❓、ということで、ダメ元でiTunesアフィリエイトプログラムに申し込んでみました。

グクってもあまり情報がないので、参考にしていただければと思います。

f:id:sheepX:20171015123033j:image

申し込み手順

以下のURLから申し込みます。

iTunes - アフィリエイトプログラム - Apple(日本)

口座などの記入はこの段階では、不要です。

サイトの紹介は、2~3行で、『iTunes Storeのアプリや音楽を紹介しています』的なことを書きました。正直何を書いたら良いか分からなかったので、ひねりなしの素朴な紹介文です。

審査期間

サイトには、5日以内に審査結果が通知されると書かれていました。

実際は、次の日に審査OK👍のメールが来ました❗️

ただ、あろう事か、gmailの迷惑メールホルダに仕分けされており、1週間ほど気が付きませんでした。

...お世話になっているGoogle様の無言の警告でない事を祈りたいと思います。

記事がまだそれほど多くなく、大々的にAppleの製品を書いている訳でもなかったので、正直、審査O Kの返事が来たのは、大きなサプライズでした。

審査に通るためには

爆走ひつじが、申し込んだ時点では、このブログは以下の状態でした。

  • 記事数は、10記事程度
  • iPadアプリの紹介記事が、4~5記事(アイキャッチ画像変わりに、iTunesサイトのリンクを貼ってました)
  • Googleアフィリエイトにも参加

あまり厳しい条件がないのかもしれません。

ただ、著作権や法律/法令には、ちゃんと注意しましょう。

審査が通った後の設定

iTunesの商品、アプリのリンクに、通知されたアフィリエイトidを含めておきます。

「はてなプログ」を利用している場合は、「アカウントの設定

「iTunesアフィリエイト・トークン」という項目にアフィリエイトidを設定しておけば、ブログ作成メニューから、iTunes商品、アプリのリンクを挿入した際(下図)、自動的にアフィリエイトidも埋め込んでくれます(ブラウザで編集した場合のみ)

f:id:sheepX:20171014185329j:image

 

最後に

Googleアフィリエイトと同様に、分折ツールなどがあります。

ただ、よく分かっていない所が多く、今後いろいろ調べて、このブログでも紹介していきたいと思います。

またよろしくです❗️

参考にどうぞ。

blog.sheepx.biz

blog.sheepx.biz

blog.sheepx.biz

blog.sheepx.biz